Flex elements. Practically zastosuvannya FlexBox. Speeches, like a trace of memory

How CSS Flexbox works: the first introduction to the layout of elements on the web side

Flexbox clicks bug us out of the odd bits of pure CSS (for example, vertical swipe), and they do a wonderful job of doing their job. Ale razіbratisya in the principles of yoga robots for an hour becomes fluent, especially if you are a beginner.

The main task of Flexbox is to create balls with gnuchki, and to work with them - intuitively understandable. In order to achieve the goal of labeling wines, we allow the containers themselves to be modified, as they behave with their child elements, including changing their size and changing between them.

It doesn't sound bad, but let's marvel at how smooth it is in practice. In this article, we have 9 most popular Flexbox powers, let's figure out what stinks to stink, that stinks really work.

Display: Flex

Axis butt side:

We have 4 different color divs different expansions, which should be in the middle of the gray div. Skin div's power display: block . Therefore, a leather square occupies the entire width of the row.

To get started with Flexbox, we need to expand our container with a flex container. Fight like this:

#container (display: flex;)

Nothing changed in particular - the divs no longer stood in a row. Ale, you worked it out really hard. You have given your squares a power class, which is what is called “flex-context”.

Flex Direction

A flex container has two axes: the head is all perpendicular to the th.

Behind the locks, all objects are ruffled on the main axis: evil to the right. Therefore, our squares turned into a line, if we turned display: flex . However, flex-direction allows the head to rotate.

#container ( display: flex; flex-direction: column; )

It's important to note that flex-direction: column does not affect squares along the axis perpendicular to the head. The head itself is changing its roztashuvannya and now it is straightened to the bottom.

More power for flex-direction: row-reverse and column-reverse .

Justify Content

Justify-content matches for displaying elements on the head axis.

Rotate to flex-direction: row.

#container ( display: flex; flex-direction: row; justify-content: flex-start; )

Justify-content can take 5 values:

1. flex start;
2. flexend;
3. center;
4. space-between;
5. space around .

Space-between defines the same space between squares, but not between container and squares. Space-around also sets the same distance between the squares, but now it is between the container and the squares and half of the squares between the squares.

Align Items

Whereas justify-content works on the head axis, align-items works on the axis perpendicular to the head axis.

Turning back to flex-direction: row and going through the align-items commands:

1. flex start;
2. flexend;
3. center;
4. stretch;
5. baseline.

Please note that for align-items: stretch the height of the squares is due to auto . For align-items: baseline paragraph tags do not need to be cleared, otherwise you would see it like this:

To better understand how the axes work, we combine justify-content with align-items and marvel at how we work in the center for the two flex-direction powers:

Align Self

Align-self allows you to align okremo elements.

#container ( align-items: flex-start; ) .square#one ( align-self: center; ) // Only this square will be centered.

Let's make align-self for two squares, and let's make align-items: center and flex-direction: row for the others.

Flex-Basis

Flex-basis is subject to the order of elements, the first and last will be changed by other Flexbox authorities:

Flex-basis embeds the expansion of the elements in the main axis.

Let's wonder what will happen, as we change the head axis straight ahead:

Respect that we happened to change the height of the elements. Flex-basis can be defined as the height of the elements, and their width as a fallow in a straight axis.

Flex Grow

Tsya vlastіvіst trohi foldіsha.

For the cob, let's give our squares the same width of 120px:

For capturing, the flex-grow value is 0. Ze means that the squares are fenced in growth (take up space in the container).

Let's try setting flex-grow 1 for the skin square:

The squares were occupied by a container. The flex-grow value overrides the width value.

But here's one thing to blame: what does flex-grow: 1 mean?

Let's try to set flex-grow equal to 999:

I… nothing happened. So it went through those that flex-grow gains not absolute values, but external ones.

Tse means that it's not important, like the meaning of flex-grow, important, like it's in relation to other squares:

The back of the flex-grow skin square is 1, the sum of the width is 6. Also, our container is divided into 6 parts. Leather square occupies 1/6 of the available space in the container.

If the flex-grow of the third square becomes 2, the container will be divided into 7 parts (1+1+2+1+1+1).

Now the third square occupies 2/7 of the space, reshta - 1/7 each.

Keep in mind that flex-grow works only for the main axis (until we change it directly).

Flex Shrink

Flex-shrink - direct spread of flex-grow. Vono signifies, the scales of the square can be changed at the rozmіrі.

Flex-shrink is vicorated if the elements do not fit into the container.

You signify that the elements may change at the rozmirah, and yak - not. By default, the flex-shrink value for the skin square is 1. This means that the squares shrink when the container changes.

Set flex-grow and flex-shrink equal to 1:

Now let's change the flex-shrink value for the third square to 0. We've set it to shrink, so it's width will be equal to 120px:

Keep in mind that flex-shrink is based on proportions. That is, since the flex-shrink square has more than 6, and in others it has more than 2, it means that our square will be squeezed closer and closer.

Flex

Flex replaces flex-grow, flex-shrink and flex-basis.

Value per lock: 0 (grow) 1 (shrink) and auto (basis) .

Let's create two squares:

Square#one ( flex: 2 1 300px; ) .square#two ( flex: 1 2 300px; )

Both squares have flex-basis. This means they will be 300px wide (container width: 600px plus margin and padding).

But if the container is more expanded in size, the first square (with the largest flex-grow) will be larger, and the other square (with the largest flex-shrink) will be larger.

As speech grows and squeezes

If the first square changes, the win does not become twice as large as the other square, and if the other square changes, the win does not become twice as small as the first. It depends on those that flex-grow and flex-shrink are used to grow and speed.

Trochs of mathematics

Cob container size: 640px. We can see 20px from the skin side for the padding, and we're missing 600px, just for the two squares.

If the width of the container is 430px (210px inline), the first square (flex-shrink: 1) is 70px out. The other square (flex-shrink: 2) consumes 140px.

If the container shrinks to 340px, we use 300px. The first square uses 100px, the other 200px.

The same applies to flex-grow.

about the author: Rachel Andrew - not only the editor-in-chief of Smashing Magazine, but also a web retailer, writer and speaker Vaughn is an author of low books, a secret The New CSS Layout, one of the retailers of the Perch content curation system. Write about business and technology on your website rachelandrew.co.uk.

Short zmist: In these stats, we can see the power of the Flexbox view and the same basic rules, how to work on the view along the main and transverse axes.

The values ​​just work vertically so that flex-direction is stuck for column . True, you may not have a free space for rozpodіlu at your site, so you can’t add the height or block-size of the container, like this demo.

Axis alignment for help align-content

Then I can populate align-content with whatever the value is.

If flex-direction is specified as column , then align-content is valid as applied.

Like and at the point of justify-content, we practice with a group of rows and expand the space.

Authority by place-content

Container (place-content: space-between stretch; )
Vidpovidaє tsoma:

Container ( align-content: space-between; justify-content: stretch; )
And this code:

Container (place-content: space-between; )
Equal to the offensive:

Container ( align-content: space-between; justify-content: space-between; )

Axis alignment for help align-items

As an option, you can set the power of the container's height:

Why elements are stretched to the size of the largest element is because of the align-items parameter є stretch . The elements are stretched along the transverse axis to the expansion of the container at which they are straight.

Catch the respect that a row of leather has a row of leather for a bagataria container as a new container. The largest element in this row is significant for the expansion of all elements in this row.

The flex cob crimson can be given to align-items elements with the flex-start value, in which case stinks align to the container cob and no longer stretch to height.

The flex-end value moves to the end of the container along the transverse axis.

If you choose the center value, then the elements are centered visually one by one:

We can also check them out for the baseline. Tse garantuy vyrivnyuvannya text from one substavі, vіdmіnu vіvіvnyuvannya vіvіvnyuvannya polіv navkole text.

All of these options can be tried in the demo.

Individual care for help align-self

The offensive butt in the container has align-items for the alignment of all groups in the center, as well as align-self for the first and the remaining elements.

Why can't justify-self?

You can also think carefully about how justify-content and align-content work with CSS Grid Layout. At Grid, the powers of power are won for rozpodіlu free space in the grid-container between grid tracks. Here we also take a group of paths - and with the help of these powers, we expand them to help them. Since we can operate in the groups i Grid, i Flexbox, we can not take a small element and work with it any other way. Tim is not smaller, but the way to take care of the design of the layout, like layout designers want, if we talk about the power of self on the main axis. Tse vikoristannya automatic watering.

Selection of automatic watering stations on the main axis

Automatic margins work better with Flexbox to display only a few items or groups of items on the main axis. The stepping butt is shown typical vypadok. Є navigation bar, elements appear as rows and double-cob justify-content: start . I want the rest of the paragraph to look like the rest of the row, for example, to understand that the row has enough space for it.

Take this element and make sure the margin-left value is auto . Tse means that the field is magnified to take off as much as possible the left hand of the element, so the element vishtovhuєtsya to the right border.

If you select automatic fields on the main axis, then justify-content will stop working, so that automatic fields will take up the entire space, which would otherwise be expanded for the help of justify-content .

Spare virivnyuvannya

You cannot change the reserve for the flow specification. Acceptance to the specification, which allows the introduction of a sufficient fallback in future versions.

Safe that not safe virivnyuvannya

At the stepping code, the remaining element is too wide for the container, and in case of unsafe bending and bending of the container, the element is formed in the left part of the side, the scallops of the repositioning go beyond the sides.

Container ( display: flex; flex-direction: column; width: 100px; align-items: unsafe center; ) .item:last-child ( width: 200px; )


Safely virivnyuvannya zabіgaє vtraі danih, remіshchuyuchi repovinnnya on іnshiy bіk.

Container ( display: flex; flex-direction: column; width: 100px; align-items: safe center; ) .item:last-child ( width: 200px; )


qi keywords while not supported by all browsers, but show how the Box Alignment specification is given control over Flexbox.

Visnovok

• justify - for the main axes, and align - for the transverse;
• align-content and justify-content require a lot of space;
• the power of align-content and justify-content to be built up to the elements of the group, expanding the space between them. It is not possible to show the virіvnyuvannya okremenu element, to that power - self vіdsutnya;
• if you want to check one element, or split the group along the axis, select automatic fields;
• align-items sets however the align-self authority for the entire group. Tag align-self on the group's child element to set the value individually.

To keep it short, the layout from Flexbox is given to us simple solution when difficult tasks. For example, if you need to rotate the element vertically, or press the footer to the bottom of the screen, or simply insert a sprat of blocks in one row, so that the stench occupies the entire space. Similar tasks are folded without flex. Ale, sound the solution more similar to the "militia" - take it and beat the css not for recognition. The same way from flexbox the same way it changes itself, as you design a flex-model.

CSS Flexible Box Layout Module (CSS module for layouts with flexible blocks), in short flexbox, was created to clean up the imperfections when creating different HTML designs, including adapting to the width and height, and making the layout logical and simple. And the logical mind, as a rule, is practiced in the wrong places, where the result is not distorted - the logic is our everything!

Flexbox allows you to elegantly control yourself different parameters elements in the middle of the container: straight ahead, order, width, height, alignment of the air and across, arranging the free space, stretching and compressing the elements.

Basic knowledge

The FlexBox is stacked from a Container and one or more Child Elements (items).

To enable flexbox, be it anyone HTML element enough to give css power display:flex; or display: inline-flex; .

When the flex power is turned on, the middle of the container creates two axes: the head is transverse (perpendicular (⊥), cross is). Mustaches of elements (of the first equal) are swaggering along the main axis. Behind the lock, the head is horizontal and can be straight levoruch (→), and the cross is vertical and straight to the beast down (↓).

The head and cross axis can be commemorated by the masses, then the elements will be placed down to the beast (↓) and if they stop being placed at the height, they will collapse to the right (→) - then the axis was simply remembered by the masses. At the same time, the cob and the end of the rozashuvannya of the elements do not change - they change only directly (osi)! It is also necessary to show the axles in the middle of the container. You don’t need to think about what “physical” axes are there, and stink into it. The axis here is only a few straight ahead elements in the middle of the container. For example, if we ordered the alignment of the elements in the center of the main axis and then changed directly the center of the main axis, then change and alignment: the elements were in the middle horizontally, and steel in the middle vertically ... Div. butt.

Another important feature of Flex-box is the presence of rows at the transverse straight line. To understand what the language is, let's notice that the head is horizontal, there are a lot of elements and the stench does not “leak” at the container, so move on to the next row. Tobto. the container looks like this: the container has two rows in the middle, the skin row has a sprat of elements. Have you noticed? And now remember that we can veer vertically, not less than an element, but oh lavi! How ce pracyuє good can be seen from the butt to power. And the axis looks like this schematically:

CSS power, which can be injected into the layout model: float, clear, vertical-align, columns do not work with flex constructs. Here the other model of layout is victorious, and css power is simply ignored.

CSS Power Flexbox

Flexbox avenge different css rules for wrapping all flex constructs. Some need to be loaded to the main container, others to the element container.

For container

Turns on the flex power of the element. Under the power of power, the element itself is consumed and the contributions of the new element: they get less than the top of the first line - they become the elements of the flex container.

• flex- The element expands to the full width and may have its own space in the middle of the other blocks. It is necessary to transfer rows on the cob and in the end of the block.
• inline-flex- The element is wrapped around by other elements. In this case, the inner part is formatted like a block element, and the element itself is like an integration.

flex and inline-flex are different, which interact differently with other elements, like display:block and display:inline-block .

Change directly the main axis of the container. The crosswise everything changes in the same way.

• row (default)- straight ahead elements to the right (→)
• column- Straight down the elements to the beast (↓)
• row reverse- Directly element_v right nal_vo (←)
• column reverse- Direct elements from bottom to top ()

Allows for transferred elements that are not placed in a container.

• nowrap (default)- The nested elements are placed in one row (with direction=row) or in one column (with direction=column) independently, since they are placed in a container.
• wrap- includes the transfer of elements to the next row, so that stench does not spread at the container. Thus, the movement of elements in the transverse axis is turned on.
• wrap reverse- tezh, that wrap will only be transferred not down, but uphill (at the gate straight ahead).

More insults to the power of flex-direction and flex-wrap. The stench is often hacked at once, so that writing less code was created by the power of flex-flow.

flex-flow accepts the meaning of two powers separated by a gap. Otherwise, you can say one meaning, be it as a quality.

/* only flex-direction */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* flex-wrap only */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* just offending values: flex-direction and flex-wrap */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; justify-content:

View elements from the main axis: if direction=row, then from the horizontal, and if direction=column, then from the vertical.

• flex start (default)- Elements will go on the cob (in the country you may run out of space).
• flex end- elements are vibrated to the end (there is enough space on the cob)
• center- in the center
• space between- extreme elements are squeezed to the edges (the space between the elements is equally divided)
• space around- free space is evenly spread between elements (extreme elements do not cling to the edges). The space between the edge of the container and the outermost elements will be smaller, the lower space between the elements in the middle of the row.
• space-evenly

Virivnyuє rows, in which there are elements of the transverse axis. The same justify-content only for the opposite axis.

Note: Pratsyuє if it is less than 2 rows, then. nothing will happen for the presence of more than 1 row.

Tobto. If flex-direction: row, then the power of the vertical row is invisible. Here it is important to note that the height of the block is due to the buti is set zhorstko and may be more height of the rows, otherwise the rows themselves will expand the container and be-like їхнє virіvnyuvannya squandering sense, that there is no free space between them... And the axis if flex-direction: column, flex-direction then the rows collapse horizontally → and the width of the container may be larger than the width of the rows and the rows will be swollen into a sense.

• stretch (default)- the rows are stretched out in a row in a row
• flex start- the rows are grouped at the upper part of the container (for example, there may be a lack of space).
• flex end- rows are grouped at the lower part of the container (there is enough space on the cob)
• center- rows are grouped in the center of the container (there is space left on both sides)
• space between- the extreme rows are squeezed to the edges (the space between the rows is spread evenly)
• space around- more space is evenly spread between rows (extreme elements do not cling to the edges). The space between the edge of the container and the outermost elements will be smaller, the lower space between the elements in the middle of the row.
• space-evenly- also space-around, only stand at the extreme elements to the edges of the container as well as between the elements.

Vivnyuє elements of the transverse axis in the middle of the row (invisible row). Tobto. the rows themselves are aligned through align-content, and the elements in the middle of these rows (rows) through align-items and all along the transverse axis. On the main axis, there is no such thing, there is no way to understand the rows of those elements through justify-content.

• stretch (default)- the elements are stretched out in a row in a row
• flex start- elements are squeezed to the cob in a row
• flex end- elements are squeezed to the end of the row
• center- Elements are aligned in the center of the row
• baseline- elements are aligned behind the base line of the text

For container elements

Sets the coefficient of the element's increase for the presence of a free space for the container. Promotion flex-grow: 0 tobto. The living element is not to blame for the increase in the amount of space in the container.

Typically flex-grow: 0

• If you specify flex-grow:1 for all elements, all stinks will expand the same way and put everything in the container.
• If you specify flex-grow:1 for one of the elements, then you will not be able to store everything in the container, and justify-content will no longer be able to parse: there is no free space to grow.
• With flex-grow:1. If one of them can flex-grow: 2, then the wine will be two more, the other will be lower
• If all flex blocks in the middle of a flex container can have flex-grow:3, then they will be the same size
• With flex-grow:3. If one of them can flex-grow:12 , then it will be four times larger, lower

How do you work? Assume that the container can have a width of 500px and that it can contain two elements that can have a base width of 100px. So the container has 300 free pixels. Now for the first element we can say flex-grow:2; , and another flex-grow: 1; The blocks will take up the full width of the container, so the width of the first block will be 300px and the width of the other 200px. It is explained that the available 300px free space in the container was divided between the elements in the ratio 2:1, +200px to the first and +100px to the other.

Note: the value can be specified fractional numbers for example: 0.5 - flex-grow:0.5

Specifies the element change factor. The power is flex-grow and signifies that the element is guilty of clinging, as the container does not lack free space. Tobto. the authorities start pracsyuvati, if the amount of expansion of all elements is greater for the expansion of the container.

Typically flex-shrink:1

Let's say that the container can be 600px wide and contain two elements that can be 300px wide - flex-basis:300px; . Tobto. two elements will fill the container. The first element should have flex-shrink: 2; , and another flex-shrink: 1; . Now change the width of the container to 300px, so. The element(s) will shrink by 300px so that they are in the middle of the container. Squeeze at spіvvіdshennі 2:1, tobto. the first block will shrink by 200px, and the other by 100px and the new elements will become 100px and 200px.

Note: values ​​can have fractions, for example: 0.5 - flex-shrink:0.5

Set the element's base width to the width in front of it, so you'll be wary of adding to the element's width. The value can be set to px, em, rem, %, vw, vh etc. The box width is set to the base width and the value of flex-grow, flex-shrink and the content in the middle of the block. With auto , the element is set to a base width that matches the content in the middle.

Typically: auto

In other cases, it is easier to set the width of the element simply through the power element width. For example, width: 50%; If this means that the element in the middle of the container will be equal to 50%, then the prote will use the power of flex-grow and flex-shrink. This may be necessary if the element is stretched in the middle of the one that is larger than the one assigned in flex-basis. Butt.

flex-basis will be "hard" to reset the stretching and embossing: flex-basis: 200px; flex-grow:0; flex-shrink:0; . Everything can be written like this flex:0 0 200px; .

Shorthand for three powers: flex-grow flex-shrink flex-basis.

Typical: flex: 0 1 auto

However, you can enter one or two values:

Flex: none; /* 0 0 auto */ /* number */ flex: 2; /* flex-grow (flex-basis grow at 0) */ /* not a number */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: content */ flex: 1 30px; /* flex-grow and flex-basis */ flex: 2 2; /* flex-grow and flex-shrink (flex-basis jump at 0) */ flex: 2 2 10%; /* flex-grow and flex-shrink and flex-basis */ align-self:

Allows you to change the power of align-items only for the framed item.

Typically: as align-items container

• stretch- the element is stretched in a row in a row
• flex start- the element is squeezed to the cob of the row
• flex end- the element is pressed to the end of the row
• center- the element is aligned in the center of the row

baseline- the element is aligned behind the base line of the text

Allows you to change the order (position, camp) of the element in the chain row.

Typically: order: 0

Behind the caption, the elements may be ordered: 0 and placed in the order of their appearance in the HTML code in a straight line. Also, if you change the order power values, then the elements will be put in the order of the value: -1 0 1 2 3 ... . For example, if you specify order: 1 for one of the elements, then all zeros will go first, and then the element with 1.

So it is possible, for example, to throw the first element into a kinets, while not directly changing the movement of other elements or the HTML code.

notes

What is the difference between flex-basis and width?

Below are the important details between flex-basis and width/height:

flex-basis is more practical for the main axis. This means that when flex-direction:row flex-basis controls the width (width), and when flex-direction:column controls the height. .

flex-basis stagnates less to flex elements. This means that turning on flex in the container does not have any effect.

Absolute container elements don't partake of flex constructs... Also, flex-basis doesn't overlap with flex container elements because absolute position:absolute stinks. You will need to specify width/height.

• With variable flex 3 values ​​(flex-grow / flex-shrink / flex-basis) can be combined and written short, and for width grow or shrink it is necessary to write okremo. For example: flex:0 0 50% == width:50%; flex-shrink:0; . Sometimes it's not handy.

If possible, still give the priority to flex-basis . Change width only if flex-basis doesn't fit.

Vidminnist flex-basis vіd width – bug chi feature?

The content in the middle of the flex element is expandable and cannot go beyond the boundaries. However, if you set the width via width or max-width rather than flex-basis, then the element in the middle of the flex container will zoom out of the middle of the container (however, this behavior is necessary). Butt:

Apply Flex Nesting

The butts do not have prefixes for cross-browser compatibility anywhere. I have done so for manual css reading. Apply to marvel at the rest versions of Chrome or Firefox.

#1 Simple butt with vertical and horizontal alignment

Let's start from the simplest butt - vertical and horizontal alignment at once and for whatever height of the block, navit humovoy.

Otherwise, without a block in the middle:

#1.2 Podіl (opened) between elements of the flex block

To expand the container elements around the edges and select the element enough, after you expand it, you need to change the power of margin-left:auto or margin-right:auto .

#2 Responsive menu on flex

Zrobimo menu at the very top of the page. On a wide screen, you can't but be right-handed. On the middle, look in the middle. And on a small leather element can be on a new row.

#3 Responsive 3 columns

This butt shows like a quick and manually spawn 3 columns, so when it sounds, it will change to 2 and then to 1.

Get respect, what can you do without victorious media rules, everything is on flex.

Go to jsfiddle.net and change the width of the "result" section

#4 Responsive blocks on flex

It is permissible for us to enter 3 blocks, one large and two small. Whenever it is necessary, the blocks were placed under a small screen. Robimo:

Go to jsfiddle.net and change the width of the "result" section

#5 Gallery on flex and transition

This butt shows how fast you can make a nice accordion with pictures on flex. Give respect to power transition for flex.

#6 Flex y flex (just butt)

Zavdannya zrobiti gnuchki block. So, the cob text in the skin blot was on one line horizontally. Tobto. with sounding width, the blocks grow at the height. It is necessary that the picture is on the top, the button is at the bottom, and the text in the middle starts along one horizontal line.

To complete this task, the blocks themselves are stretched with flex and the maximum possible width is set for it. Kozhen indoor unit also with flex design, with rotated weight flex-direction: column; and the middle element (where the text is to be found) expands flex-grow:1; to fill in the whole free space, so the result is reached - the text starts from one line.

Apply more

Support by browsers - 98.3%

Again, there was no sound mind, but everything modern browsers trim flexbox constructs. For something else, it is necessary to indicate the prefix. For a real picture, let's take a look at caniuse.com and bachimo, without prefixes 96.3% of browsers will work today, with prefixes 98.3%. This is a showcase for how you can boldly flaunt flexbox.

For the sake of knowing, what prefixes are relevant for today (cherv. 2019), I will point out the best flex rules for need prefixes:

/* Container */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -flex -flow:column wrap; flex-flow:column wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; distribute; align-content:space-around; ) /* Items */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex-negative:2; flex-shrink:2; - ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; :center;align-self:center;-webkit-box-ordinal-group:3; -ms-flex- order:2;order:2;

More shortly, as authority with prefixes will go to the original authority.
This list has no prefixes that are not necessary for today (from caniuse), but there are more prefixes.

• (new) - new syntax: display: flex; .
• (tweener) - old unofficial 2011 syntax: display: flexbox; .
• (old) - old 2009 rock syntax: display: box;

Video

Well, don’t forget about the video, there for an hour it’s clear that you understood. Axis couple of popular:

Text message by Flex

flexboxfroggy.com - flexbox home page.

Flexplorer is a basic flex code constructor.

And send us a pull request.

For the most extreme, authors are responsible to set flex to one of the following values: auto , initial , none , or positive unitless number. In order to get these values, you need to adjust the flex containers below:

Either way, flex items don't shrink below their minimum content size.

Syntax

The flex property can be specified using one, 2, or 3 values.

values

Formal syntax

example

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; )

result

Specifications

Browser compatibility

The compactness of tables on this side is generated from structuring data. If you want to know about your data, click on https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub