Flexbox

Добавление содержимого

Вы наверное удивились, почему мы просто не установили ширину красного элемента с помощью свойства width? Да, мы могли бы это сделать, но в таком случае я не смог бы показать вам следующий фрагмент…

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
}
.red {
background: orangered;
flex-grow: 1;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
}
</style>
<div class=»container»>
<div class=»red»>1</div>
<div class=»green»>2</div>
<div class=»blue»>3
<p>Флекс-элементы могут увеличиваться и уменьшаться в зависимости от их содержимого.</p>
</div>
</div>

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

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

Высота синего гибкого элемента также выросла для размещения нового содержимого

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

The align-self Property

The property specifies the
alignment for the selected item inside the flexible container.

The property overrides the default alignment set by the
container’s property.

Example

Align the third flex item in the middle of the container:

<div class=»flex-container»>  <div>1</div>  <div>2</div>  <div style=»align-self:
center»>3</div>
  <div>4</div></div>

Example

Align the second flex item at the top of the container, and the third flex item at the
bottom of the container:

<div class=»flex-container»>  <div>1</div>  <div style=»align-self:
flex-start»>2</div>
  <div style=»align-self:
flex-end»>3</div>
  <div>4</div></div>

Пример 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
 
}

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

Свойство flex-direction

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

Позволяет использовать эти значения:

  • row (по умолчанию): указывает,элементы помещаются в строку рядом друг с другом слева направо.
  • row-reverse: они расположены в ряд, но в порядке справа налево.
  • column: они расположены друг под другом, по порядку первые выше.
  • column-reverse: они помещаются в столбец, но первые появятся ниже.

Мы можем поэкспериментировать с этим свойством с помощью HTML, подобного этому. (На самом деле вы увидите HTML очень похож на предыдущее упражнение, и достаточно для проверить различные аспекты Flexbox.)

Теперь давайте применим несколько стилей. В основном нас интересует применение CSS к элементу с помощью class= “flex-container”, но мы будем применять стили ко всем элементам, мы могли лучше оценить положение блоков.

Поскольку контейнер flex мы поместили flex – direction: column-reverse; вы заметите элементырасположены друг под другом и в порядке, противоположном тому, который они появляются в HTML-коде.

Margin обладает особыми силами

Я думал, что если, например, ты хочешь заголовок с логотипом и названием сайта слева, а кнопкой логина справа…

… тебе следует дать названию flex: 1, чтобы прижать остальные элементы к другому концу строки.

Вот почему flexbox — Очень Хорошая Вещь. Простые вещи такие простые.

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

Отличные новости! Вместо этого, ты можешь сказать прямо: «прижми этот элемент вправо», определив margin-left: auto на нужном элементе. Думай об этом как о float: right.

Например, если элемент слева является изображением:

Мне не нужно применять flex к изображению, мне не нужно применять space-between к flex-контейнеру, я просто установлю margin-left: auto на кнопке «Войти» («Sign in»):

Тебе может показаться это некоторым хаком, но нет, это прямо там в как способ прижать flex-элемент в конец flexbox’а. У способа даже есть своя глава: «».

О, мне также следует здесь упомянуть, что я предполагаю flex-direction: row везде в этом блог-посте, но все применимо также и к row-reverse или column или column-reverse.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Авторы flexbox обладают хрустальным шаром

Как вы возможно знаете, свойство flex является краткой записью flex-grow, flex-shrink и flex-basis.

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

Что я не знал до сей поры, это то, что, в общем случае, я хочу одну из трех комбинаций:

  • Если я хочу, чтобы элемент немного сжимался, когда места недостаточно, но не тянулся шире чем ему надо: flex: 0 1 auto
  • Если мой flex-элемент должен тянуться для заполнения всего доступного пространства, и немного сжиматься если места не хватает: flex: 1 1 auto
  • Если мой элемент не должен менять размеры совсем: flex: 0 0 auto

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

Видишь ли, Бригада Flexbox’а (мне нравится думать, что команда flexbox’а носит кожаные куртки с этой надписью сзади — доступны мужские и женские размеры). Где там было это предложение? Ах да, Бригада Flexbox’а знала, что я хочу эти три комбинации свойств в большинстве случаев. Поэтому они дали им .

Первый случай — это значение initial так что ключевое слово не нужно. Для второго случая используется flex: auto, и flex: none замечательно простое решение чтобы элемент не тянулся совсем.

Кто бы мог подуть! (Who woulda thunk it — игра слов, прим. переводчика)

Это как если бы было box-shadow: garish, что по умолчанию равнялось 2px 2px 4px hotpink потому что считалось «полезным значением по умолчанию».

Вернемся к невероятно уродливому книжному примеру. Чтобы сделать ту кнопку «Купить» стабильно широкой для попадания пальцем…

… мне всего лишь надо задать на ней flex: none:

(Да, я мог бы указать flex: 0 0 80px; и сэкономить строку CSS. Но есть что-то особенное в том, как ясно flex: none демонстрирует намерение кода. Это хорошо для Будущего Дэвида который забудет как это все работает.)

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

Видеоурок — тут

Горизонтальная структура

Примеры построения горизонтальной структуры flex-элементов (колонок).

Три колонки резиновые

Четыре колонки в два ряда

Три колонки Одна большая

Четыре колонки резина + отступы (10px)

Две колонки сайдбар (200px)

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;
flex: 0 1 33.333%;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

4

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-wrap:wrap;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;
flex: 0 1 50%;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-wrap:wrap;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

flex: 0 1 100%;

}

/* flex-элемент №2 */

.block__element_2{

flex: 0 1 50%;

}

/* flex-элемент №3 */

.block__element_3{

flex: 0 1 50%;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

4

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

display: flex;
margin: 0px -5px;

}

/* flex-элемент */

.block__element{

padding: 0px 5px;
flex: 0 1 25%;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

flex: 0 0 200px;

}

/* flex-элемент №2 */

.block__element_2{

flex: 1 1 auto;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Вертикальная структура

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

Три ряда второй элемент большой

Три ряда по центру

Три ряда раскиданы

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-direction:column;
height: 300px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex: 1 1 auto;

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-direction:column;
height: 300px;
align-items: center;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-direction:column;
height: 300px;
justify-content: space-between;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

По центру

Центрируем блок.

Пример №1

1

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
justify-content:center;
align-items:center;
height: 300px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Flex grow, shrink и basis

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

Пример

Давайте исследуем каждое свойство. Свойство flex-basis — это способ установки начального основного размера flex-элемента.

Свойство flex-grow устанавливает величину динамического роста flex-элемента. Оно определяет, какая часть доступного пространства в flex-контейнере должна быть выделена для текущего флекс-элемента (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — это разница между размером флекс-контейнера и размером всех его флекс-элементов вместе. Если все родственные флекс-элементы имеют одинаковый коэффициент flex-grow, то всем элементам предоставляется одинаковое количество доступного пространства, в противном случае оно распределяется в соответствии с соотношением, определённым различными коэффициентами flex-grow.

Свойство flex-shrink устанавливает коэффициент динамического сжатия флекс-элемента. Flex-элементы сжимаются, чтобы заполнить контейнер в соответствии с предоставленным значением, когда размер flex-элементов по умолчанию больше, чем размер flex-контейнера.

Например, представьте, что наш контейнер flexbox теперь имеет только два гибких элемента:

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

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

Пример

В следующем примере css-правила гласят следующее: оба флекс-элемента About и Services будут начинаться с 200 пикселей. Затем дополнительное пространство будет выделено для флекс-элемента Services, а для флекс-элемента About дополнительное пространство не будет выделено:

Пример

А теперь рассмотрим свойство flex-shrink

Обратите внимание, что для флекс-элемента About коэффициент flex-shrink равен 1, а для флекс-элемента Services — 0. Это означает, что если контейнер сжимается меньше, чем необходимый размер, чтобы обеспечить по крайней мере начальную ширину каждого флекс-элемента, то флекс-элемент About будет первым, чтобы начать сжиматься

Флекс-элемент Services пока сжиматься не будет.

Свойство flex

Свойство flex делает элементы адаптивными внутри контейнера flexbox, и с его помощью возможны некоторые действительно изящные эффекты. Представьте, что мы хотим, чтобы каждый элемент растягивался слева направо и чтобы каждый элемент занимал одинаковую ширину. Давайте применим это свойство CSS:

Скопировать

Теперь давайте сделаем один элемент в два раза шире остальных. Для этого установим элементу Services значение flex 2.

Скопировать

Благодаря свойству flex вы можете просто сделать один элемент резиновым, в то время как другие элементы сохранят фиксированную ширину. В приведенном ниже примере элемент About будет растягиваться и сжиматься при всех размерах экрана, в то время как Home и Services сохранят фиксированную ширину:

Скопировать

Мы также можем заставить два элемента увеличиваться и уменьшаться, в то время как третий элемент сохраняет фиксированную ширину. В следующем примере будет сохранена фиксированная ширина для элемента About, в то время как элементы Home и Services динамически увеличиваются и уменьшаются:

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

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

Adblock
detector