flex
Свойство CSS flex — это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.
- flex-grow : 0
- flex-shrink : 1
- flex-basis : auto
- flex-grow : как указано
- flex-shrink : как указано
- flex-basis : как указано, но с относительной длиной, конвертируемой в абсолютные длины
- flex-grow : число
- flex-shrink : число
- flex-basis : длина, проценты или calc();
Синтаксис
/* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;
Значения
Определяет flex-basis для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) — корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию 0% , если не указано.
Размер элемента устанавливается в соответствии с его свойствами width и height . Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению » flex: 0 0 auto «.
Формальный синтаксис
flex =
none | (en-US)
[ (en-US) ? (en-US) || (en-US) ] (en-US)
Пример
#flex-container display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; > #flex-container > .flex-item -webkit-flex: auto; flex: auto; > #flex-container > .raw-item width: 5rem; > div id="flex-container"> div class="flex-item" id="flex">Flex box (click to toggle raw box)div> div class="raw-item" id="raw">Raw boxdiv> div>
var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("click", function() raw.style.display = raw.style.display == "none" ? "block" : "none"; >);
#flex-container width: 100%; font-family: Consolas, Arial, sans-serif; > #flex-container > div border: 1px solid #f00; padding: 1rem; > #flex-container > .raw-item border: 1px solid #000; > Результат
Спецификации
Поддержка браузерами
BCD tables only load in the browser
CSS Flexible Box Layout
Способ CSS раскладки Flexible Box (CSS Flexible Box Layout или Flexbox) — это способ CSS раскладки, означающий блочную модель CSS, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложенных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.
Базовый пример
В следующем примере контейнер объявлен как display: flex , таким образом его три потомка становятся флекс-элементами. Свойству justify-content присвоено значение space-between для того, чтобы, во-первых, задать между элементами равные интервалы по основной оси, и, во-вторых, «примагнитить» первый и последний элементы к левому и правому краям контейнера соответственно. Также можно заметить, что флекс-элементы растянуты перпендикулярно оси; это происходит из-за того, что дефолтным значением align-items является stretch . Так как высота родительского контейнера не задана, элементы растягиваются по высоте и принимают значение высоты самого высокого из них.
Reference
CSS Properties
Guides
Step-by-step tutorial about how to build layouts using this feature.
Tutorial explaining how to use flexbox in the specific context of Web applications.
Спецификации
Found a content problem with this page?
This page was last modified on 26 мая 2023 г. by MDN contributors.
Your blueprint for a better internet.