Всем привет, я начинаю учить css, видел что flex-box очень важная штука, и очень помогает расставить объекты по местам, мне нужно создать список элементов и выровнять их по ширине экрана, скиньте пожалуйста как это сделать, и по возможности опишите пожалуйста свойства flex-box.
Привет, попробуй вот так:
<div class="container">
Flexbox
<ul class="flex-cont">
<li class="flex-elem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio eius est incidunt inventore itaque modi mollitia nisi porro possimus?
<li class="flex-elem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet autem culpa illo maiores minima, quibusdam quis similique tempora temporibus voluptas!
<li class="flex-elem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam illum impedit ipsam itaque minima neque quas reprehenderit sequi tempora?
<li class="flex-elem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ex repellendus! Adipisci animi dicta distinctio doloremque, maiores minus pariatur suscipit?
<li class="flex-elem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae culpa debitis delectus dicta expedita fugit harum odit vero vitae?
<li class="flex-elem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cum dolores eum, id illo ipsa porro quae similique tempora vitae.
В стилях просто прописываем display:flex; то есть делаем наш контейнер flex контейнером, расставляем контент с помощью justify-content: space-around;
.flex-cont {
display: flex;
justify-content: space-around;
}
На самом деле тут есть очень много разных свойств, можно сделать что бы объекты распологались в колонку, играть с порядком показа элементов, всё это можно сделать с помощью
flex-direction:
В данном случае нам нужен justify-content, он отвечает за выравнивание элементов по главной оси. Сам по себе может принимать такие значения:
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
flex-start – расставляет в начале.
flex-end – расставляет в конце.
center – ставит в центр.
space-between – делает одинаковое расстояние между элементами.
Space-around – расставляет объекты с одинаковым расстоянием между ними но крайние объекты будут за половину расстояния между объектами до контейнера в котором находится.
Justify работает с главной осью, так же есть align-items который работает вертикально, он имеет приблизительно такие же свойства, но они уже преображают объект по высоте.