Адаптивный флексбокс с 3 элементами в строке, затем 2, затем 1
У меня есть раздел, в котором шесть пунктов.
Мне нужно 3 элемента в строке на рабочем столе, а на среднем устройстве мне нужно 2 элемента в строке и 1 элемент на мобильное устройство.
<div class = "flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Вот css:
.flex-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (max-width: 768px) and (min-width: 320px){
.flex-container {
display: flex;
justify-content: center;
flex-basis: 100%;
}
}
Это показывает мне только 3 элемента на рабочем столе и по одному на элемент на мобильном устройстве, но не 2 элемента. Что мне нужно изменить в моем коде, чтобы получить то, что я хочу?
Ответы 4
Так вы хорошо справляетесь с медиа-запросами ..
Остерегайтесь 'е' в .flex-conteiner, должно быть .flex-container
Затем используйте медиа-запросы и гибкую основу для остальных размеров экрана, например:
@media only screen and (max-width: 768px) and (min-width: 320px){
.flex-container {
display: flex;
justify-content: center;
flex-basis: 100%;
}
}
@media only screen and (max-width: 1200px) and (min-width: 768px){
.flex-container {
display: flex;
justify-content: center;
flex-basis: 50%;
}
}
а для больших экранов используйте основу изгиба 33%.
вы можете установить flex-basis в <div>, надеюсь, это поможет вам https://codepen.io/paradian/pen/rZQopv
Макет может быть достигнут путем настройки flex-basis внутри медиа-запросов.
Вот идея:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
flex: 1 0 26%;
}
@media ( max-width: 768px) {
.flex-container > div {
flex-basis: 34%;
}
}
@media ( max-width: 320px) {
.flex-container > div {
flex-basis: 51%;
}
}
/* non-essential demo styles */
.flex-container > div {
height: 50px;
background-color: lightgreen;
border: 2px solid white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}<div class = "flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>демонстрация jsFiddle
В первом правиле flex для flex-grow установлено значение 1. Это означает, что гибкие элементы будут занимать все свободное пространство.
Следовательно, ширина каждого элемента, выраженная через flex-basis, больше не должна быть традиционной 33,33% (3 элемента в строке), 50% (2 элемента в строке) и 100%.
Эти числа часто приходится корректировать вручную (например, calc()), чтобы освободить место для полей.
В этом случае, благодаря технологии гибкости, flex-grow занимает оставшееся пространство, а flex-basis должен быть достаточно большим, чтобы обеспечить принудительную обертку.
Так, например, с flex-basis: 26% в линию могут поместиться только три элемента. Четвертый надо завернуть. Здесь достаточно места для полей. flex-grow заполняет пустое место.
Предыдущие ответы верны, пожалуйста, проверьте мой ответ в этом очень похожем сообщении SO: Как сделать дочерний div плавным по отношению к родительскому.
Также я заметил, что ваш медиа-запрос неверен, ваш класс неверен, редактируя его.