Сделать гибкие предметы обернуть после третьего элемента на мобильном телефоне

Question

Я установил ряд миниатюр с использованием flex, и это работает отлично, они центрированы по вертикали на рабочем столе. Как я могу отображать 3 изображения в мобильном экране в первой строке и 2 изображения во второй строке? Изображения во второй строке должны быть выровнены влево.

div { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 
img { 
 
    padding: 10px 5px; 
 
    margin: auto; 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    div { 
 
    flex-wrap: wrap; 
 
    } 
 
}

<div> 
 
    <img src="http://placehold.it/150/220" alt="" /> 
 
    <img src="http://placehold.it/200/250" alt="" /> 
 
    <img src="http://placehold.it/240/100" alt="" /> 
 
    <img src="http://placehold.it/250/220" alt="" /> 
 
    <img src="http://placehold.it/200/270" alt="" /> 
 
</div>

http://codepen.io/anon/pen/akLbzV

Answer 1

Одна вещь, вы можете попробовать это настроить ширину каждого гибкого элемента в медиа-запросе, так что три элемента вынуждены в первый ряд, и два элементы вставляются в последующие строки.

Вы можете сделать это, используя flex, flex-basis или width. Однако width работал лучше всего в вашем коде, возможно, потому, что элементы изображения имеют встроенный размер.

Revised Codepen

* { box-sizing: border-box; } 
 

 
div { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
img { padding: 10px 5px; } 
 

 
@media only screen and (max-width: 480px) { 
 
    div { flex-wrap: wrap; } 
 
    img:nth-child(-n + 3) { width: 33.33%; } /* targets first three elements only */ 
 
    img:nth-child(n + 4) { width: 50%; } /* targets all elements except first three */ 
 
}

<div> 
 
    <img src="http://placehold.it/150/220" alt="" /> 
 
    <img src="http://placehold.it/200/250" alt="" /> 
 
    <img src="http://placehold.it/240/100" alt="" /> 
 
    <img src="http://placehold.it/250/220" alt="" /> 
 
    <img src="http://placehold.it/200/270" alt="" /> 
 
    <img src="http://placehold.it/260/140" alt="" /> 
 
    <img src="http://placehold.it/210/200" alt="" /> 
 
</div>

Answer 2

Если вы не можете использовать width или flex-basis (для Исх., Потому что ваши элементы имеют разную ширину, и вы должны space-between), и вы все в порядке с помощью дополнительной <div/>, вы можете сделать что-то вроде этого:

<div> 
    <img src="http://placehold.it/150/220" alt="" /> 
    <img src="http://placehold.it/200/250" alt="" /> 
    <img src="http://placehold.it/240/100" alt="" /> 
    <div class="flex-break"/> 
    <img src="http://placehold.it/250/220" alt="" /> 
    <img src="http://placehold.it/200/270" alt="" /> 
</div> 

CSS:

.flex-wrap { 
    width: 100%; 
} 

@media only screen and (min-width: 481px) { 
    display: none; 
} 

Это не самое красивое решение, но это решает проблему.