Flex css browser support

CSS flex Property

Let all the flexible items be the same length, regardless of its content:

Tip: More «Try it Yourself» examples below.

Definition and Usage

The flex property is a shorthand property for:

The flex property sets the flexible length on flexible items.

Note: If the element is not a flexible item, the flex property has no effect.

Default value:	0 1 auto
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.flex=»1″ Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -ms- or -moz- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value	Description	Demo
flex-grow	A number specifying how much the item will grow relative to the rest of the flexible items	Demo ❯
flex-shrink	A number specifying how much the item will shrink relative to the rest of the flexible items
flex-basis	The length of the item. Legal values: «auto», «inherit», or a number followed by «%», «px», «em» or any other length unit	Demo ❯
auto	Same as 1 1 auto.
initial	Same as 0 1 auto. Read about initial
none	Same as 0 0 auto.
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Using flex together with media queries to create a different layout for different screen sizes/devices:

.flex-container <
display: flex;
flex-wrap: wrap;
>

/* Responsive layout — makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 800px) .flex-item-right, .flex-item-left flex: 100%;
>
>

Источник

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 Flexbox

Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Browser Support

The flexbox properties are supported in all modern browsers.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

The element above represents a flex container (the blue area) with three flex items.

Example

A flex container with three flex items:

You will learn more about flex containers and flex items in the next chapters.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник