Каждый веб разработчик знает, что элементы могут как сжиматься, так и растягиваться по заданному значению, где все делается при помощи CSS. Рассматривая полное полное руководство по CSS flexbox, то это полное руководство объясняет все о flexbox, сосредотачиваясь на всех возможных свойствах для родительского элемента Flex и дочерних элементов flex.
Он также включает в себя историю, демонстрации, шаблоны и диаграмму поддержки браузера. В материале представлено многострочность так и многоколоночность элементов, где сужением экрана они автоматически за экраном производят уменьшение своего изначального значение.
HTML
Код
<div class="canaldagas-cagosekanone">
<li class="milasgted">Элемент-1</li>
<li class="milasgted">Элемент-2</li>
<li class="milasgted">Элемент-3</li>
<li class="milasgted">Элемент-4</li>
<li class="milasgted">Элемент-5</li>
<li class="milasgted">Элемент-6</li>
</ul>
</div>
CSS
Код
.sogukevonsa-gedonop {
height: 148px;
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
}
.canaldagas-cagosekanone {
margin-top: 25px;
font-family: Verdana, Geneva, sans-serif;
}
ul {
background: #b5aeae;
list-style: none;
padding: 10px;
border: 2px solid #988e8e;
border-radius: 3px;
}
li {
background-color: #114d5e;
color: #f5f3f3;
margin: 5px;
padding: 10px;
}
li:nth-child(odd) {
background-color: #114d5e;
}
h1 {
color: #114d5e;
font-size: 16px;
line-height: 25px;
}
h1 span {
color: #ffffff;
background: #074249;
padding: 3px 8px;
}
.milasgted{
font-size: 15px;
}
Здесь как можно заметить, что все элементы выстроятся в рад, или просто с левой стороны идут на право, где изначально занимают свое стандартное положение. Если сжатие элемента происходит по ширине, то контейнера происходит перенос на следующий ряд.
Демонстрация
