Исследование css-свойства flex

Разница между устаревшими подходами и современными стандартами

Теперь, когда у вас есть представление о том, как проблему решали раньше, давайте взглянем, на что способны Flexbox и Grid.

Flexbox и Grid — это идеальные решения для CSS-разметки, являющиеся современными стандартами. Если вам необходимо писать CSS-код на хорошем уровне, то обязательно изучите их.

Решение задачи с помощью Flexbox

Контекст форматирования Flexbox инициализируется путем создания flex-контейнера.

Родительским элементом является . Он содержит боковую панель и основную зону. Создаём контейнер:

И получаем:

Flexbox в действии

Не забудем о пропорциях:

Вуаля! Проблему можно считать решенной:

Задача решена

С Flexbox можно делать много разных вещей:

  • Отцентрировать боковую панель и основную зону по вертикальной оси:

  • Изменить положение одного из дочерних элементов:

  • Менять порядок дочерних элементов без изменения HTML-кода:

И я затронул лишь верхушку айсберга Flexbox.

Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.

Прим. перев. Разобраться с Flexbox поможет наше наглядное введение.

Решение проблемы с помощью Grid

В отличие от Flexbox, который по большей части работает в одном измерении, с CSS Grid вы можете использовать как ряды, так и колонки. Посмотрим, как решить нашу проблему с его помощью.

Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:

Вот весь CSS:

И вот что мы получим:

Первичный вариант

Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.

Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?

Что, если мы разделим пропорции ширины, как раньше:

Пропорциональное распределение ширины для дочерних элементов

Да, результат отличается, но нам он не подходит. Боковая панель пока не расположена сбоку от главной зоны.

Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи необходимо определить ряды и строки внутри него.

Вот как это делается:

Решение в одну строку — красиво, не правда ли? определяет пропорции столбцов в сетке.

Задача решена

Но с помощью Grid можно сделать гораздо больше.

Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:

Вот что мы должны получить:

Заливка цветом зоны основного контента

Посмотрим, что хорошего может предложить Grid:

  • Можно определить разрыв между столбцами:

    Вот результат:

    Нет необходимости в добавлении отступов к блокам и : это делает .

  • Можно сделать столько столбцов, сколько вам нужно. Примеры выше использовали только по одному элементу и . Добавим ещё два:

    Grid сам понял, что нам надо — не пришлось даже трогать CSS.

  • Можно определить пробел между строками:

    Для упрощения можно использовать сокращение: вместо и .

  • Можно определять размеры строк:

    Теперь высота первой, второй и третьей строк равна 200, 300 и 400 пикселей соответственно.

Для начала хватит и этого — но это далеко не всё.

Что такое Flexbox на самом деле?

Спецификация Flexbox описывает метод компоновки так:

Я думаю, что ключевая фраза здесь “распределение пространства и выравнивание контента”. Flexbox — это все о том, чтобы взять кучу элементов (которые имеют разные размеры) и поместить их в контейнер (который сам может быть переменного размера). Flexbox — это мягкость. Он пытается создать наилучший макет для наших элементов, давая большим элементам больше пространства, а меньшим элементам меньше пространства, тем самым сохраняя читаемость контента.

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

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

Существуют также шаблоны, в которых вы хотите иметь строки с переносом, однако вам не нужна строгая сетка. Если мы возьмем оригинальный пример Grid против Flexbox, где мы используем в сетке синтаксис repeat auto-fill, а затем flex-контейнер с переносом строк, то сразу увидим разницу между этими двумя методами.

В примере Grid элементы сетки выстраиваются в строки и столбцы. Когда число столбцов трека изменяется (в зависимости от пространства), элементы всегда переходят в следующую доступную ячейку сетки. На самом деле, нет никакого способа запросить элемент сетки окружить трек, чтобы заполнить по auto-flow сценарию, если есть другие пустые ячейки.

В примере flex итоговые элементы разделяют пространство, оставшееся между ними, таким образом, мы не используем выравнивание по горизонтали и вертикали.

Если у нас flex-basis установлен в auto, и любой из flex-элементов увеличивается, то остальным также будет предоставлено дополнительное пространство, чтобы выравнивание могло быть различным от строки к строке.

Это очень яркий пример того, где мы хотели бы использовать Flexbox над Grid Layout. Если мы хотим, чтобы элементы были обернуты, но занимали пространство, в котором они нуждались, по строкам. Это очень отличается от сетки. Шаблоны, подобные этому, могут представлять собой набор тегов (один или два слова, которые вы хотите хорошо отображать в виде набора элементов), занимающих необходимое пространство, а не жестко вставленных в строгую сетку.

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

В будущем (если будет поддержка браузерами свойств Box Alignment вне гибкого макета), мы можем сделать это, не добавляя display: flex в контейнер. На данный момент, однако, все, что вам нужно сделать, это дополнительная строка CSS, что не является проблемой.

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

Вы также можете выбрать Flexbox в сценарии, где контент нужно привести к низу контейнера, не давая ему всплывать. В примере, расположенном ниже, я делаю контейнер flex-контейнером, отображая содержимое в виде столбца, а затем позволяю середине расти, выталкивая footer вниз компонента.

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

Однако я думаю, что Flexbox будет лучшим в ситуации, когда потребуется добавлять дополнительные элементы, которые я не ожидала в своем дизайне. Например, если у меня есть компонент навигации, использующий Grid, я бы создала достаточно треков для всех элементов, так как я не хотела бы, чтобы создавалась новая строка, если бы у меня было “слишком много” элементов. С flexbox, достаточно длинным, я бы разрешил элементам быть гибкими с flex-basis 0 (или auto), тогда бы элементы сами пускали нового компаньона в строку, освобождая ему место.

flex: {grow shrink basis}

Как и у контейнеров есть свое свойство, нацеленное на сокращение
записи, так и у элементов есть свое свойство flex.

Записывать это свойство нужно следующим образом:

По умолчанию свойство выглядит так:

Обрати внимание, что записывать все три значения не
обязательно

/* 0 0 auto */
 flex: none; 

 /* Одно значение, число без единиц измерений: flex-grow */ 
 flex: 2; 

 /* Одно значение, ширина/высота: flex-basis */ 
 flex: 20em; 
 flex: 300px;
 flex: content; 
 flex: auto; 

 /* Два значения: flex-grow | flex-basis */ 
 flex: 1 300px; 

 /* Два значения: flex-grow | flex-shrink */ 
 flex: 0 1; 

 /* Три значения: flex-grow | flex-shrink | flex-basis */ 
 flex: 1 2 33.3%; 

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

Выравнивание flex-элементов

Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).

Выравнивание flex-элементов по направлению главной оси

Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства :

justify-content: flex-start; 
/* flex-start (flex-элементы выравниваются относительно начала оси) – по умолчанию
   flex-end (flex-элементы выравниваются относительно конца оси)
   center (по центру flex-контейнера)
   space-between (равномерно, т.е. с одинаковым расстоянием между flex-элементами)
   space-around (равномерно, но с добавлением половины пространства перед первым flex-элементом и после последнего) */

Выравнивание flex-элементов вдоль поперечной оси

Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства :

align-items: stretch;
/* stretch (растягиваются по всей длине линии вдоль направления поперечной оси) – по умолчанию
   flex-start (распологаются относительно начала поперечной оси)
   flex-end (относительно конца поперечной оси)
   baseline (относительно базовой линии)
   center (по центру) */

Выравнивание линий flex-контейнера

CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.

align-content: stretch
/* stretch (растягиваются по всей длине поперечной оси) – по умолчанию
   flex-start (относительно начала поперечной оси)
   flex-end (относительно конца поперечной оси)
   center (по центру)
   space-between (равномерно, т.е. с одинаковым расстоянием между линиями)
   space-around (равномерно, но с добавлением половины  пространства перед первой линией и после последней) */

Свойство имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства значение или .

CSS-свойство align-self

Свойство в отличие от предыдущих (, и ) предназначено для flex-элементов. Оно позволяет изменить выравнивание flex-элемента вдоль направления поперечной оси. Свойство может принимать такие же значения как .

align-items: stretch; /* auto (по умолчанию) || stretch || flex-start || flex-end || baseline || center */

Пример:

<div class="flex-container">
  <div class="flex-container_element-1">
    1
  </div>
  <div class="flex-container_element-2">
    2
  </div>
  <div class="flex-container_element-3">
    3
  </div>
  <div class="flex-container_element-4">
    4
  </div>  
</div>

CSS:

.flex-container {
  display: flex;
  width: 300px;
  height: 150px;
  align-items: center;
  padding: 10px;
  background-color: #efefef;
}
.flex-container_element-1,
.flex-container_element-2,
.flex-container_element-3,
.flex-container_element-4 {
  flex-basis: 70px;
  text-align: center;
  padding: 15px;
  font-size: 30px;
} 
.flex-container_element-1 {
  align-self: flex-start;
  background: #fe4;
} 
.flex-container_element-2 {
  align-self: flex-end;
  background: pink;
} 
.flex-container_element-3 {
  align-self: stretch;
  background: lime;
}
.flex-container_element-4 {
  align-self: auto;
  background: cyan;
}  

Когда не стоит использовать флексы?

Мы рассмотрели некоторые причины, по которым думаю, cтоит выбирать флексы вместо раскладки на гридах, поэтому можем посмотреть на некоторые случаи, когда флекс — не лучший вариант. Мы уже посмотрели на пример с флексом против грида, где элементы выровнены по горизонтали и вертикали в отличие от элементов, которые занимают место построчно. И это различие стоит учитывать в первую очередь.

Вот пример грида с двумерной раскладкой. Раскладка одновременно и в строках, и в колонках. Пример на флексах — это одномерная раскладка. Мы позволили перенос флекс-строк, но распределение места на строке ведётся построчно. Каждая строка естественно ведёт себя как новый флекс-контейнер по направлению главной оси.

Следовательно, если компоненту нужна двумерная раскладка, лучше будет использовать гриды вместо флексов

Неважно, большой или маленький у вас компонент. Если запомните из этой статьи только одно, пусть это будет следующее: выкиньте из головы идею о том, что гриды предназначены только для основной раскладки страницы, а флексы — для компонентов

У вас может быть крошечный компонент, которому требуется двумерная раскладка, и структура главной страницы, которой лучше подойдёт одномерная раскладка.

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

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

See the Pen Smashing Flexbox Series 4: wrapped flex items with percentage widths by rachelandrew (@rachelandrew) on CodePen.

Принимая во внимание всё вышесказанное, помните, что часто нет чёткого правильного или неправильного ответа. Иногда единственное, что можно сделать — это попробовать разные варианты и посмотреть, что лучше всего подходит этому компоненту

Помните, что также можно переключаться между методами раскладки, используя флексы на одной контрольной точке и гриды на другой.

Пример 3: Как сделать макет сайта, используя Флексбокс

Строительство макетов полностью на Флексбокс не особо одобряется сообществом разработчиков. И, разделяя данное мнение, я все же считаю, что бывают ситуации, когда это допустимо. Самый главный совет, который я могу вам дать:Используйте флексбокс, когда это имеет смысл. Я объясню это на следующем примере.

Макет сайта “святой Грааль”

Самый наистандартнейший макет страницы на свете

Макет “святой Грааль” – хэдер, футер и 3 контейнера для контента

Есть два способа попытаться построить этот макет с помощью Flexbox. Начнем с первого. Для него нужно разместить во флекс-контейнере header, footer, nav, article и aside.

Разметка

Так выглядит наша разметка:

<body>
 
  <header>Header</header>
 
  <main>
 
    <article>Article</article>
 
    <nav>Nav</nav>
 
    <aside>Aside</aside>
 
  </main>
 
  <footer>Footer</footer>
 
</body>

Среди прочих, в стандартнейшей разметке есть особое правило: центральная колонка, article в разметке должна идти перед обоими сайдбарами nav и aside.

Article должен идти в разметке первым, но располагаться по центру макета

Подключаем флексбокс

body {
 
   display: flex
 
}

Поскольку дочерние элементы должны идти сверху вниз, изменим стандартное направление флексбокс

body {
 
 ...
 
 flex-direction: column
 
}
  1. header и footer должны быть фиксированной ширины
    header,
     
    footer {
     
      height: 20vh /*you can use pixels e.g. 200px*/
     
    }
  2. main должен занимать все свободное пространство в контейнере
    main {
     
       flex: 1
     
    }

Надеюсь, вы помните, что запись flex: 1 означает тоже самое что и flex-grow: 1, flex-shrink: 1 и flex-basis: 0

Это приведет к тому, что main вырастет и займет все доступное ему место

На этом этапе необходимо позаботиться о содержимом main – блоках article, nav и aside. Сделаем main флекс-контейнером

main {
 
  display: flex
 
}

А для nav и aside установим значение width

nav,
 
aside {
 
  width: 20vw
 
}

Убедимся, что article занимает все доступное ему пространство

article {
 
   flex: 1
 
}

Теперь article занимает все свободное место

Осталось сделать всего одну вещь. Поменяем значения flex-order, чтобы nav отображался первым

nav {
 
  order: -1
 
}

Готовый вариант

Свойство order используется, чтобы переопределить порядок flex-items. Все элементы flex-items внутри контейнера отображаются в порядке возрастания значения order. Элемент с наименьшим значением будет отображаться первым. По умолчанию значение order для всех flex-items равно 0.

Второе решение для макета

Предыдущее решение использует flex-container для всего контейнера. Макет очень сильно зависит от flexbox. Посмотрим на более разумный подход. Еще раз взглянем на результат, который должен у нас получиться.

Макет “святой Грааль”

header и footer могут быть блочными элементами. Без лишних вмешательств они и так заполнят все доступное им простанство контейнера и будут прижаты к верху и низу

<body>
 
  <header>Header</header>
 
  <main>
 
    <article>Article</article>
 
    <nav>Nav</nav>
 
    <aside>Aside</aside>
 
  </main>
 
  <footer>Footer</footer>
 
</body>

Что означает, что флекс-контейнер необходим только для main. Единственная сложность здесь заключается в том, что вам необходимо самим вычислить высоту блока main. Он должен занимать все свободное пространство между header и footer

main {
 
  height: calc(100vh - 40vh);
 
}

Рассмотрим этот код. Он использует CSS функцию calc для того, чтобы вычислить высоту main. Высота блока должна быть равна calc (100vh – высота хэдера – высота футера). В предыдущем случае вы должны были задать фиксированную высоту футеру и хэдеру. Теперь вы поступаете таким же образом только с main.Здесьлежит готовый результат.

Макет сайта в 2 колонки

Двухколоночный макет очень распространен. Их тоже очень легко строить на флексбокс.

Макет сайта в две колонки (сайдбар и основной контент)

Вот наша верстка:

<body>
 
  <aside>sidebar</aside>
 
  <main>main</main>
 
</body>

Инициализируем флексбокс

body {
 
  display: flex;
 
}

Задаем блоку aside фиксированную ширину

aside {
 
   width: 20vw
 
}

И, наконец, убедимся, что main занимает все доступное пространство

main {
 
  flex: 1
 
}

Вот, в общем-то, и все, что нужно сделать.

Горизонтальное выравнивание

CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси флекс контейнера (горизонтально).

Это свойство может использоваться в тех случаях, когда для флекс элементов явно указана ширина, и если ширина всех флекс элементов внутри контейнера не вызывает переполнение контейнера, иначе свойство justify-content не окажет на такой элемент никакого эффекта.

Схематичное отображение работы свойства justify-content отображено на следующем изображении:

Рис. 211 Схематичное отображение работы свойства justify-content

Перейдем к рассмотрению следующего примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства justify-content</title>
<style> 
.container,
.container2,
.container3,
.container4,
.container5 {   
	display: flex; /* блочные флекс контейнеры */
}
.container {       
	justify-content: flex-start; /* флекс элементы позиционируются в начале контейнера */
}
.container2 {       
	justify-content: flex-end; /* флекс элементы позиционируются в конце контейнера */
}
.container3 {       
	justify-content: center; /* флекс элементы позиционируются в центре контейнера */
}
.container4 {       
	justify-content: space-between; /* флекс элементы равномерно распределяются по всей строке (первый и последний прижаты по бокам) */
}
.container5 {       
	justify-content: space-around; /* флекс элементы равномерно распределяются по всей строке */
}
div > div {
	width: 50px; /* ширина элемента */
	height: 50px; /* высота элемента */
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 1px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<h3>justify-content: flex-start;</h3>
		<div class = "container"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h3>justify-content: flex-end;</h3>
		<div class = "container2"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h3>justify-content: center;</h3>
		<div class = "container3"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h3>justify-content: space-between;</h3>
		<div class = "container4"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h3>justify-content: space-around;</h3>
		<div class = "container5"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
	</body>
</html>

В этом примере мы разместили пять блочных флекс контейнеров, внутри них мы разместили по три элемента <div>, которым задали ширину и высоту равную 50 пикселей.

Первый контейнер имеет значение flex-start свойства justify-content, это значение определяет, что флекс элементы позиционируются в начале контейнера. Это значение по умолчанию и указано лишь для демонстрационной цели.

Второй контейнер имеет значение flex-end свойства justify-content, это значение определяет, что флекс элементы позиционируются в конце контейнера.

Третий контейнер имеет значение center свойства justify-content, это значение определяет, что флекс элементы позиционируются в центре контейнера.

Четвертый контейнер имеет значение space-between свойства justify-content, это значение определяет, что флекс элементы равномерно распределяются по всей строке, при этом первый флекс элемент позиционируются в начале контейнера, а последний флекс элемент позиционируется в конце контейнера.

Пятый контейнер имеет значение space-around свойства justify-content, это значение определяет, что флекс элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего флекс элемента равно половине между соседними элементами в контейнере.

Результат нашего примера:

Рис. 212 Пример использования свойства justify-content.

В настоящее время добавлена поддержка значения space-evenly свойства justify-content, которое позволяет разместить четный промежуток между каждым элементом, включая начальний и дальний конец контейнера:

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Я довольно глуп

Сколько бы раз я не читал следующий параграф, я остался неспособным его понять…

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

Как будто Минни Маус и Мэд Макс завели ребенка семь лет назад, и теперь он, будучи пьяным с мятного шнапса, оскорбляет всех в пределах слышимости словами, которые он узнал когда Мамочка и Папочка ругались.

Леди и Джентльмены, мы начали наш спуск в чепуху, что значит пришло время подвести итоги (или перестань читать, если ты здесь для изучения нового).

Самое интересное из того, что я узнал, читая спецификацию, это то, насколько неполным было мое понимание, несмотря на полдюжины блог-постов которые я прочитал, и на то, насколько относительно простым является flexbox. Оказывается, что «опыт» — это не просто занятие одним и тем же из года в год.

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

Я лучше отношусь к этому коду теперь, зная что я делаю это должным образом.

Еще я узнал, что несмотря на то, что спецификация — местами — перенасыщена и предназначена для вендоров как я и думал, все же содержит много дружественных слов и примеров. В ней даже выделены части которые скромные веб-разработчики могут пропустить.

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

Теперь, если позволите, мне надо идти и прочитать все остальные CSS спецификации.

P.S. Я крайне рекомендую прочитать следующий список всех flexbox багов по браузерам:github.com/philipwalton/flexbugs

Оригинальный пост здесь: hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b

Случаи использования

Аватар пользователя

Типичный вариант использования flexbox — пользовательский компонент. Аватар и текстовое содержимое должны находиться в одной строке.

<div class="user">
	<img class="user__avatar" src="shadeed.jpg" alt="" />
	<div>
		<h3>Ahmad Shadeed</h3>
		<p>Author of Debugging CSS</p>
	</div>
</div>
.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

Обратите внимание, что я добавил для аватара flex: 0 0 70px

Это важно, поскольку в некоторых старых браузерах изображение может выглядеть сжатым, если не установлен параметр flex. Кроме того, flex имеет более высокий приоритет, чем свойство width (в случае flex-direction: row) или height (в случае flex-direction: column)

Кроме того, flex имеет более высокий приоритет, чем свойство width (в случае flex-direction: row) или height (в случае flex-direction: column).

Если мы изменим размер аватара, настроив только свойство flex, width будет проигнорирована браузером.

.user__avatar {
    /* width будет 100px, а не 70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}

Заголовок раздела

У вас есть title для заголовка раздела, и он должен занимать все доступное пространство. В этом случае идеально подходит flex: 1.

.page-header {
    display: flex;
    flex-wrap: wrap;	
}

.page-header__title {
    flex: 1;
}

Элемент Input для отправки сообщений

Это очень распространено в приложениях для обмена сообщениями, таких как Facebook Messenger или Twitter. Входные данные должны заполнять доступное пространство с фиксированной шириной для кнопки отправки.

form {
    display: flex;
    flex-wrap: wrap;	
}

input {
    flex: 1;
    /* Другие стили */
}

Приведенные выше примеры являются полезными примерами использования flex-grow. Однако некоторые случаи игнорируются или вообще не упоминаются в некоторых статьях по flex. Давайте рассмотрим их!

Выравнивание элементов на двух картах

Предположим, что CSS-сетка имеет макет из двух столбцов. Проблема в том, что положение дат не совпадают. Они должны быть на одной линии (красной).

Мы можем сделать это с помощью flexbox.

<div class="card">
	<img src="thumb.jpg" alt="">
	<h3 class="card__title">Title short</h3>
	<time class="card__date"></time>
</div>

Устанавливая flex-direction: column мы можем использовать flex-grow для заголовка, чтобы он заполнял доступное пространство и, таким образом, размещал дату в конце, даже если заголовок короткий.

.card {
    display: flex;
    flex-direction: column;
}

/* Первое решение */
.card__title {
    flex-grow: 1;
}

Кроме того, это возможно без использования flex-grow. Благодаря auto margins и flexbox! Я написал подробную статью об auto в CSS, если вы хотите вникнуть в подробности.

/* Второе решение */
.card__date {
    margin-top: auto;
}

Свойство align-content

Свойство используется для выравнивания flex линий.

В этих примерах мы используем контейнер высотой 600 пикселей со свойством flex-wrap, установленным на wrap, чтобы лучше продемонстрировать свойство .

Пример

Значение space-between отображает flex линии с равным интервалом между ними:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: space-between;
}

Пример

Значение space-around отображает flex линии с пробелом до, между и после них:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: space-around;
}

Пример

Значение stretch растягивает flex линии, чтобы занять оставшееся пространство (это по умолчанию):

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: stretch;
}

Пример

Отображение значения center отображает flex линии в середине контейнера:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: center;
}

Пример

Значение flex-start отображает flex линии в начале контейнера:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: flex-start;
}

Пример

Значение flex-end отображает flex линии в конце контейнера:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: flex-end;
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector