У меня есть контейнер flexbox, который обертывается.
На элементах в нем я установил:
flex: 1;, поэтому элементы растут, чтобы заполнить горизонтальный контейнерmin-width: X; max-width: Y;', поэтому элементы остаются в допустимом размере.Проблема (как показано в примере) - это поведение обрезания размера.
Что происходит:
Каждый элемент как можно меньше, поэтому максимальное число из них помещается в первую строку, а затем увеличивается настолько, насколько необходимо для заполнения строки. Поэтому элемент max-width почти никогда не достигается, а элементы намного ближе к min-width.
Что я ищу:
Каждый элемент максимально велик, поэтому минимальное количество из них помещается в первую строку, а затем сокращается так же необходимо, чтобы добавить новый элемент и заполнить строку. Поэтому элемент min-width почти никогда не достигается, и элементы намного ближе к max-width.
Другими словами:
Я хочу минимально возможное количество элементов в строке, а не максимум.
Есть ли способ сделать это в CSS без JS?
Спасибо!
Я думаю, что вы ищете flex-basis, justify-content и align-content.
#container {
background-color: green;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: stretch;
}
.item {
flex: 1;
flex-basis: 200px;
height: 100px;
min-width: 100px;
max-width:200px;
margin: auto;
border: solid black 2px;
background-color: red;
}
Если вы хотите, чтобы красные поля заполняли всю область, вы можете взять максимальную ширину с div.item.