Что нового
  • Что бы вступить в ряды "Принятый кодер" Вам нужно:
    Написать 10 полезных сообщений или тем и Получить 10 симпатий.
    Для того кто не хочет терять время,может пожертвовать средства для поддержки сервеса, и вступить в ряды VIP на месяц, дополнительная информация в лс.

  • Пользаватели которые будут спамить, уходят в бан без предупреждения. Спам сообщения определяется администрацией и модератором.

  • Гость, Что бы Вы хотели увидеть на нашем Форуме? Изложить свои идеи и пожелания по улучшению форума Вы можете поделиться с нами здесь. ----> Перейдите сюда
  • Все пользователи не прошедшие проверку электронной почты будут заблокированы. Все вопросы с разблокировкой обращайтесь по адресу электронной почте : info@guardianelinks.com . Не пришло сообщение о проверке или о сбросе также сообщите нам.

Как Работает Css Flexbox: Наглядное Введение В Систему Компоновки Элементов На Веб-странице

Sascha

Заместитель Администратора
Команда форума
Администратор
Регистрация
9 Май 2015
Сообщения
1,064
Баллы
155
Возраст
47
Flexbox призван спасти нас от неприятных моментов чистого CSS (например, от вертикального выравнивания), и он отлично справляется со своей задачей. Но разобраться в принципах его работы порой бывает сложно, особенно, если вы новичок.

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

Звучит неплохо, но давайте посмотрим, так ли оно гладко на практике. В этой статье мы изучим 5 самых популярных свойств Flexbox, разберемся, что они делают, и как они на самом деле работают.

Display: Flex


Вот пример страницы:



У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block. Поэтому каждый квадрат занимает всю ширину строки.

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

#container {
display: flex;
}



Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое «flex-контекст».

Flex Direction


У flex-контейнера есть две оси: главная ось и перпендикулярная ей.



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

#container {
display: flex;
flex-direction: column;
}



Важно заметить, что flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

Есть еще парочка свойств для flex-direction: row-reverse и column-reverse.



Justify Content



Justify-content отвечает за выравнивание элементов по главной оси.

Вернемся к flex-direction: row.

#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}

Justify-content может принимать 5 значений:

  1. flex-start;
  2. flex-end;
  3. center;
  4. space-between;
  5. space-around.



Space-between задает одинаковое расстояние между квадратами, но не между контейнером и квадратами. Space-around также задает одинаковое расстояние между квадратами, но теперь расстояние между контейнером и квадратами равно половине расстояния между квадратами.

Align Items


Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.



Вернемся обратно к flex-direction: row и пройдемся по командам align-items:

  1. flex-start;
  2. flex-end;
  3. center;
  4. stretch;
  5. baseline.



Стоит заметить, что для align-items: stretch высота квадратов должна быть равна auto. Для align-items: baseline теги параграфа убирать не нужно, иначе получится вот так:



Чтобы получше разобраться в том, как работают оси, давайте объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction:



Align Self


Align-self позволяет выравнивать элементы по отдельности.

#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Only this square will be centered.

Давайте для двух квадратов применим align-self, а для остальных применим align-items: center и flex-direction: row.



Заключение


Хотя мы рассмотрели лишь верхушку айсберга по имени Flexbox, этого хватит, чтобы работать с выравниваниям — в том числе и с вертикальными.


Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

.
 
Вверх