Flexbox верстка блока с комментариями

Свойство align-self

Свойство align-self выравнивает блок внутри содержащего его блока вдоль оси блока, оси колонки или перекрёстной оси.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
display: flex;
align-items: center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
align-self: flex-start;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
align-self: flex-end;
}
body {
margin: 0;
}
</style>
<div class=»wrapper»>
<div class=»red»>1</div>
<div class=»green»>2</div>
<div class=»blue»>3</div>
</div>

Здесь у красного флекс-элемента задано значение flex-start, а у синего значение flex-end. Это перемещает красный элемент в начало, а синий — в конец. Однако мы не установили значение для зелёного элемента. Поэтому он использует значение по умолчанию, которое в данном случае устанавливается как center с помощью align-items для флекс-контейнера.

Принцип деления flex пространства

Допустим есть flex контейнер со следующими параметрами:

родительский контейнер: ширина 900pxэлемент section: ширина 99px, flex-grow: 3элемент aside: ширина 623px, flex-grow: 2

Сперва из ширины экрана вычитается базовый размер элементов: 900 — 99 — 623 = 178
Потом подсчитывается общее количество flex-grow значений в контейнере: 5
Затем оставшееся от вычитания базовых размеров пространство делится на получившееся число: 178 / 5 = 35.6
И уже после этого подсчитывается какое количество пространства займет каждый элемент:
- section: 99 + ( 3 * 35.6 ) = 205.8px
- aside: 623 + ( 2 * 35.6 ) = 694.2px

Параметры сетки

В то время как Bootstrap использует или для определения большинства размеров, используются для контрольных точек сетки и ширины контейнера. Это связано с тем, что ширина области просмотра указана в пикселях и не изменяется в зависимости от .

Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах с помощью удобной таблицы.

	Очень маленький<576px	Маленький≥576px	Средний≥768px	Большой≥992px	Очень большой≥1200px
Максимальная ширина контейнера	Нет (авто)	540px	720px	960px	1140px
Префикс класса
# из колонок	12
Ширина полей	30px (15px с каждой стороны столбца)
Вкладываемые	Да
Порядок столбцов	Да

Задание уникального выравнивания для каждого из элементов

align-self

align-self:stretch; (по умолчанию) — выравнивание по высоте родительского элемента
align-self:flex-start; — Выравнивание по верхнему краю
align-self:flex-end; — Выравнивание по нижнему краю
align-self:center; — Выравнивание по центру

    <div class="wrap">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div>

.wrap{
  display flex;
  background-color #ccc;
  height200px;
  align-itemscenter;
 
  div{
    background-color #ccbb9d;
    margin 10px;
    width 200px;
  }
  .item1{
    align-self flex-end;
  }
  .item2{
    align-self flex-start;
  }
  .item3{
    align-self center;
  }
  .item4{
    align-self stretch;
  }
}

Вещи, которые следует помнить

Не следует использовать flexbox там, где в этом нет необходимости.
Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям

Также важно помнить, что margin-ы в flexbox не «коллапсятся», как это происходит в обычном потоке.
Значение float у flex-блоков не учитывается и не имеет значения. это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.

Перемещение ячеек, линии сетки

Линии сетки — это условные линии по горизонтали и вертикали, между которыми располагаются ячейки.

Синим обозначены горизонтальные линии сетки и красным — вертикальные. Нумерация линий сетки слева направо и сверху вниз, либо в обратном направлении со знаком минус:

Можно перемещать ячейки по линиям и давать им команду занять место, растянуться, между определенными линиями.

Передвижение между вертикальными линиями (по колонкам)

свойство указывает то, с какой вертикальной линии начнется ячейка

свойство указывает на то, на какой вертикальной линии ячейка закончится

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

Например, обратимся к 1 ячейке. Сейчас она располагается между вертикальными линиями 1 и 2 (или -5 и -4). Будем стилизовать ее по селектору потомства .

обращаемся к контейнеру и далее к первому входящему в него диву

При помощи свойств и расположим ее между 2 и 4 линиями. Ячейка при этом займет 2 колонки.

Можно растянуть ячейку на весь первый ряд.

Для этого будем использовать обратную нумерацию для окончания:

Передвижение между горизонтальными линиями (по рядам)

Переместим ячейку 2 из предыдущего примера на первый ряд.

Стилизуем по селектору .

У рядов, как и у колонок есть отдельные свойства для обозначения старта и финиша ячейки: и . Но можно использовать одно свойства для двух значений, указанных через косую черту . Второе значение можно не указывать, если хотим, чтобы ячейка занимала только один ряд.

.grid > div:nth-child(1) {
	/*   grid-column-start: 1; */
	/*   grid-column-end: -1; */
	grid-column: 1 / -1;
}

.grid > div:nth-child(2) {
	grid-column: 2 / 4;
	/* grid-row-start: 1; */
	grid-row: 1;
}

Плавающие ячейки

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

В примере выше определен ряд для ячейки 2. Но место вокруг нее пустует. Это потому, что ячейка 1 по прежнему остается плавающей. Определим ряд для ячейки 1 и свободное место займут ячейки 3 и 4.

.grid > div:nth-child(1) {
	/*   grid-column-start: 2; */
	/*   grid-column-end: 4; */
	grid-column: 1 / -1;
  grid-row: 2;
	
}

.grid > div:nth-child(2) {
	grid-column: 2 / 4;
  /* grid-row-start: 1; */
	grid-row: 1;
}

А тут можно вручную подвигать ячейки туда-сюда для закрепления свойств.

See the Pen CSS Grid — №8 Перемещение ячеек внутри сетки by Webcademy.ru online school (@webcademy) on CodePen.dark

Использование автоотступов на основной оси

Если вы когда-либо центрировали блок в CSS (например, оболочку для содержимого главной страницы, установив margin слева и справа в auto), то у вас уже есть некоторый опыт работы с автоматическими полями. Отступ, установленный в auto, будет пытаться стать настолько большим, насколько это возможно в установленном направлении. В случае использования отступов для центрирования блока, мы устанавливаем оба, левый и правый, в auto. Каждый из них пытается занять как можно больше места, и поэтому выжимает наш блок в центр.

Автоматические отступы очень хорошо работают во Flexbox для выравнивания отдельных элементов или групп элементов на главной оси. В следующем примере я достигаю общего шаблона проектирования. Я имею панель навигации, использующую Flexbox, элементы отображаются в виде строки и используют начальное значение . Я хотела бы, чтобы последний пункт отображался отдельно от других в конце flex-строки, при условии, что в строке для этого достаточно места.

Я нацеливаюсь на этот пункт меню и даю ему margin-left auto. Это означает, что поле пытается получить как можно больше места слева от пункта, толкая его полностью вправо.

Если вы используете автоотступы на главной оси, то свойство justify-content перестанет создавать какой-либо эффект, так как автоотступы займут все пространство, которое иначе было бы распределено при помощи justify-content.

margin

Вы по прежнему можете использовать margin для флекс-элементов. Вот пример применения margin: auto ко флекс-элементу, даже после того, как он был выровнен с помощью других свойств выравнивания.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
align-self: flex-start;
margin: auto;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
align-self: flex-end;
}
body {
margin: 0;
}
</style>
<div class=»wrapper»>
<div class=»red»>1</div>
<div class=»green»>2</div>
<div class=»blue»>3</div>
</div>