CSS: Выравнивание элементов внутри контейнера
Одна из главных фишек флекс — возможность выравнивание контента по любой из осей. Будь то главная или побочная ось, вы всегда можете воспользоваться несколькими свойствами, чтобы автоматически разместить элементы на странице.
В этом уроке мы изучим свойства justify-content и align-items , которые позволяют расположить элементы по главной и побочной оси соответственно.
Для разбора работы свойств используем следующий пример:
Серым цветом обозначен Flex-контейнер. Именно к нему и будут применяться все свойства из этого урока
Выравнивание по главной оси
Для выравнивания по главной оси используется свойство justify-content . Оно указывается у контейнера (блок со свойством display: flex ) и может иметь множество значений. Разберём самые распространённые значения:
- flex-start — выравнивание по началу оси. Хоть это и не значение по умолчанию, но оно выглядит именно так, как на примере выше
- flex-end — выравнивание по концу оси
- center — выравнивание контента по центру контейнера
- space-between — первый и последний элемент прижимаются к началу и концу оси, а остальные элементы распределяются по остальному пространству
- space-around — принцип такой же, как и у значения space-between , но первый и последний элемент так же получают отступы, которые равны половине отступов у остальных элементов
Выравнивание по побочной оси
Помимо выравнивания элементов по главной оси, флекс позволяет одновременно выравнять элементы по побочной оси. Именно для понимания этого эффекта примеры в этом уроке имеют большую высоту контейнера чем необходимо.
Чтобы выровнять элементы по побочной оси используется свойство align-items . В нём также много значений, но рассмотрим работу самых популярных:
- flex-start — выравнивание по началу побочной оси
- flex-end — выравнивание по концу побочной оси
- center — выравнивание по центру
Как видите, значений тут сильно меньше, чем при выравнивании по главной оси. Помните про две оси — если воспользоваться свойством flex-direction: column , то визуально выравнивание изменится. В этом случае для выравнивания по вертикали будет использоваться свойство justify-content :
flex-direction: column и justify-content: space-between
Задание
Заказчик захотел, чтобы в блоке «Вопрос-ответ» появилась стрелка, которая визуально свяжет вопрос и ответ. Доработайте функционал блока
.qa < font: 18px/1.5 sans-serif; >.question < width: 400px; padding: 20px; color: #fff; background: #8ea7e9; >.answer < width: 400px; padding: 20px; >.arrow
Стрелка визуально находится по середине относительно блоков с вопросом и ответом. Используя Flex доработайте блок и, используя выравнивание, разместите блоки по центру
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
выровнять блоки по высоте flex
Как выровнять 1,3 и 2,4 блоки по высоте, при том что они лежат в разных контейнерах и текста в них может быть разное количество?
.wrap < display: flex; background-color: #000; padding: 5px; >.row < width: 50%; display: flex; flex-direction: column; >.col < height: 100%; padding: 10px; border: 1px solid #000; background-color: #fff; >.col span
1)Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? 2)Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? 3)Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore 4)Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas?
Отслеживать
задан 2 апр 2019 в 5:57
1,332 5 5 золотых знаков 25 25 серебряных знаков 46 46 бронзовых знаков
а разные row — это обязательное условие? почему нельзя использовать один?
2 апр 2019 в 12:20
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Похоже что никак. Возьми блоки в один .row задай следующий стиль и сортируй блоки с помощью свойства order . Возможно ошибаюсь и есть вариант на CSS (без JS), если есть извините!
* < box-sizing: border-box; >.row < width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; >.col < width: 50%; padding: 10px; border: 1px solid #000; background-color: #fff; >.col span < font-weight: 700; color: red; >.order-1 < order: 1; >.order-2 < order: 2; >.order-3 < order: 3; >.order-4
1)Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? 2)Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? 3)Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore 4)Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas?
Все способы вертикального выравнивания в CSS
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.
Сравним следующие подходы. Выравнивание с помощью:
- таблицы,
- отступов,
- line-height ,
- растягивания,
- отрицательного margin ,
- transform ,
- псевдоэлемента,
- flexbox .
Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.
Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .
Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .
Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.
.outer < width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; >.inner
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/
Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки ( inline-block ) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
Выравнивание с помощью таблицы
Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
.outer-wrapper < display: table; >.outer
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.
Выравнивание с помощью отступов
Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (Houter – Hinner) / 2.
.outer < height: 200px; >.inner
Минус решения — оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.
Выравнивание с помощью line-height
Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .
.outer < height: 200px; line-height: 200px; >.inner
Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .
.outer < height: 200px; line-height: 200px; >.inner
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Выравнивание с помощью «растягивания»
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Для этого нужно:
- задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
- добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
- установить значение auto для вертикальных отступов внутреннего блока.
.outer < position: relative; >.inner
Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью отрицательного margin-top
Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top : -Hinner / 2.
.outer < position: relative; >.inner
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью transform
Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .
.outer < position: relative; >.inner
Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .
Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.
Выравнивание с помощью псевдоэлемента
Это наиболее универсальный способ, который может применяться, когда неизвестны высоты обоих блоков.
Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.
Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after .
.outer:before < display: inline-block; height: 100%; vertical-align: middle; content: ""; >.inner
Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.
Выравнивание с помощью Flexbox
Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.
Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?
.outer < display: flex; width: 200px; height: 200px; >.inner
Минус данного способа − Flexbox поддерживается только современными браузерами.
Какой способ выбрать?
Нужно исходить из постановки задачи:
- Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
- Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
- Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
- Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .
Как центрировать контент по вертикали и по горизонтали с помощью Flexbox
Разработчики могут уверять вас, что центрирование контента одно из самых сложных вещей в CSS макетах. CSS Flexbox позволяет еще лучше контролировать выравнивание HTML элементов.
Сейчас мы пошагово покажем, как легко центрировать контент по вертикали и горизонтали.
Давайте поработаем с помощью этого примера:
Пример
html> html> head> title>Заголовок документа title> style> #big-box< width: 200px; height: 200px; background-color: #666666; > #small-box< width: 100px; height: 100px; background-color: #8ebf42; > style> head> body> h2>Центрирование контента h2> div id="big-box"> div id="small-box"> div> div> body> html>
Здесь имеет два div элемента. Наша задача — центрировать «small-box» id внутри «bix-box» id.
- Сначала мы используем свойство width, чтобы установить width для двух блоков. Установите необходимый размер.
- Потом установите высоту блоков, используя свойство height.
- Установите выбранные вами цвета для div элементов, используя свойство background-color.
#big-box< width: 200px; height: 200px; background-color: #666666; > #small-box< width: 100px; height: 100px; background-color: #8ebf42; >
- Следующим шагом укажите макет с помощью свойства display. Чтобы использовать Flexbox, установите display: flex. (display: -Webkit-flex;)
#big-box< width: 200px; height: 200px; background-color: #666666; display: flex; display: -webkit-flex; >
Значение flex должно использоваться вместе с расширением -webkit- для Safari, Google Chrome и Opera.
Ничто не изменится, если попробуйте этот код. Выполните следующие шаги!
- Добавьте свойство align-items. Это свойство указывает вертикальное выравнивание контента внутри флекс-контейнера. Необходимо установить свойство align-items в значение «center», чтобы по вертикали центрировать контент.
#big-box< width: 200px; height: 200px; background-color: #666666; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; >
Сейчас примените код и увидите, что «small-box» центрирован относительно вертикальной оси.
После того, как div элемент вертикально центрирован, можно центрировать его и по горизонтали.
- Необходимо применить свойство justify-content, которое выравнивает контент по горизонтали. Устанавливаем свойство justify-content в значение «center»:
#big-box< width: 200px; height: 200px; background-color: #666666; display: flex; align-items: center; justify-content: center; -webkit-align-items: center; >
Мы достигли нашей цели!
Пример
html> html> head> title>Заголовок документа title> style> #big-box< width: 200px; height: 200px; background-color: #666666; display: flex; align-items: center; justify-content: center; -webkit-align-items: center; > #small-box< width: 100px; height: 100px; background-color: #8ebf42; > style> head> body> h2>Центрирование контента h2> div id="big-box"> div id="small-box"> div> div> body> html>
-Webkit- для Safari, Google Chrome и Opera (новые версии) используется вместе со свойством align-items.
Рассмотрим другой пример:
Пример
html> html> head> title>Заголовок документа title> style> .flexbox-container < background: #cccccc; display: flex; align-items: center; -webkit-align-items: center; justify-content: center; height: auto; margin: 0; min-height: 500px; > .flexbox-item < max-height: 50%; background: #666666; font-size: 15px; > .fixed < flex: none; max-width: 50%; > .box < width: 100%; padding: 1em; background: #1c87c9; > style> head> body> h2>Центрирование контента h2> div class="flexbox-container"> div class="flexbox-item fixed"> div class="box"> h2>Центрирован с помощью Flexbox h2> p contenteditable="true">Этот блок центрирован и по вертикали и по горизонтали. p> div> div> div> body> html>
Блок остается центрированным, даже если текст меняется.