• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Многострочность элементов flex-контейнера в CSS (Как с помощью Flexbox расположить так элементы без обертки)
Многострочность элементов flex-контейнера в CSS
Kosten
Дата: Пятница, 2019-02-15, 02:34 | Сообщение 1
Администраторы
Сообщений:23411
Награды: 56


Каждый веб разработчик знает, что элементы могут как сжиматься, так и растягиваться по заданному значению, где все делается при помощи 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;
}


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

Демонстрация
Прикрепления: 2204955.png(6.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Многострочность элементов flex-контейнера в CSS (Как с помощью Flexbox расположить так элементы без обертки)
  • Страница 1 из 1
  • 1
Поиск: