Как перенести элемент на следующую строку css flex

.container < display: flex; >.item < width: 100px; height: 100px; display: block; >.item:nth-child(1) < background: green; >.item:nth-child(2) < background: red; >.item:nth-child(3)

Второе решение можно сделать, прописан @media для определённой ширины. Там, ты можешь прописать flex-direction: column; чтобы твои элементы были расположены как надо (ТВ

Как в display:flex перенести последний элемент на другую строку?

Есть с трока с col-lg-12 . У нее d-flex . Но при адаптиве нужно, чтобы на планшетной версии последний div был на новой строке.
Как его перенести туда? Верстаю с бутстрапом.

 
 
 
 
  
 
 
 
 
+7(812)509-61-36
 
 
 
  
 
[email protected] 
 
 
 
 
 
www.spb-chongqing.com
 
 
 
 

Отслеживать

109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака

задан 11 окт 2018 в 2:48

219 5 5 серебряных знаков 16 16 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

             
 
  
 
 
 
 
+7(812)509-61-36
 
 
 
  
 
[email protected] 
 
 
 
 
 
www.spb-chongqing.com
 
 
  

Отслеживать

ответ дан 11 окт 2018 в 3:57

Алина Касымова Алина Касымова

224 1 1 серебряный знак 6 6 бронзовых знаков

Что вы хотели сказать этим ответом?

11 окт 2018 в 8:44

У нас имеется 4 основных блока, включая логотип. В одной строке 12 колонок, значит для каждого блока выделяем по 3 колонки (прописываем класс «col-lg-3»), это позволит перенести все блоки в одну колонку, при уменьшении разрешения экрана.

11 окт 2018 в 17:44

.footer_contacts < background: #27365d; color:#fff; >.contacts_val

   
 
 
 
 
  
 
 
 
 
 
 
  
 
+7(812)509-61-36
 
 
 
 
 
  
 
[email protected] 
 
 
 
 
 
  
 
www.spb-chongqing.com
 
 
 
 
 
 
 

Но если Вы хотите именно для своего примера, то помимо d-flex нужно задать flex-wrap док. разрешает перенос блоков, если они не вмещаются по ширине. Для планшетов или любого другого разрешения задаются префиксы .flex-sm-wrap , .flex-md-wrap , .flex-lg-wrap .

Перенести последнюю ячейку на новую строку

Есть таблица, в ней множество колонок. Как сделать, чтобы последняя колонка переносилась на новую строку? Пробовал сделать через флексы, но проблема в том, что для переноса нужен flex-wrap:wrap , а он переносит все ячейки, которые не помещаются на экране, то есть, этот вариант не подходит. Мне же нужно, чтоб переносилась исключительно последняя ячейка, а остальные могли выходить за пределы экрана сколько угодно. Возможно ли решить такое, если не через флексы, то другим способом? Условие — добавлять tr нельзя.

.row < display:flex; flex-wrap:wrap; >.row input < width:100px; >.row td:last-of-type < width:100%; >.row textarea

 
 
 
 
 
 
 
 
 
 
 
Эта ячейка должна быть на новой строчке на всю ширину
 
 

Отслеживать
задан 20 апр 2021 в 22:25
1,002 4 4 серебряных знака 15 15 бронзовых знаков
Добавьте минимальный воспроизводимый пример своих попыток
20 апр 2021 в 22:46
И попробуйте посмотреть на ответ похожего вопроса.
21 апр 2021 в 9:11
@InDevX извиняюсь, добавил.
21 апр 2021 в 12:41
@Walstper я смотрел этот вопрос и другие, ни один не подходит.
21 апр 2021 в 12:42
@Sevastopol’ что не так?
21 апр 2021 в 12:43

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

/* Все элементы выстраиваются в одну строку */ tr < white-space: nowrap; >/* Все элементы блочные, обтекаются другими элементами */ td < display: inline-block; >/* Последний элемент блочный */ td:last-child

 
 
 
 
 
 
 
 
 
 
 
Эта ячейка должна быть на новой строчке на всю ширину
 
 

Отслеживать
ответ дан 21 апр 2021 в 18:20
Sevastopol’ Sevastopol’
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
Воу. Оказалось так просто. Я уже думал, что это невозможно. Спасибо.
21 апр 2021 в 18:35

• html
• css
• flexbox

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

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

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как перенести блок на новую строку css flex

Устанавливает отображение flexbox для дочерних элементов.

flex-direction

Определяет направление, в котором расположатся дочерние элементы (в вертикальном или горизонтальном). Префикс -reverse меняет порядок расположения элементов на обратный.

• row(по умолчанию) слева направо
• row-reverse справа налево
• column сверху вниз
• column-reverse снизу вверх

justify-content

Устанавливает выравнивание дочерних элементов по горизонтали (если flex-direction: row) или вертикали (если flex-direction: column).

• flex-start(по умолчанию) выравнивание по левому краю
• flex-end по правому краю
• center по середине
• space-between расширяет пространство между элементами так, чтобы первый элемент касался левого края, а последний – правого
• space-around расстояние между элементами одинаково, а расстояние между крайними элементами и границами родителя равно половине расстояния между элементами
• space-evenly расстояния между элементами и границами родителя равны

align-items

Устанавливает выравнивание дочерних элементов по вертикали (если flex-direction: row) или по горизонтали (если flex-direction: column).

• stretch(по умолчанию) растянуть элементы так, чтобы заполнить родительский блок
• flex-start выравнивание по верхнему краю
• flex-end по нижнему краю
• center по центру
• baseline по первой строке текста

flex-wrap

Разрешает перенос элементов на новую строку. По умолчанию перенос запрещён.

• nowrap(по умолчанию) все элементы выстроены одной строкой
• wrap элементы могут переноситься на следующую строку
• wrap-reverse строки расположены в обратном порядке

flex-flow

Сокращённая запись двух свойств flex-direction и flex-wrap. По умолчанию row nowrap

align-content

Если дочерние элементы flexbox не помещаются в ширину блока и разрешён перенос элементов на новую строку (flex-wrap: wrap), то при помощи align-content можно настроить выравнивание этих строк.

Выравнивание может выполняться относительно горизонтали или вертикали в зависимости от значения свойства flex-direction.

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

Дата публикации: 2019-05-29

От автора: вот проблема: если вы хотите создать макет с несколькими строками элементов, как вы можете контролировать во flexbox перенос элементов на новую строку?

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

Распространенным способом управления позиционированием и размером flex-элементов является использование width или flex-basic; если мы установим для четвертого элемента width 100%, он будет расположен в отдельной строке. Но что, если мы не хотим или не можем установить ширину отдельных элементов? Или есть ли способ просто указать flexbox разрыв строки в определенных точках?

Нет никакого свойства, которое мы могли бы установить для flex, чтобы оно переносило элементы на новую строку, но мы можем вставить перенос строки (вы можете представить это, как br) между двумя flex-элементами для достижения чего-то похожего:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Есть Flexbox сетка.

Как перенести .new-string на новую строку вместе с элементами, которые идут после него?

6 ответов 6

Примечание переводчика: flex-элемент (flex item) — непосредственный ребёнок блока с display: flex .

Наиболее простое и надёжное решение — это вставка flex-элементов в правильных местах. Если они достаточно широкие ( width: 100% ), они будут создавать перенос строки.

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

Но есть ограничение: flex-контейнер может иметь только псевдоэлементы ::before и ::after . Это значит, что мы можем создать только 2 переноса строки.

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

Но, к счастью, спецификация CSS Display L3 ввела display: contents (в данный момент поддерживаемая только Firefox 37):

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

Поэтому вы можете применять display: contents к детям flex-контейнера и обернуть содержимое каждого внутрь дополнительного блок. Таким образом flex-элементы будут этими дополнительными обёртками и псевдоэлементами детей.

Кроме того, в соответствии с Fragmenting Flex Layout и CSS Fragmentation, flexbox позволяет принудительные переносы с помощью break-before , break-after или их псевдонимов в CSS 2.1:

Принудительные переносы строк во flexbox ещё широко не поддерживаются, но они работают в Firefox.

Как перенести элемент flexbox в следующую строку?

Я пытаюсь создать веб-сайт с помощью CSS Flexbox. У меня есть информационная панель вверху, и я пытаюсь разместить под ней панель навигации. Когда я добавляю панель навигации, вместо перехода к следующей строке, она отображается в 3-м столбце информационной панели. Как я могу (заставить?) Заставить навигационную панель начинаться со следующей строки? Я определил основной контейнер для отображения: flex, но нужно ли также определять прямые дочерние элементы основного контейнера как «flex» в CSS? Я вставил сюда большую часть кода для начинающих. Я ценю любые отзывы и объяснения того, что я делаю неправильно. Заранее спасибо.

2 ответа

Итак, для этого вы хотите указать своему гибкому контейнеру, чтобы он разрешил перенос, добавив flex-wrap: wrap , а затем вы хотите указать своему компоненту навигации, чтобы он был полной ширины, добавив к нему width: 100% .

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

Вы можете использовать flex-wrap:wrap; на .container , чтобы перенести переполненный элемент в новую строку.

Разбираемся с обёртыванием Flex элементов

Flexbox был разработан как однонаправленный макет, то есть он подразумевает укладывание элементов либо в строчку, либо в столбец, но не одновременно и то и другое. Тем не менее, есть возможность завернуть элементы в несколько строк, создавая новые строки. Это делается с помощью установки свойства flex-direction (flex-направление) в значение row (строки) или создавая новые столбцы, устанавливая свойство flex-direction в значение column (столбец). В этой статье я объясню, как это работает, зачем это придумали и в каких случаях лучше использовать технологию CSS Grid Layout вместо флекс-боксов.

Делаем вещи завёрнутыми

Значение по умолчанию свойства flex-wrap равняется nowrap . Это обозначает, что если у вас есть набор флекс-элементов, которые слишком широки для их контейнера, то они будут его переполнять. Если вы хотите, чтобы они переносились на следующую строку (или столбец, если у вас вертикально расположена основная ось) при переполнении, вы должны добавить свойство flex-wrap и установить ему значение wrap , или использовать сокращённую запись свойства flex-flow со значениями row wrap или column wrap соответственно для строк и столбцов.

Тогда элементы будут переноситься внутри контейнера. В следующем примере у нас есть 10 элементов с flex-basis равным 160px и способностью расти и сжиматься. Как только в первой строке мы попадаем в то место, когда нет возможности поместить ещё один элемент с размером 160 px, создаётся новая строка для этого элемента и так будет повторяться, пока не поместятся все элементы.Так как элементы могут расти, то их размер станет больше, чем 160px в том случае, когда все строки полностью заполнятся. Если на последней строке останется только один элемент, то он расширится до ширины всей строки.

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

Перенос и направление (flex-direction)

Перенос работает, что логично ожидать, и в паре со свойством flex-direction . Если flex-direction установлен в row-reverse , тогда элементы начнут укладываться с конечного края контейнера и будут идти в обратном порядке.

Обратите внимание, что обратный порядок относится только к строке (в случае построчного заполнения). Элементы начнут заполнять справа налево, затем перейдут на вторую строку и опять начнут справа. Не будет реверса сразу по обеим осям — строки не будут заполняться вверх!

Объяснение одномерного макета

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

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

Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки — Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми столбцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.

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

Как работают грид-системы на основе flexbox?

Как правило, grid системы на основе flexbox работают, возвращая flexbox к привычному миру разметок на основе float. Если вы назначите процентную ширину для элементов Flex — либо задав значение параметру flex-basis , либо добавив ширину к самому элементу, при этом оставив значение flex-basis как auto — вы можете создать впечатление двухмерного макета. Вы можете посмотреть, как это работает на примере ниже.

Здесь я установил flex-grow и flex-shrink на 0 , чтобы запретить flex элементам расти и сжиматься, а затем контролирую их размер с помощью процентов, как мы это делали в макетах с float.

Если вам нужно, чтобы flex элементы выровнялись по поперечной оси, такой способ управления шириной позволит этого добиться. Тем не менее, в большинстве случаев, добавление параметра ширины непосредственно в сам flex элемент говорит о том, что возможно будет лучше, если вы переключитесь на технологию grid layout для этого компонента макета.

Создание промежутков между элементами

При размещении flex элементов периодически возникает необходимость их разнести между собой. На данный момент у нас нет никакого решения задачи создания промежутков между элементами flexbox в пределах спецификации Box Alignment module. В будущем мы сможем просто использовать row-gap и column-gap для флексбоксов так же, как мы это делаем для CSS Grid макетов. Но пока всё что мы можем сделать — это использовать margin для достижения этой цели.

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

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

Сворачивание элементов

В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра visibility: collapse на элементе. Смотрим документацию MDN для параметра visibility . Спецификация описывает поведение так:

“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую «распорку», которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту «виляния» всего макета страницы. Однако процесс обёртывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” — Сворачивание элементов

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

В следующем живом примере у нас показан флекс-контейнер со параметров «перенос» в состоянии «не переносить». Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse . Следовательно он имеет некую «распорку», которая удерживает ту высоту, которая позволит показать этот элемент. Если вы удалите visibility: collapse из CSS или измените значение на visible , то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.

Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.

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

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

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

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

Разница между visibility: hidden и display: none

Когда вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.

CSS Flexbox – верстка на флексах

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

CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования.

Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.

Поддержка CSS Flexbox браузерами

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

Основы CSS Flexbox

Создание CSS разметки с помощью Flexbox начинается с установки необходимому HTML элементу CSS-свойства display со значением flex или flex-inline .

После этого данный элемент становится flex-контейнером , а все его непосредственные дочерние элементы – flex-элементами . При этом когда мы говорим о flexbox то подразумеваем под этим только элемент с display:flex или display:flex-inline и все элементы непосредственно расположенные в нём. Таким образом в CSS Flexbox имеется всего два типа элементов: flex-контейнер и flex-элемент.

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

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

Устройство flex-контейнера. Направление осей

На рисунке представлена схема устройства flex-контейнера:

Направление расположение flex-элементы в flex-контейнере определяется посредством осей.

В CSS Flexbox имеются две оси. Первая ось называется главной (по умолчанию она направлена слева направо). Вторая — поперечная (по умолчанию направлена сверху вниз), она всегда перпендикулярно главной . Главная ось задаёт основное направление flex-элементов во flex-контейнере, а поперечная ось определяет их направление при переносе на новую линию.

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

Направление главной оси можно изменить, осуществляется это с помощью CSS-свойства flex-direction .

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

По умолчанию flex-элементы не переносятся на новую линию, даже когда им не хватает места в текущей линии. Они просто выходят за её пределы.

Но это можно изменить. Разрешить перенос flex-элементов на новые линии осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap со значением wrap или wrap-reverse .

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

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

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

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

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

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

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

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

Выравнивание линий 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 .

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

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

Управление шириной 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-элемент заберёт себе.

В этом примере, если 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-элемент в ней.

Ширина 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-элементу, то в качестве значения свойства flex-shrink необходимо указать число 0.

CSS-свойство flex

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

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

Пример верстки макета на CSS Flexbox

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

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

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

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

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

Для «превращения» блока во flex-контейнер используется класс row . Установку ширины flex-элементам .col__article и .col__aside внутри flex-контейнера выполнено с использованием CSS-свойства flex .

В качестве примера разметим посредством flexbox ещё футер и создадим в элементе .col__article блок состоящий из трёх элементов (минимальная ширина одного элемента — 300px). В футере разместим четыре блока (минимальная ширина одного блока — 200px).

Похожие публикации:

1. Как в css наложить одну картинку на другую
2. Как в css сделать отступ сверху
3. Как сделать текст справа от картинки в css
4. Как сделать толщину шрифта в css