Урок 23. Примеры: Главная и поперечная оси

В каждом примере сверху — реальный результат (контейнер с пунктирной рамкой = flex-container, цветные блоки = flex-items), снизу — код. Свойства заданы на контейнере.

1. Главная ось при row vs column

Одинаковые блоки, но направление главной оси разное. При row элементы идут в строку, при column — в столбец.

/* lesson-23/styles.css */
.row    { display: flex; flex-direction: row; }
.column { display: flex; flex-direction: column; }

2. justify-content — все значения (вдоль главной оси)

Контейнер шире, чем нужно блокам, поэтому видно, как распределяется свободное место по главной оси.

/* lesson-23/styles.css */
.bar {
  display: flex;
  justify-content: space-between; /* меняйте значение */
}
/* flex-start | center | flex-end
   space-between | space-around | space-evenly */

3. align-items — все значения (поперёк, по cross-оси)

Контейнер выше блоков (задана высота), поэтому видно выравнивание по поперечной оси. У третьего блока намеренно больше высота — для baseline и stretch это заметно.

/* lesson-23/styles.css */
.bar {
  display: flex;
  align-items: center; /* меняйте значение */
}
/* stretch | flex-start | center
   flex-end | baseline */

4. Центрирование по обеим осям

Классический приём: justify-content: center + align-items: center ставят блок строго в центр контейнера.

/* lesson-23/styles.css */
.hero {
  display: flex;
  justify-content: center; /* центр по главной */
  align-items: center;     /* центр по поперечной */
  min-height: 110px;
}

5. flex-wrap: nowrap vs wrap

Шесть блоков в узком контейнере. При nowrap они сжимаются в одну линию; при wrap — переносятся на новые линии.

/* lesson-23/styles.css */
.gallery {
  display: flex;
  flex-wrap: wrap; /* nowrap — по умолчанию */
}