Flex vertical align


В этой статье познакомимся с технологией CSS Flexbox, предназначенной для создания гибких макетов веб-страниц.

CSS - Flexbox верстка

Поддержка браузерами технологии CSS Flexbox

Технология Flexbox поддерживается уже почти всеми используемые на сегодняшний момент браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Основы Flexbox (сетка)

В основу Flexbox положена сетка. Она состоит всего из 2 элементов. Первый элемент – это flex-контейнер. Создание flex-контейнера осуществляется посредством добавления к необходимому HTML элементу CSS-свойства display со значением flex


или flex-inline.

После этого все непосредственные дочерние элементы flex-контейнера (дети) автоматически становятся flex-элементами (2 элемент flexbox сетки).

HTML разметка:

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

CSS-стили:

  .flex-container {   display: flex; /* flex || inline-flex */  }  
Структура flexbox сетки
Структура flexbox сетки

Flex-элементы по умолчанию занимают всю высоту flex-контейнера.

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

Направление выстраивания flex-элементов


Указание направления выстраивания flex-элементов внутри flex-контейнера осуществляется посредством осей.

CSS Flexbox — Направление осей по умолчанию
CSS Flexbox - Направление осей по умолчанию

Во flexbox выделяют 2 оси. Первая ось называется основной или главной (по умолчанию направлена вправо). Вторая — поперечная (по умолчанию направлена вниз).

Элементы во flex-контейнере располагаются в одну линию (по умолчанию) даже тогда, когда им не хватает места. Выстраиваются flex-элементы в flex-контейнере по направлению основной оси.

Расположение элементов в контейнере по умолчанию (flex-элементы, которым не хватает места во flex-контейнере, вылезают за его пределы)
CSS Flexbox - Расположение элементов в контейнере по умолчанию

В CSS Flexbox разрешить перенос flex-элементов на новые линии (если им не хватает места в текущей линии) осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap


со значением wrap или wrap-reverse.

  flex-wrap: wrap;   /*    nowrap (в одну линию - по умолчанию)    wrap (разрешить перенос flex-элементов на новые линии)    wrap-reverse (осуществлять перенос flex-элементов в обратном порядке)   */  

Значения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси.

Установка направления главной оси flexbox осуществляется с помощью CSS-свойства flex-direction.

  flex-direction: row;   /*    row (вправо) - по умолчанию   row-reverse (налево)   column (вниз)   column-reverse (вверх)  */  

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

CSS Flexbox — Расположение элементов при установке свойству flex-direction значения column, а flex-wrap — wrap
CSS Flexbox - Расположение элементов при установке свойству flex-direction значения column, а flex-wrap - wrap

Свойства flex-direction


и flex-wrap можно указать с помощью универсального CSS свойства flex-flow:

  flex-flow: row nowrap; /* 1 значение - flex-direction, 2 значение - flex-wrap */  

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

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

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

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

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

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

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


align-items:

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

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

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

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

одинаковым расстоянием между линиями) space-around (равномерно, но с добавлением половины пространства перед первой линией и после последней) */
Варианты выравнивания линий flex-контейнера
CSS Flexbox - Варианты выравнивания линий flex-контейнера<

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

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

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


может принимать такие же значения как align-items.

  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;  }   
Как работает CSS свойство align-self
Как работает CSS свойство align-self

Изменение порядка следования flex-элементов


По умолчанию flex-элементы отображаются во flex-контейнере в том порядке, в котором они расположены в HTML коде. Для изменения порядка следования одних flex-элементов относительно других в CSS Flexbox можно использовать свойство order. Данное CSS свойство выстраивает flex-элементы во flex-контейнере в порядке возрастания их номеров.

  order: 0;   /*    0 (по умолчанию)   целое положительное или отрицательное число  */  

Например:

  <div class="flex-container">   <div class="flex-container_element-1">...</div>   <div class="flex-container_element-2">...</div>   <div class="flex-container_element-3">...</div>   <div class="flex-container_element-4">...</div>  </div>  CSS:  .flex-container {   display: flex;  }  /* переместим 2 flex-элемент в конец */  .flex-container_element-2 {   order: 2;  }   /* передвинем 3 элемент до 2 */  .flex-container_element-3 {   order: 1;  }  /* расположим 4 flex-элемент до 1 */  .flex-container_element-4 {   order: -1;  }  
Как работает CSS свойство order

Flexbox - Как работает CSS свойство order

Управление шириной flex-элемента

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

CSS-свойство flex-basis

Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение auto (в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).

Конечная ширина flex-элемента будет определяться в зависимости от значений CSS-свойств flex-grow и flex-shrink, которые установлены не только для этого элемента, но и для других flex-элементов этого flex-контейнера.

CSS-свойство flex-grow

Это свойство определяет, может ли начальная ширина flex-элемента увеличиваться (расти). Увеличение ширины flex-элемента осуществляется за счёт свободного пространства линии. В качестве значения CSS-свойства flex-grow


указывается целое число. Именно это значение и определяет (если оно больше или равно 1) какую часть свободного пространства flex-элемент заберёт себе.

Например:

  <div class="flex-container">   <div class="flex-container_element-1">...</div>   <div class="flex-container_element-2">...</div>   </div>  CSS:  .flex-container {   display: flex;   width: 600px;  }  .flex-container_element-1 {   flex-basis: 40%;   flex-grow: 1;  }   .flex-container_element-2 {   flex-basis: 40%;   flex-grow: 4;  }  
Как работает CSS свойство flex-grow
Как работает CSS свойство flex-grow

В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):

  • к ширине элемента .flex-container_element-1 добавится 1/5 часть этого пространства (120×1/5=24px);
  • к ширине элемента .flex-container_element-2 добавится 4/5 части этого пространства (120×4/5=96px).

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

По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).

CSS-свойство flex-shrink

Данное свойство определяет, может ли ширина flex-элемента уменьшиться. Уменьшение ширины flex-элемента будет осуществляться только в том случае, если ширины линии будет не достаточно для отображения всех flex-элементов, расположенных в ней. Необходимая ширина рассчитывается на основании начальной ширины, который имеет каждый flex-элемент в ней.

Например:

  <div class="flex-container">   <div class="flex-container_element-1">...</div>   <div class="flex-container_element-2">...</div>   </div>  CSS:  .flex-container {   display: flex;   width: 500px;  }  .flex-container_element-1 {   flex-basis: 300px;   flex-shrink: 1;  }   .flex-container_element-2 {   flex-basis: 300px;   flex-shrink: 3;  }  
Как работает CSS свойство flex-shrink
Как работает CSS свойство flex-shrink

Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента (.flex-container_element-1 и .flex-container_element-2). Ширина первого flex-элемента .flex-container_element-1 в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента .flex-container_element-2 в данном случае составит 300 – 3/4*100= 225px.

Значение по умолчанию:

  flex-shrink: 1;  

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

CSS-свойство flex

Для удобной установки flex-grow, flex-shrink и flex-basis можно использовать CSS свойство flex.

Значение по умолчанию:

  flex: 0 1 auto;  /*   0 - flex-grow (1 значение)   1 - flex-shrink (2 значение)   auto - flex-basis (3 значение)  */  

Верстка макета страницы на CSS Flexbox

В этом разделе создадим простой адаптивный макет на Flexbox.

Структура макета будет состоять из 3 секций:

  • header (для вывода заголовка и основного меню);
  • main (для отображения основной части);
  • footer (для футера).

Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально (<992px).

  <header class="container">   [Шапка страницы...]  </header>  <main class="container">   <div class="row-flex">   <article class="main_article col-flex">   [Основная часть...]   </article>   <aside class="main_aside col-flex">   [Дополнительная часть...]   </aside>   </div>  </main>  <footer class="container">   [Футер...]  </footer>  

CSS:

  /* контейнер (устанавливает ширину блока в зависимости от ширины viewport) */  .container {   position: relative;   margin-left: auto;   margin-right: auto;   padding-right: 15px;   padding-left: 15px;  }  @media (min-width: 576px) {   .container {   width: 540px;   max-width: 100%;   }  }  @media (min-width: 768px) {   .container {   width: 720px;   max-width: 100%;   }  }  @media (min-width: 992px) {   .container {   width: 960px;   max-width: 100%;   }  }  @media (min-width: 1200px) {   .container {   width: 1140px;   max-width: 100%;   }  }  /* flex-контейнер */  .row-flex {   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   -webkit-flex-wrap: wrap;   -ms-flex-wrap: wrap;   flex-wrap: wrap;   margin-right: -15px;   margin-left: -15px;  }  /* CSS настройки flex-элементов */  .col-flex {   position: relative;   width: 100%;   min-height: 1px;   padding-right: 15px;   padding-left: 15px;  }  /* ширина блоков article и aside по умолчанию */  .main_article, .main_aside {   -webkit-box-flex: 0;   -webkit-flex: 0 0 100%;   -ms-flex: 0 0 100%;   flex: 0 0 100%;   max-width: 100%;  }  /* ширина блоков article и aside для больших экранов */  @media (min-width: 992px) {   /* 2/3 от ширины контейнера */   .main_article {   -webkit-box-flex: 0;   -webkit-flex: 0 0 66.666667%;   -ms-flex: 0 0 66.666667%;   flex: 0 0 66.666667%;   max-width: 66.666667%;   }   /* 1/3 от ширины контейнера */   .main_aside {   -webkit-box-flex: 0;   -webkit-flex: 0 0 33.333333%;   -ms-flex: 0 0 33.333333%;   flex: 0 0 33.333333%;   max-width: 33.333333%;   }  }  

Для поддержки макета большинством браузеров добавим в CSS необходимые префиксы и max-width.

Для «превращения» блока во flex-контейнер будем использовать класс row-flex. Установку ширины каждому flex-элементу (main_article и main_aside) внутри flex-контейнера будем осуществлять с помощью CSS-свойства flex.

Макет веб-страницы на Flexbox
Макет веб-страницы на Flexbox

В качестве примера разметим посредством Flexbox ещё блок «Футер» и секцию раздела main-article «Интересненькое на сайте».

Секцию «Футер» разделим на 4 равные части (минимальная ширина одной части — 200px), а «Интересненькое на сайте» на 3 части (минимальная ширина одной части — 300px).

  <header class="container">   [Шапка страницы...]  </header>  <main class="container">   <div class="row-flex">   <article class="main_article col-flex">   [Основная часть...]   <!-- Секция "Интересненькое на сайте -->   <div class="row-flex">   <div class="main_other_article col-flex" style="min-width:300px">   [Ещё 1...]   </div>   <div class="main_other_article col-flex" style="min-width:300px">   [Ещё 2...]   </div>   <div class="main_other_article col-flex" style="min-width:300px">   [Ещё 3...]   </div>   </div>   </article>   <aside class="main_aside col-flex">   [Дополнительная часть...]   </aside>   </div>  </main>  <footer class="container">   <div class="row-flex">   <div class="footer_block col-flex" style="min-width:200px">   [Секция футера 1...]   </div>   <div class="footer_block col-flex" style="min-width:200px">   [Секция футера 2...]   </div>   <div class="footer_block col-flex" style="min-width:200px">   [Секция футера 3...]   </div>   <div class="footer_block col-flex" style="min-width:200px">   [Секция футера 4...]   </div>   </div>  </footer>  

Дополнительный CSS:

  .footer_block, .main_other_article {   -webkit-flex-basis: 0;   -ms-flex-preferred-size: 0;   flex-basis: 0;   -webkit-box-flex: 1;   -webkit-flex-grow: 1;   -ms-flex-positive: 1;   flex-grow: 1;   max-width: 100%;  }  

Демо макета страницы на Flexbox

itchief.ru

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding«.

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа. 

.example-wrapper1{  background: #535E73;  width: 200px;  height: 200px;  padding: 20px 50px;  }  

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute«, тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top«,»right«,»bottom«,»left«) внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль). 

.example-wrapper2{  position: relative;  height: 250px;  background: url(space.jpg);  }    .cat-king{  width: 200px;  height: 200px;   position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  margin: auto;  background: url(king.png);  }  

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

Выравнивание посредством «text-align: center»

Для выравнивания текста в блоке есть специальное свойство «text-align«. При установленном значении «center» каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

.example-text{  text-align: center;  padding: 10px;  background: #FF90B8;  }  

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

.example-wrapper3{  text-align: center;  background: #FF90B8;  }    .inline-text{  display: inline-block;  width: 40%;  padding: 10px;  text-align: left;  background: #FFE5E5;  }

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper{  height: 200px;  background: #F1BF88;  }    .lama1{  height: 200px;  width: 200px;  background: url(lama.jpg);  margin: 0 auto;  }    

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

Вертикальное выравнивание

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

Выравнивание свойством line-height

В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство «line-height» и установив ему желаемую высоту. Для надежности стоит установить еще и «height», значение которого будет равно значению «line-height», потому что последние поддерживается не во всех браузерах.

.example-wrapper4{  line-height: 100px;  color: #DC09C0;  background: #E5DAE1;  height: 100px;  text-align: center;  }  

Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно «inline». К нему нужно применить «vertical-align: middle».

.example-wrapper5 {  line-height: 160px;  height: 160px;  font-size: 0;  background: #FF9B00;  }    .example-wrapper5 .text1{  display: inline-block;  font-size: 14px;  line-height: 1.5;  vertical-align: middle;  background: #FFFAF2;  color: #FF9B00;  text-align: center;  }  

У блока обертки должно быть установлено «font-size: 0». Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

Выравнивание по вертикали в таблицах

Свойство «vertical-align» также действует на ячейки таблицы. C установленным значением «middle», контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав «display: table-cell«.

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

.one_product .img_wrapper {  display: table-cell;  height: 169px;  vertical-align: middle;  overflow: hidden;  background: #fff;  width: 255px;  }    .one_product img {  max-height: 169px;  max-width: 100%;  min-width: 140px;  display: block;  margin: 0 auto;  }  

Следует помнить, что если у элемента установлено «float» отличное от «none», то он в любом случае будет блочным (display: block) — тогда придется использовать дополнительный блок-обертку.

Выравнивание дополнительным inline-элементом

И для inline-элементов можно применить «vertical-align: middle«. При этом все элементы с «display: inline«, которые находятся в одной строке, выровняются относительно общей центральной линии.

Нужно создать вспомогательный блок с высотой, равной высоте родительского блока, тогда и желаемый блок выровняется по центру. Для этого удобно использовать псевдоэлементы :before или :after.

.example-wrapper6{  height: 300px;  text-align: center;  background: #70DAF1;  }      .pudge {  display: inline-block;  vertical-align: middle;  background: url(pudge.png);  background-color: #fff;  width: 200px;  height: 200px;  }      .riki {   display: inline-block;  height: 100%;  vertical-align: middle;  }  

Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять «display: flex». Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать «margin: auto» для центрирования контента внутри.

Пока что такой способ практически не встречался мне, но особых ограничений для него нет. 

.example-wrapper7{  display: flex;   height: 300px;   background: #AEB96A;  }    .example-wrapper7 img{  margin: auto;  }  

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

lamastravels.in.ua

Getting Started

Let’s work with a small example to help make all of this text make more sense. Go ahead and create a new HTML document and copy and paste the following content into it:

<!DOCTYPE html> <html>  <head> <title>Centering Content</title> <style> body { 	background-color: #F3F3F3; } #outer { 	width: 200px; 	height: 200px; 	background-color: #333333; } h1 { 	font-family: "Franklin Gothic Medium", sans-serif; 	font-size: xx-large; 	color: #3399FF; } #blueDiv { 	width: 100px; 	height: 100px; 	background-color: #3399FF; } </style> </head>  <body>  <h1>Centering Content</h1> <div id="outer"> 	<div id="blueDiv"> 	</div> </div>  </body>  </html>

If you preview your page, you will see something that looks as follows:

centering content now«> 

To dive a bit deeper into this example, the two squares you see are actually two div elements:

<div id="outer"> 	<div id="blueDiv"> 	</div> </div>

The outer div aptly has the id outer, and the inner div has an id of blueDiv. Our goal is to center the blueDiv inside the outer div. We’ll do that next.

Centering using Flexbox

You specify the layout for a particular element by setting the display CSS property. To use Flexbox, set the display value on the container to be flex. In our example, find the CSS rule with the #outer selector, and add just the following highlighted line:

#outer { 	width: 200px; 	height: 200px; 	background-color: #333333; 	display: flex; }

What you’ve just done is set your outer div as a flex container, and this simple step forces its immediate children (aka the blueDiv) to arrange themselves using flexbox logic. If you preview your page now, what you will see is no different than what you had when you first started. We’ll fix that up in a few moments!

Now that you have specified flexbox as the layout logic, the last thing that remains is to specify that the immediate children of the outer div be centered. The two flexbox properties that specify horizontal and vertical centering are align-items and justify-content.

Centering Vertically with align-items

The align-items property specifies the vertical alignment of contents inside your flex container. The values you can specify are baseline, center, flex-start, flex-end, and stretch. The center value is what allows us to vertically center our content, so let’s go ahead and specify that.

Add the following highlighted line:

#outer {  width: 200px;  height: 200px;  background-color: #333333;  display: flex;  align-items: center; }

Once you have added that line, you will see your blueDiv now centered on the vertical axis:

your content is now centered vertically«>

We are almost done. All that remains is to get the square centered horizontally as well, and we’ll look at that one next.

Centering Horizontally with justify-content

The last flexbox property we will look at is the justify-content property, and this property allows you to align your content horizontally. The values you can specify here are center, flex-start, flex-end, space-between, and space-around. Just like before, the value we want to specify is center.

Go ahead and add the highlighted line that center aligns your content horizontally:

#outer {  width: 200px;  height: 200px;  background-color: #333333;  display: flex;  align-items: center;  justify-content: center; }

Once you have done this, go ahead and preview your document in the browser one last time:

everything is properly centered«>

With that last line, your blueDiv (aka the immediate child of outer) is now centered horizontally as well. Wohooo!

Conclusion

Flexbox marks a major improvement over how you had to lay content out in the past. Doing something like centering something vertically and horizontally would have been a pain to do using traditional layout techniques. With Flexbox, you just added two lines to the container of the content you wished to center. That is pretty sweet!

The other good thing is that browser support is extremely good these days. You can safely use Flexbox without worrying about leaving people behind, but the support isn’t universal. For those rare users, there is a JavaScript library called Flexie that brings flexbox support to many new and old browsers. If you care about the small number of older browsers, use Flexie and sleep well at night.

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you’ll ever run into will be happy to help you out!

Flex vertical align» />

www.kirupa.com

Вместо align-self: center используйте align-items: center.

Нет необходимости менять flex-direction или использовать text-align (как предложено в другом ответе).

Здесь ваш код с одной настройкой, чтобы все это работало:

ul {  height: 100%; }  li {  display: flex;  justify-content: center;  /* align-self: center; <---- REMOVE */  align-items: center; /* <---- NEW */  background: silver;  width: 100%;  height: 20%;  } 

Свойство align-self применяется к элементам flex. Если ваш li не является гибким элементом, потому что его родительский – ul – не применяется display: flex или display: inline-flex.

Следовательно, ul не является гибким контейнером, li не является гибким элементом, а align-self не имеет эффекта.

align-items свойство похоже на align-self, за исключением того, что оно применимо к контейнерам flex.

Так как li является гибким контейнером, align-items может использоваться для вертикального центрирования дочерних элементов.

демо-версия codepen


Технически, здесь, как align-items и align-self работают…

Свойство align-items (на контейнере) устанавливает значение по умолчанию align-self (по элементам). Поэтому align-items: center означает, что все элементы flex будут установлены на align-self: center.

Но вы можете переопределить это значение по умолчанию, настроив align-self на отдельные элементы.

Например, вам могут понадобиться столбцы с одинаковой высотой, поэтому для контейнера установлено значение align-items: stretch. Однако один элемент должен быть прикреплен к вершине, поэтому он установлен на align-self: flex-start.

пример


Как текст является гибким элементом?

Некоторым людям может быть интересно, как запустить текст…

<li>This is the text</li> 

является дочерним элементом li.

Причина в том, что текст, который явно не обернут элементом встроенного уровня, алгоритмически завернут встроенным ящиком. Это делает его анонимным встроенным элементом и дочерним элементом родителя.

Из спецификации CSS:

9.2.2.1 Анонимный inline ящики

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

Спецификация flexbox обеспечивает аналогичное поведение.

4. Элементы Flex

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

Следовательно, текст в li является гибким элементом.

qaru.site

Flexbox CSS #1 — Практика выравнивания элементов

В текущем видео уроке разберем три основных свойства Flexbox CSS — display | justify-content | align-items. При помощи их можно выравнивать flex-элементы по горизонтали и вертикали. 

Описание свойств Flexbox CSS — display | justify-content | align-items

Нам понадобится заготовка, можете ее скачать или набрать код самостоятельно.

See the Pen #1 Практика по Flexbox (выравнивание элементов) by Denis (@Dwstroy) on CodePen.

Пробежимся по ее структуре заготовки. В index файле подключаю иконки через cdn, ниже подключаю файл стилей, а в теле body создан блок с классом dws-wrapper который служит оберткой всего контента. Файл стилей пустой, в папке img картинка на задний фон и изображение для примера.

<!DOCTYPE html>  <html lang="ru">  <head>   <meta charset="UTF-8">   <title>#1 Практика по Flexbox (выравнивание элементов)</title>   <meta name="viewport" content="width=device-width, initial-scale=1">   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">   <link rel="stylesheet" href="style.css" type="text/css">  </head>  <body>  <div class="dws-wrapper">     </div>  </body>  </html>  

Базовая разметка HTML

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

<div class="img-wrapper"><img src="img/1.jpg"></div>  

Для иконок сделаем UL, в нем четыре списка и в каждом расположим по ссылке.

ul>(li>a)*4  

Дописываем решетку в тег href, и подберем ряд иконок под нашу тематику.

  • fa-cog
  • fa-envelope-open
  • fa-heart
  • fa-share-alt

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

<ul>   <li><a href="#"><i class="fa fa-cog"></i></a></li>   <li><a href="#"><i class="fa fa-envelope-open"></i></a></li>   <li><a href="#"><i class="fa fa-heart"></i></a></li>   <li><a href="#"><i class="fa fa-share-alt"></i></a></li>  </ul>  <h4>CSS image hover effect</h4>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet.</p>  

разметка html

На этом разметка HTML завершена, переходим к описанию стилей.

Описываем CSS стили

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

body {   margin: 0;   padding: 0;   font-family: Verdana, sans-serif;  }    .dws-wrapper {   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);  }  

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

Давайте покажу, как это выглядит, к тому же закрепим пройденный материал. 

Сейчас dws-wrapper является контейнером, притом обратите, какое пространство он занимает по высоте.

.dws-wrapper {   background: #ccc;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);  }  

Теперь сделаем его flex-контейнером, применяем правило display: flex и в итоге, что мы видим, что наш единственный flex-элемент img-box прижался в верхний угол, и это хорошо видно, если зададим для него обводку.

.dws-wrapper {   background: #ccc;   display: flex;  }  
.img-box {   outline: 1px solid orange;  }  

В тоже время flex-контейнер dws-wrapper занял всю ширину окна браузера.

Далее применяем свойство justify-content со значением center и flex-элемент выровнялся по центру.

Затем при помощи свойства align-items пытаемся выровнять его по вертикали, но безрезультатно. Потому что, высота flex-контейнера, это все-то пространство, которое занимает его элемент и для того что бы его выровнять по вертикали, нужно соответственно задать высоту окна браузера height: 900px.

.dws-wrapper {   background: #ccc;   height: 900px;   display: flex;   justify-content: center;   align-items: center;  }  

Вот таким образом мы добились выравнивания flex-элемента в нашем случае.

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

В данном примере оставлю второй вариант, так как все же урок по flexbox, только уберу задний фон /*background: #ccc;*/, который задавал для примера. Взамен ему сделаем фон body.

background: url("img/ignasi_pattern_s.png");  

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

Переходим к оформлению блока img-box и наша задача иконки расположить с правой стороны картинки. Тут нам поможет flexbox. В начале урока я говорил, что блок с классом img-box будет flex-контейнером, и полагаю, многие из вас зададут вопрос, что у нас может быть два flex-контейнера? Да почему бы нет! Хоть десять их наштопайте, это допустимо документацией и мы можем делать их многоуровневые вложенности.

Задаем для блока с классом img-box правило display: flex. Далее что бы выровнять элементы по вертикали пропишем свойство align-items и уберем обводку.

.img-box {   display: flex;   align-items: center;  }  

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

.img-box ul,  .img-box h4,  .img-box p {   display: none;  }  

Приступим к оформлению первого элемента, это блок с картинкой. Отбираем его .img-wrapper img и задаем ширину в 300 пик., добавляем серую обводку.

Так как этот элемент будет, перемещается по наведению, добавим плавность при помощи transition.

.img-wrapper img {   height: 300px;   border: 2px solid #5F6062;   transition: 1s;   }  

Ниже описываем стили по наведению. Делаем закругление углов при помощи transform, сдвинем блок по оси X влево на 80 пик. и добавим фильтр.

.img-box:hover img {   border-radius: 30px;   transform: translateX(-80px);   filter: grayscale(.75);  }  

Основному блоку .img-box пропишем свойство overflow: hidden что бы картинка при смещение по наведению не выходила за его пределы. Затем добавим бордюр с левой стороны, что бы изображение не выглядела, как обрезанное.

.img-box {  …   overflow: hidden;   border-left: 2px solid #5F6062;  }  

Убираем у картинки с левой стороны бордюр.

.img-wrapper img {  …   border-left: none;   }  

Вы, наверняка обратили внимание, что вложенный блок  с картинкой немного меньше по высоте, о чем говорит выступ бордюра и если задать контейнеру .img-box обводку outline: 1px solid orange это станет заметнее.

Что бы  исправить такое дело, делаем блок .img-wrapper flex-контейнером и картинка занимает все его пространство блока.

.img-wrapper {   display: flex;  }  

Блок с картинкой оформлять закончи и временно пока закомментирую анимацию, что бы она нам не мешала.

/*.img-box:hover img {*/   /*border-radius: 30px;*/   /*transform: translateX(-80px);*/   /*filter: grayscale(.75);*/  /*}*/  

Далее переходим к оформлению списков с иконками.

Отображаем блок UL, отбираем его .img-box ul, скрываем маркеры, добавлю плавность анимации, задаем фон, обводку в два пикселя и закруглим углы.

.img-box ul {   list-style: none;   background: #2e81a7;   border: 2px solid #235477;   border-radius: 0 10px 10px 0;   transition: 1s;  }  

Затем оформляем списки Li, делаем отступы, выравниваем иконки по горизонтали, и делаем разделители.

.img-box li {   margin: 10px;   padding: 10px;   text-align: center;   border-bottom: 1px solid #214263;   box-shadow: 0 1px 0 0 #8bb5d2;  }  

Последний разделитель нам не нужен, его сразу скрываем.

.img-box li:last-child {   border-bottom: none;   box-shadow: none;  }  

Затем оформляем иконки по наведению.

.img-box li i {   color: #fff;   font-size: 30px;   text-shadow: 2px 2px 3px #133648;  }  .img-box li a:hover i {   color: #1a4a6f;   text-shadow: -1px -1px 0 #000000;  }  

В заключение делаем плавную анимацию, делаем перемещение блока UL по наведению на изображение.

.img-box ul {  …   margin-left: -114px;   transform: translateX(-20px);  …  }  .img-box:hover ul {  transform: translateX(0);  }  

Проверяем, как все работает в комплексе.

Для того что бы блок с иконкой ушел на задний план, для картинки задаем z-index.

.img-wrapper img {   …   z-index: 1;  }  

Временно все закомментируем и приступим к оформлению текстовых блоков. Отображаем текст, и позиционируем его относительно контейнера .img-box. Временно overflow: hidden закомментирую.

.img-box {  /*overflow: hidden;*/   position: relative;  …  }  

Затем задаем полупрозрачный фон красного цвета, цвет текста делаем белый, позиционируем с права 100 пик, с низу 70 пик., задаем внутренние отступы и плавность анимации в 1s.

.img-box h4,  .img-box p {   position: absolute;   background: rgba(191, 33, 26, 0.8);   color: #ffffff;   right: 100px;   bottom: 70px;   padding: 10px 30px;    transition: 1s;  }  

Оформляем текст параграфа.

.img-box p {   font-size: 14px;   background: rgba(41, 116, 146, 0.8);   width: 60%;   bottom: 20px;   transition: 2s;  }  

Заголовку добавляем text-transform.

.img-box h4 {   text-transform: uppercase;  }  

Теперь делаем анимацию, текст смещаем на 200 пик. при помощи transform по оси X в левую сторону и делаем невидимым.

.img-box h4,  .img-box p {  …   opacity: 0;   transform: translateX(-200px);  }  

По наведению на блок .img-box отображаем текст при помощи transform, и перемещаем в изначальное положение.

.img-box:hover h4,  .img-box:hover p {   opacity: 1;   transform: translateX(0);  }  

Flexbox практика

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

Не появились блоки с текстом, для них зададим приоритетность  z-index в два.

.img-box h4,  .img-box p {  …   z-index: 2;  }  

В принципе, закончили данный пример, получили такого рода анимация.

Урок подготовил Горелов Денис.

Оставить комментарий:

dwstroy.ru

The HTML

<div class="Aligner">  <div class="Aligner-item Aligner-item--top"></div>  <div class="Aligner-item"></div>  <div class="Aligner-item Aligner-item--bottom"></div> </div> 

The CSS

.Aligner {  display: flex;  align-items: center;  justify-content: center; }  .Aligner-item {  max-width: 50%; }  .Aligner-item--top {  align-self: flex-start; }  .Aligner-item--bottom {  align-self: flex-end; } 

View the full source for the Aligner component used in this demo on Github.

philipwalton.github.io

CSS is awesome. Well, most of of the time. For some reason, vertically aligning content (especially when a parent element doesn’t have a height) is a pain requiring all kinds of hacks and display: table; nonsense. It takes something that is seemingly simple and makes it confusing and painful. Luckily, Flexbox solves many of the common layout issues we face in CSS and float grids. In this lesson, you’ll learn how to use Flexbox to solve vertical centering in your projects.

You may ask, why not use vertical-align:middle? Well that doesn’t work the way you’d expect either. Sometimes CSS is a bit wonky.

Fortunately, we have Flexbox at our disposal. Flexbox and the Foundation flex grid solve many layout issues and vertical alignment is one of those.

Flexbox is a newer layout/display paradigm, with 2 key components: Flex parents (specified by ‘display: flex’) and flex children (configured with flex css property).

A quick overview of the benefits of Flexbox include:

  • Columns automatically resize to container width
  • Align left, middle, right, or justified
  • Display items in any order and reverse on the fly
  • Align vertically!

The first, and really slick thing about the Flexbox is that the children of an element with the display: flex all share the same height. Foundation has an Equalizer component to do this, which you don’t need with Flexbox. This is really nice for card type layouts. So if you have a setup like this:

Flex vertical align

All your columns inside this row will take up equal width (unless we attach a sizing class like .small-4) and will be the height of the tallest column.

Flex vertical align

So, let’s do what we came here to do. Vertically align!

Vertically align all the columns inside the row

Add the .align-middle class to the .row to automagically vertically align the columns in the row.

Flex vertical align

No more fussing with fixed heights, position absolute, or transforms. Check out the results:

Flex vertical align

Ok, pretty awesome. But sometimes we need to vertically align just one column in a row.

Vertically aligning individual columns in a row

You can align individual columns in a row instead. The align-self-# classes will give column a height of auto and align it. You got some options here:

  • .align-self-bottom
  • .align-self-middle
  • .align-self-top
  • .align-self-stretch

Flex vertical align

This gets you:

Flex vertical align

zurb.com


You May Also Like

About the Author: admind

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

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

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