Автоматическое изменение размера div динамической ширины в соответствии с шириной браузера?

У меня есть несколько div с неизвестной шириной (динамическая ширина). Как я могу автоматически изменить размер этих div, чтобы они соответствовали ширине браузера?

Например, у меня есть 5 div с разной шириной. Если ширина браузера может заполнить только 3 div, то эти 3 div автоматически изменятся в соответствии с шириной браузера, а остальные будут отображаться во второй строке.

Как я могу сделать это с помощью html5 и css3. Я знаю, что это новая функция flexbox в css3, но я не уверен, смогу ли я с ней справиться.


html autoresize css flexbox
person vzhen    schedule 15.10.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете поиграть с классом - значение по вашему запросу. мин./макс. ширина/высота

см. пример демо jsFiddle

    .grid {
  display: box;
  display: -webkit-flex;
  display: flex;
}
.column {
  padding: 20px;
}
.fluid {
  box-flex: 1;
  background: #ccc;
}
.fixed {
    width: 100px;
  background: red;
}​
person yossi    schedule 15.10.2012