Method for positioning FlexBox elements. Aligning blocks using CSS using Flex container Practical use FlexBox

One of the ReaSons That Flexbox Quickly Caught The Interest Of Web Developers Is That It Brought Proper Alignment Capabilities to the Web for the First Time. IT ENABLED PROPER VERTICAL ALIGNMENT, SO WE CAN AT LAST EASILY CENTER A BOX. In This Guide, We Will Take a Thorough Look At How The Alignment and Justification Properties Work in Flexbox.

To Center Our Box We Use The Align-Items Property to Align Our Item On The Cross Axis, Which in this Case Is The Block Axis Running Vertically. We use Justify Content to Align The Item On The Main Axis, Which in this Case the inline Axis Running horizontally.

You can take a look at the code of this example below. Change The Size of The CONTAINER OR NESTED ELEMENT AND THE NESTED ELEMENT ALWAYS REMAINS CENTRED.

PROPERTIES THAT CONTROL ALIGNMENT

The Properties We Will Look At In This Guide Are As Followows.

Justify-Content - Controls Alignment of All Items on The Main Axis.
Align-Items - Controls Alignment of All Items on The Cross Axis.
Align-Self - Controls Alignment of An Individual Flex Item on The Cross Axis.
Align-Content - Described in the Spec AS for "Packing Flex Lines"; Controls Space Between Flex Lines on The Cross Axis.

We Will Also Discover How Auto Margins Can Be USED for Alignment in Flexbox.

Note.: The Alignment Properties in FlexBox Have Been Placed Into Their Own Specification - CSS Box Alignment Level 3. IT IS EXPECTED THAT THIS SPEC WILL ULTIMATELY SUPERSEDE THE PROPERTIES AS DEFINED IN FLEXBOX LEVEL ONE.

The Cross Axis.

The Align-Items and Align-Self Properties Control Alignment of Our Flex Items on The Cross Axis, Down The Columns If Flex-Direction Is Row and Along The Row If Flex-Direction Is Column.

We Are Making Use of Cross-Axis Alignment In The Most Simple Flex Example. If We Add Display: Flex To A Container, The Child Items All Become Flex Items Arranged in A Row. They Will All Stretch to Be As Tall AS The Tallest Item, As That Item Is Defining The Height of the Items on The Cross Axis. IF Your Flex CONTAINER HAS A Height Set, The Items Will Stretch to That Height, Regardless of How Much Content Is In The Item.

The Items Become The Same Height Is That The Initial Value of Align-Items, The Property That Controls Alignment On The Cross Axis, Is Set to Stretch.

WE CAN Use Other Values \u200b\u200bto Control How The Items Align:

align-Items: Flex-Start
align-Items: Flex-End
align-Items: Center
align-Items: Stretch
align-Items: Baseline

In The Live Example Below, The Value of Align-Items is Stretch. Try The Other Values \u200b\u200band See How All of the Items Align Against Each Other in the Flex Container.

ALIGNING ONE ITEM WITH ALIGN-SELF

The Align-Items Property Sets The Align-Self Property On All of the Flex Items As A Group. This Means You Can Explicitly Declare The Align-Self Property to Target A Single Item. The Align-Self Property Accepts All of The Same Values \u200b\u200bAs Align-Items Plus a Value of AUTO, Which Will Reset The Value to That Which Is Defined on The Flex Container.

In This Next Live Example, The Flex CONTAINER HAS ALIGN-Items: Flex-Start, Which Means The Items Are All Aligned to the Start of the Cross Axis. I Have Targeted The First Item using A First-Child Selector and Set That Item to Align-Self: Stretch; Another Item Has Been Selected using its Class of Selected and Given Align-Self: Center. You can Change the Value of Align-Items Or Change The Values \u200b\u200bof Align-Self on the Individual Items to See How This Works.

Changing The Main Axis

So Far We Have Looked At The Behaviur WHEN OUR FLEX-DIRECTION IS ROW, And While Working in a Language Written Top to Bottom. This Means That The Main Axis Runs Along The Row Horizontally, and Our Cross Axis Alignment Moves The Items Up and Down.

If We Change Our Flex-Direction to Column, Align-Items and Align-Self Will Align The Items To the Left and Right.

You can Try This Out in the example below, Which Has a Flex Container with Flex-Direction: Column Yet Otherwise Is Exactly The Same As the Previous Example.

Aligning CONTENT ON THE CROSS AXIS - THE ALIGN-CONTENT PROPERTY

SO Far We Have Been Aligning The Items, Or An Individual Item Inside The Area Defined by The Flex-Container. If You Have A Wrapped MultiPle-Line Flex CONTAINER THEN YOU MIGHT ALSO WANT TO CONTROL THE DISTRIBUTION OF SPACE BETWEEN THE ROWS. In The Specification This Is Described As Packing Flex Lines.

For Align-Content to Work You Need More Height In Your Flex Container Than Is Required to Display The Itms. Items as a set, and Dictates What Happans with That Free Space, And The Alignment of the Entire Set of Items Within It.

The Align-Content Property Takes The Following Values:

align-Content: Flex-Start
align-Content: Flex-End
align-Content: Center
align-Content: Space-Between
align-Content: Space-around
align-Content: Stretch
align-Content: Space-Evenly (not defined in the flexbox specification)

In The Live Example Below, The Flex CONTAINER HAS A Height of 400 Pixels, Which is more than Needed to Display Our Items. The Value of Align-Content IS Space-Between, Which Means That The Available Space is Shared Out between. The Flex Lines, Which Are Placed Flush with the Start and End of the CONTAINER ON THE CROSS AXIS.

Try Out The Other Values \u200b\u200bto See How The Align-Content Property Works.

ONCE AGAIN WE CAN SWITCH OUR FLEX-DIRECTION TO COLUMN IN ORDER TO SEE HOW THIS PROPERTY BEHAVES WHEN WE ARE WORKING by Column. AS Before, We Need Enough Space in The Cross Axis to Have some Free Space After Displaying All of the Itms.

Note.: The Value Space-Evenly Is Not Defined in The Flexbox Specification and IS A LATER ADDITION TO THE BOX ALIGNMENT SPECIFICATION. Browser Support For This Value Is Not As Good As That of the Values \u200b\u200bDefined in the Flexbox SPEC.

CSS3-FlexBox. - This is a special technology that was introduced in the last version of cascade styles, which allows you to set the flexible mesh of the location of the blocks inside a parent container.

What features given this mesh:

the ability to control the column structure of the main html-clash frame;
manage the orientation of the arrangement of HTML-tags like a table layout;
control order;
and many others.

The CSS-FlexBox technology itself stands on the basic blocks in the relative neighborhood and vertical axes according to the following scheme:

Navigation

We give a list of web browsers that support the considered property of the blocks as standard and using special projects:

Ie: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chromium: 29.0, 21.0 -Webkit-
Safari: 6.1 -Webkit-
Opera: 12.1 -Webkit
Safari (under the poppy): 7.0 -Webkit-
Opera Mini: 8
Anroyd browser: 4.4, 4.1 -Webkit-
Chrome (under android): 44

1.1. DISPLAY property: Flex

The CSS rule is intended to build a FlexBox-grid, which is built from subsidiaries of HTML tags located inside some parent container. To specify this grid, you must set the DISPLAY rule to the value:

dISPLAY: FLEX; - for block display;
display: INLINE-FLEX; - For Inline Display.

It should be noted that for some versions of the browsers it is necessary to prescribe this rule using special projects (see paragraph above), as well as the fact that HTML tags lying in a parent without wrapper are considered anonymous:

1.2. Align horizontally Justify-Content

The rule is used to align horizontally subsidiaries inside the parent FlexBox container. This rule is not inherited.

justify-Content
Values:
Flex-Start.	Lines on the left edge. Default value
Flex-End.	Lines on the right edge.
Center	Lines in the middle.
Space-Between.	In the entire width of the parent on the equilibrium segment. It is worth noting that the first element is coming up to the left edge without voids, but taking into account Padding, and the last one also, but to the right edge. All other block elements are placed between the first and last through the same segments of emptiness.
Space-around.	All over the width so that between each two blocks will be the same indent, and its half of the edge.
initial	Setting default value.
inherit.

Recording format

B-Podlogka (Height: 120px; background-color: #ddd; margin: 0px; padding: 10px; Display: Flex; Display: -WebKit-Flex; Justify-Content: Flex-start; -Webkit-Justify-Content: Flex -start;)

B-Podlogka (Justify-Content: Flex-End;)

B-Podlogka (Justify-Content: Center;)

B-Podlogka (Justify-Content: Space-Between;)

B-Podlogka (Justify Content: Space-Around;)

1.3. Vertical Align-Items Alignment

The property is used to align vertically child objects inside the parent FlexBox container. It should be noted that anonymous flex-items are also falling under this alignment. This rule is not inherited. Only the first string blocks are aligned.

align-Items.
Values:
Stretch.	FlexBox blocks, if not fixed, the height is pulled out to the entire height of the parent container. It is the initial (basic) parameter.
Flex-Start.	It is intended for aligning flexbox-items along the upper edge of the parent container, taking into account the internal indents (Padding).
Flex-End.	It is intended for aligning flexbox-items along the lower edge of the parent container taking into account the internal indents (padding).
Center	Aligns child flex blocks inside a flex container in the middle line of the highest block.
Baseline	Aligns the child flex blocks inside the parent relative to the middle line of the text in these blocks.
initial
inherit.	It is intended for the message CSS interpreter that the value must be taken from the parent tag.

Recording format

B-Podlogka (Align-Items: Stretch; -Webkit-Align-Items: Stretch;)

It should be noted that the child flex blocks stretched to the entire height of the container, it is necessary that they do not have a fixed height of them: Height: Auto; .

B-Podlogka (Align-Items: Flex-Start;)

B-Podlogka (Align-Items: Flex-End;)

B-Podlogka (Align-Items: Center;)

B-Podlogka (Align-Items: Baseline;)

1.4. Orientation of the main axis Flex-Direction

It is used to specify the orientation (orientation) of the following Flex blocks for each other. In accordance with the established standards, the orientation may be two types: vertically (in column, by default?) And horizontally (in the string, by default?).

Recording format

B-Podlogka (Flex-Direction: Row; -Webkit-Flex-Direction: ROW;)

B-Podlogka (Flex-Direction: Row-Reverse;)

B-Podlogka (Flex-Direction: Column;)

B-Podlogka (Flex-Direction: Column-Reverse;)

1.5. Accommodation in several lines Flex-Wrap

Responsible for the placement of child flex blocks into one or more lines.

flex-Wrap.
Values:
Nowrap	In the initial state, all child items are located in one line (? Or? Depending on the selected text orientation).
Wrap.	When specifying such a parameter, child items will take several rows depending on the parent width (? Or? Depending on the selected text orientation).
Wrap-Reverse.	When specifying such a parameter, subsidiaries will occupy several rows depending on the width of the parent, while having a reversing alternation order.
initial	It will be found in the initial value.
inherit.	It is intended for the message CSS interpreter that the value must be taken from the parent tag.

Recording format

B-Podlogka (Flex-Wrap: Wrap; -WebKit-Flex-Wrap: Wrap;)

B-Podlogka (Flex-Wrap: Wrap-Reverse;)

1.6. Directivity and Multi-Stream One Rule Flex-Flow

This rule is used as a more compact recording of the two previous rules in order to optimize the code.

Recording format

B-Podlogka (Flex-Flow: Row Wrap; -Webkit-Flex-Flow: Row Wrap;)

1.7. Align vertically in all lines of Align-Content

This TSss is a rule is used to align vertically intra-container daughter flex blocks. To trigger this rule, it is necessary that the parent container is set: Height and Flex-Flow. Is not inherited.

align-Content
Values:
Stretch.	Stretching the elements to the entire height of the parent container (the flex blocks should not be recorded height).
Flex-Start.	Lines on top.
Flex-End.	Leaves down.
Center	Lines vertically in the center.
Space-Between.	Vertically aligns intra-flat elements in such a way that the first line of blocks is pressed upwards, the latter is a book, and the space between the rest is distributed evenly.
Space-around.	Vertically aligns intra-flat elements in such a way that the distance at the beginning, at the end and between them are equal to each other.
initial	It will be found in the initial value.
inherit.	The option for message CSS interpreter, which value must be taken from the parent tag.

Sample code

B-Podlogka (Height: 120px; Flex-Flow: Row Wrap; Align-Content: Stretch;)

B-Podlogka (Align-Content: Flex-Start;)

B-Podlogka (Align-Content: Flex-End;)

B-Podlogka (Align-CONTENT: CENTER;)

B-Podlogka (Align-Content: Space-Between;)

B-Podlogka (Align-Content: Space-Around;)

In addition to the rules used in relation to a container parent, there are several rules applied to the daughter elements in the flexbox grid. Consider them in more detail.

2.1. Ordering order blocks

TSss-rule is used to organize some subsidiary element inside the flex-parent. To set the block as the first, it is necessary to indicate 1, and to move it at the very end of -1. Is not inherited.

Recording format

B-Div1 (-WebKit-Order: 1; Order: 1;)

B-Div5 (-WebKit-Order: -1; Order: -1;)

2.2. Flex-Basis Flex-Basis Basis

CSS rule designed to fix the width of a subsidiary flex block inside the parent container. Set for two below the underlying parameters. It is not inherited rule.

Sample code

B-Div3 (Flex-Basis: 70px; -WebKit-Flex-Basis: 70px;)

All blocks set a basis in the amount of fifty pixels, and the third - ninety pixels.

The Align-Content property sets the type of alignment of the rows inside the Flex container in the transverse axis in the presence of free space.

It applies to: flex container.

Default value: Stretch.

Flex-Start Rows are located at the beginning of the transverse axis. Each next line goes over with the previous one. Flex-End Rows are located starting from the end of the transverse axis. Each previous line goes to the next. CENTER Rows are located in the center of the container. Space-Between Rows are evenly distributed in the container and the distance between them is equally. Space-around rows are uniformly distributed so that the space between the two adjacent rows is the same. The empty space in front of the first string and after the last row equal to half the space between the two adjacent rows. SPACE-EVENLY Rows are distributed evenly. The empty space before the first line and after the last line has the same width as other lines. Stretch strings are evenly stretched, filling free space.

The Align-Content Property Aligns A Flex CONTAINER'S LINES WITHIN THE FLEX CONTAINER'S LINES WITHIN THE FLEX SPACE IN THE CROSS-AXIS, SIMILAR TO HOW JUSTIFY-CONTENT ALIGNS INDIVIDUAL ITEMS WITHIN THE MAIN-AXIS. Note, This Property Has No Effect On A Single-Line Flex Container. Values \u200b\u200bHave The Following Meanings:

Note: ONLY MULTI-LINE FLEX CONTAINERS EVER HAVE FREE SPACE IN THE CROSS-AXIS FOR LINES TO BE ALIGNED IN, BECAUSE IN A SINGLE-LINE FLEX CONTAINER THE SOLE LINE AUTOMATICALLY STRETCHES TO FILL THE SPACE.

Applies To.: Flex Containers.

Initial: Stretch.

Flex-Start Lines Are Packed Toward The Start of The Flex Container. The Cross-Start Edge of the First Line In The Flex CONTAINER IS Placed Flush with the Cross-Start Edge of the Flex Container, and Each Subsequent Line Is Placed Flush with the Preceding Line. Flex-End Lines Are Packed Toward The End of the Flex Container. The Cross-EDGE OF THE CROSS-EDGE OF THE FLEX CONTAINER, AND EACH PRESSING LINE IS PLACED FLUSH WITH THE SUBSEQUENT LINE. CENTER LINES ARE PACKED TOWARD THE CENTER OF THE FLEX CONTAINER. The Lines In The Flex CONTAINER ARE PLACED FLUSH WITH EACH OTHER AND ALIGNED IN THE CENTER OF THE FLEX BETWEEN THE CROSS-START CONTENT EDGE OF THE FLEX CONTAINER AND THE FIST LINE IN THE FLEX CONTAINER AND BETWEEN THE Cross-End CONTENT EDGE OF THE FLEX CONTAINER AND THE LAST LINE IN THE FLEX CONTAINER. (If The Leftover Free-Space Is Negative, The Lines Will Overflow Equally In Both Directions.) Space-Between Lines Are Evenly Distributed in the Flex Container. If The Leftover Free-Space Is Negative This Value is IDENTICAL TO FLEX-START. OtherWise, The Cross-Start Edge of The First Line In The Cross-Start Content Edge of The Cross-Start Content Edge Of The Flex Container, The Cross-EDGE OF THE LAST LINE IN THE FLEX CONTAINER IS PLACED FLUSH WITH THE CROSS- End CONTENT EDGE OF THE FLEX CONTAINER, AND THE REMAINING LINES IN THE FLEX CONTAINER ARE DISTRIBUTED SO THAT THE SPACING BETWEEN Any Two Adjacent Lines Is The Same. Space-around Lines Are Evenly Distributed in the Flex Container, with Half-Size Spaces on Either End. If The Leftover Free-Space is Negative This Value Is Identical To Center. Otherwise, The Lines In The Flex CONTAINER ARE DISTRIBUTED SUCH THAT THE SPACING BETWEEN ANY TWO ADJACENT LINES IS THE SAME, AND THE SPACING BETWEEN THE FIST / LAST LINES AND THE FLEX CONTAINER EDGES IS HALF THE SIZE OF THE SPACING BETWEEN FLEX LINES. SPACE-EVENLY LINES ARE EVENLY DISTRIBUTED IN THE FLEX CONTAINER. If The Leftover Free-Space is Negative This Value Is Identical To Center. Otherwise, The Lines In The Flex CONTAINER ARE DISTRIBUTED SUCH THAT THE SPACING BETWEEN EVERY FLEX LINE IS THE SAME. Stretch Lines Stretch to Take Up the Remaining Space. If The Leftover Free-Space is Negative, This Value Is Identical To Flex-Start. Otherwise, The Free-Space IS Split Equally Between All of the Lines, Increasing Their Cross Size.

How CSS FlexBox works: Visual Introduction to the Layout Layout System on the Web page

FlexBox is designed to save us from the unpleasant moments of pure CSS (for example, from vertical alignment), and it copes perfectly with its task. But it is sometimes difficult to understand the principles of his work sometimes, especially if you are new.

The main task of FlexBox is to make layers flexible, and work with them is intuitive. To achieve this goal, it allows containers to decide how to deal with their subsidiaries, including changing their size and distance between them.

It sounds good, but let's see if it is smooth in practice. In this article we will study the 9 most popular properties of Flexbox, we will deal with what they do, and how they actually work.

Display: Flex

Here is an example of a page:

We have 4 multicolored DIVs of different sizes that are inside gray Div. Each Div has a Display: Block property. Therefore, each square takes the entire width of the line.

To start working with FlexBox, we need to make our container Flex-container. This is done like this:

#Container (Display: Flex;)

It seems to be nothing particularly changed - Divs just got into a row. But you did something really powerful. You gave your squares a cool property called "Flex-context".

FLEX DIRECTION.

The Flex container has two axes: the main axis and perpendicular to it.

By default, all items are located along the main axis: from left to right. Therefore, our squares leveled into a line when we applied Display: Flex. However, the Flex-Direction allows you to rotate the main axis.

#Container (Display: Flex; Flex-Direction: Column;)

It is important to note that Flex-Direction: Column does not level squares along the axis perpendicular to the main one. The main axis itself changes its location and is now directed from top to bottom.

There are also a couple of properties for Flex-Direction: Row-Reverse and Column-Reverse.

Justify Content

Justify Content is responsible for the alignment of elements on the main axis.

Let's return to Flex-Direction: ROW.

#Container (Display: Flex; Flex-Direction: Row; Justify-Content: Flex-Start;)

Justify Content can take 5 values:

flex-Start;
fLEX-END;
center;
sPACE-BETWEEN;
space-around.

Space-Between sets the same distance between squares, but not between the container and squares. Space-Around also sets the same distance between the squares, but now the distance between the container and squares is half the distance between the squares.

Align Items.

If Justify Content works with the main axis, Align-Items works with the axis perpendicular to the main axis.

Let's go back to the Flex-Direction: ROW and go through the Align-Items commands:

flex-Start;
fLEX-END;
center;
stretch;
baseline.

It is worth noting that for Align-Items: Stretch the height of the squares should be equal to AUTO. For Align-Items: Baseline Paragraph tags do not need to be removed, otherwise it turns out like this:

To better figure out the axis work, let's unite Justify-Content with Align-Items and see how the center alignment works for two Flex-Direction properties:

Align Self.

Align-Self allows you to align elements separately.

#Container (Align-Items: Flex-Start;) .Square # One (Align-Self: Center;) // Only This Square Will Be Centered.

Let's apply Align-Self for two squares, and for the others we apply Align-Items: Center and Flex-Direction: ROW.

Flex-Basis.

Flex-Basis is responsible for the initial size of the elements before they are changed by other FlexBox properties:

Flex-Basis affects the size of the elements along the main axis.

Let's see what happens if we change the direction of the main axis:

Note that we had to change the height of the elements. Flex-Basis can define both the height of the elements and their width depending on the direction of the axis.

Flex Grow

This property is a little more complicated.

To begin with, let's ask our squares to the same width of 120px:

By default, the FLEX-GROW value is 0. This means that the squares are forbidden to grow (hold the remaining place in the container).

Let's try to set Flex-grow equal to 1 for each square:

Squares occupied the remaining place in the container. The Flex-Grow value cancels the width value.

But there is one question here: what does Flex-Grow: 1 mean?

Let's try to set Flex-grow to 999:

And ... nothing happened. It happened because Flex-Grow accepts not absolute values, but relative.

This means that it does not matter what value from FLEX-GROW is important what it is in relation to other squares:

At first, Flex-Grow each square is 1, in the amount it turns out 6. So our container is divided into 6 parts. Each square will take 1/6 part of the available space in the container.

When the Flex-Grow of the Third Square becomes 2, the container is divided into 7 parts (1 + 1 + 2 + 1 + 1 + 1).

Now the third square occupies 2/7 spaces, the rest - 1/7.

It is worth remembering that Flex-Grow works only for the main axis (until we change its direction).

Flex Shrink

Flex-shrink - Direct opposite of Flex-Grow. It determines how square can be reduced in size.

Flex-shrink is used when items do not fit into the container.

You determine which elements should decrease in size, and which is not. By default, the Flex-shrink value for each square is 1. This means that the squares will shrink when the container will decrease.

Let Flex-Grow and Flex-Shrink equal to 1:

Now let's change the value of Flex-shrink for a third square to 0. It was forbidden to shrink, so its width will remain equal to 120px:

It is worth remembering that Flex-shrink is based on proportions. That is, if the Flex-Shrink square is 6, and the rest is 2, then this means that our square will be squeezed three times faster than others.

Flex

Flex replaces Flex-Grow, Flex-Shrink and Flex-Basis.

Default values: 0 (GROW) 1 (SHRINK) and AUTO (BASIS).

Create two squares:

Square # One (Flex: 2 1 300px;) .Square # Two (Flex: 1 2 300px;)

Both squares have the same Flex-Basis. This means that they are both will be width in 300px (container width: 600px plus margin and padding).

But when the container starts to increase in size, the first square (with a large Flex-Grow) will increase twice as fast, and the second square (with the highest Flex-Shrink) will be compressed twice as fast.

How things grow and shrink

When the first square increases, it does not get two times more than the second square, and when the second square decreases, it does not get two times less than the first. This is due to the fact that Flex-Grow and Flex-shrink are responsible for the growth rate and reduction.

A little mathematics

The initial size of the container: 640px. Letting it up on 20px on each side for padding, and we will have 600px, just for two squares.

When the width of the container becomes equal to 430px (loss in 210px), the first square (Flex-shrink: 1) loses 70px. The second square (Flex-shrink: 2) loses 140px.

When the container is compressed to 340px, we lose 300px. The first square loses 100px, the second - 200px.

The same happens with Flex-Grow.

CSS Flexbox (Flexible Box Layout Module) - The module of the flexible container layout is a method of laying elements, the basis of the axis is based on.

FlexBox consists of out flex Container (Flex Container) and flexible Items (Flex Items). Flexible elements can be built into the string or column, and the remaining free space is distributed between them in various ways.

The FlexBox module allows you to solve the following tasks:

Place elements in one of four directions: from left to right, right left, top down or bottom up.
Override the procedure for displaying elements.
Automatically determine the dimensions of the items so that they fit into the affordable space.
Solve the problem with horizontal and vertical centers.
Transfer the elements inside the container without allowing its overflow.
Create columns of the same height.
Create pressed to the bottom of the page.

FlexBox solves specific tasks - the creation of one-dimensional layouts, for example, the navigation panel, since Flex elements can be placed only on one of the axes.

List of current problems of the module and cross-browser solutions for them you can read in the PHILIP WALTON article.

What is FlexBox

Support browsers

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -Webkit-
Safari: 6.1 -Webkit-
Opera: 12.1 -Webkit
iOS Safari: 7.0 -Webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -Webkit-
Chrome for Android: 44

1. Basic concepts

Fig. 1. FlexBox model

To describe the FLEXBOX module, a specific set of terms is used. The Flex-Flow value and recording mode determine the correspondence of these terms to the physical directions: top / right / bottom / left, axes: vertical / horizontal and size: width / height.

Main Axis - The axis along which the Flex elements are laid out. It extends mainly measuring.

Main Start and Main End - Lines that define the initial and final side of the FLEX container, relative to which the Flex elements are laid out (starting with the Main Start towards Main End).

Main Size) - The width or height of the Flex container or Flex elements, depending on the fact that they are mainly measured, determine the main size of the Flex container or the Flex element.

Cross Axis - axis perpendicular to the main axis. It extends in the transverse dimension.

Cross Start and Cross End - Lines that define the initial and final side of the transverse axis relative to which the Flex elements are laid out.

CROSS SIZE) - The width or height of the Flex-container or Flex elements, depending on what is in the transverse dimension, are their transverse size.

Fig. 2. Row and column mode

2. Flex-container

Flex container sets a new flexible formatting context for its contents. The Flex container is not a block container, therefore such CSS properties such as Float, Clear, Vertical-Align do not work for child elements. Also, the Flex container does not affect the column- * properties, creating speakers in the text and pseudo-elements :: first-line and :: first-letter.

The FlexBox markup model is associated with a certain value of the CSS property of the Display of the parent HTML element containing sub-election blocks inside itself. To control the elements using this model, you need to set the Display property as follows:

Flex-Container (/ * Generates a Flex-container block * / display: -WebKit-Flex; Display: Flex;) .Flex-Container (/ * Generates a flex-container string level * / display: -WebKit-Inline-Flex; Display: INLINE-FLEX;)

After installing these properties values, each child element automatically becomes a Flex element, setting up in one row (along the main axis). In this case, block and lowercase elements behave equally, i.e. The width of the blocks is equal to the width of their contents, taking into account the inner fields and frames of the element.

Fig. 3. Alignment elements in the FlexBox model

If the parent block contains text or images without wrappers, they become anonymous Flex elements. The text is leveling over the top edge of the container block, and the height of the image becomes equal to the height of the block, i.e. It is deformed.

3. Flex-elements

Flex-elements - blocks representing the contents of the Flex container in the stream. The Flex container establishes a new formatting context for its contents, which causes the following features:

For Flex elements, their value of the Display property is blocked. DISPLAY value: inline-block; and Display: Table-Cell; calculated in Display: Block; .
The empty space between the elements disappears: it does not become its own Flex-element, even if the inter-element text is wrapped in an anonymous Flex element. For the contents of an anonymous Flex element, it is impossible to set their own styles, but it will inherit them (for example, font parameters) from the Flex container.
The absolutely positioned Flex element does not participate in the layout layout.
Margin fields adjacent Flex elements are not collapsed.
Percentage values \u200b\u200bof Margin and Padding are calculated from the internal size of the block containing them.
margin: AUTO; Expands, absorbing additional space in the appropriate measurement. They can be used to align or spread adjacent Flex elements.
The automatic minimum size of Flex elements by default is the minimum size of its contents, that is, MIN-WIDTH: Auto; . For scrolling containers, the automatic minimum size is usually zero.

4. Flex-elements and orientation

The contents of the Flex container can be decomposed in any direction and in any order (reordering the Flex elements inside the container affects only visual rendering).

4.1. Direction of the main axis: FLEX-DIRECTION

The property belongs to the Flex container. Manages the direction of the main axis, along which the Flex elements are stacked, in accordance with the current recording mode. Not inherited.

fLEX-DIRECTION.
Values:
Row	The default value from left to right (in RTL to the right left). Flex elements are laid out in the string. The beginning (Main-Start) and the end (main-end) directions of the main axis correspond to the beginning (inline-start) and an end (inline-end) of the inline axis (inline-Axis).
Row-Reverse.	Direction to the right left (in RTL left to right). Flex-elements are laid out in the string relative to the right edge of the container (in the RTL - left).
column.	Direction from top to bottom. Flex elements are laid out in the column.
Column-Reverse.	Column with elements in reverse order, bottom up.
initial
inherit.

Fig. 4. Flex-Direction property for LEFT-TO-RIGHT languages

Syntax

Flex-Container (Display: -WebKit-Flex; -WebKit-Flex-Direction: Row-Reverse; Display: Flex; Flex-Direction: Row-Reverse;)

4.2. Managing Multi-Flex Container: Flex-Wrap

The property determines whether the Flex container will be single-line or multi-line, and also sets the direction of the transverse axis, which determines the direction of laying new flex container lines.

By default, Flex elements are stacked in one line along the main axis. When overflow, they will go beyond the limit frame of the Flex container. The property is not inherited.

Fig. 5. Managing Multi-Stream Using the Flex-Wrap Properties for LTR-Languages

Syntax

Flex-Container (Display: -WebKit-Flex; -Webkit-Flex-Wrap: Wrap; Display: Flex; Flex-Wrap: Wrap;)

4.3. Summary of Direction and Multiplay: Flex-Flow

The property allows you to determine the directions of the main and transverse axes, as well as the possibility of transferring Flex elements if necessary for several lines. It is an abbreviated recording of the Flex-Direction and Flex-Wrap properties. The default value is Flex-Flow: Row Nowrap; . The property is not inherited.

Syntax

Flex-Container (Display: -WebKit-Flex; -Webkit-Flex-Flow: Row Wrap; Display: Flex; Flex-Flow: Row Wrap;)

4.4. Flex Element Display Order: ORDER

The property determines the order in which Flex elements are displayed and located inside the Flex container. Applies to Flex-elements. The property is not inherited.

Initially, all Flex elements have order: 0; . When specifying the value from -1 for the element, it moves to the beginning of the time, value 1 - to the end. If several Flex elements have the same order value, they will be displayed in accordance with the original order.

Syntax

Flex-Container (Display: -WebKit-Flex; Display: Flex;) .flex-item (-WebKit-Order: 1; Order: 1;)
Fig. 6. Flex-elements display order

5. Flexible Flex Elements

The determining aspect of a flexible layout is the ability to "bend" Flex-elements, changing their width / height (depending on which size is on the main axis) to fill out the available space in the main dimension. This is done using the Flex property. The Flex container distributes the free space between its child elements (in proportion to their Flex-Grow coefficient) to fill the container or compresses them (in proportion to the Flex-Shrink coefficient) to prevent overflow.

The Flex element will be completely "inflexible" if its Flex-Grow and Flex-shrink values \u200b\u200bare zero, and "flexible" otherwise.

5.1. Set of flexible sizes with one property: Flex

The property is an abbreviated record of the Flex-Grow-Grow, Flex-Shrink and Flex-Basis properties. Default value: Flex: 0 1 AUTO; . You can specify both one and all three properties. The property is not inherited.

Syntax

Flex-Container (Display: -WebKit-Flex; Display: Flex;) .flex-item (-WebKit-Flex: 3 1 100px; -ms-Flex: 3 1 100px; Flex: 3 1 100px;)

5.2. Growth coefficient: Flex-Grow

The property determines the growth coefficient of one Flex-element relative to other Flex elements in the Flex container during the distribution of positive free space. If the sum of the values \u200b\u200bof Flex-Grow Flex elements in the string is less than 1, they occupy less than 100% of the free space. The property is not inherited.

Fig. 7. Management of free space in the navigation pane using Flex-Grow

Syntax

Flex-Container (Display: -Webkit-Flex; Display: Flex;) .flex-item (-WebKit-Flex-Grow: 3; Flex-Grow: 3;)

5.3. Compression ratio: Flex-shrink

The property indicates the compression coefficient of the Flex element relative to other Flex elements during the distribution of negative free space. Is multiplied by the basic size of Flex-Basis. The negative space is distributed in proportion to how much the element can be gripped, therefore, for example, a small Flex element will not decrease to zero until the Flex element of the larger size is noticeably reduced. The property is not inherited.

Fig. 8. The narrowing of the Flex elements in the string

Syntax

Flex-Container (Display: -Webkit-Flex; Display: Flex;) .flex-item (-Webkit-Flex-shrink: 3; Flex-shrink: 3;)

5.4. Basic Size: Flex-Basis

The property sets the initial main size of the Flex element before the distribution of free space in accordance with flexibility coefficients. For all values, except for Auto and Content, the basic flexible size is defined as well as Width in horizontal recording modes. Percentage values \u200b\u200bare determined relative to the size of the Flex container, and if the size is not specified, the value used for Flex-BASIS is the size of its contents. Not inherited.

Syntax

Flex-Container (Display: -WebKit-Flex; Display: Flex;) .flex-Item (-WebKit-Flex-Basis: 100px; Flex-Basis: 100px;)

6. Alignment

6.1. Alignment on the main axis: Justify-Content

The property aligns the Flex elements along the main axis of the Flex-container, distributing the free space, unoccupied by Flex elements. When the item is converted to a Flex container, the default Flex elements are grouped together (if the margin field is not specified). The gaps are added after calculating the values \u200b\u200bof Margin and Flex-Grow. If any elements have a non-zero value of Flex-Grow or Margin: Auto; The property will not have any influence. The property is not inherited.


Values:
Flex-Start.	The default value. Flex-elements are laid out in the direction coming from the initial line of the Flex container.
Flex-End.	Flex-elements are laid out in the direction coming from the final line of the FLEX container.
Center	Flex elements are aligned in the center of the Flex container.
Space-Between.	Flex elements are uniformly distributed over the line. The first Flex-element is placed in the edge of the initial line, the last Flex element is to flush with the edge of the final line, and the remaining Flex elements on the line are distributed so that the distance between any two adjacent elements is the same. If the remaining free space is negatively or in the string there is only one Flex element, this value is identical to the Flex-Start parameter.
Space-around.	Flex-elements on the lines are distributed so that the distance between any two adjacent Flex elements is the same, and the distance between the first / last Flex elements and the edges of the Flex container ranged from the distance between the Flex elements.
initial	Sets the default property value.
inherit.	Inherits the value of the property from the parent element.

Fig. 9. Alignment of elements and distribution of free space using the Justify-Content Properties

Syntax

Flex-Container (Display: -Webkit-Flex; -WebKit-Justify-Content: Flex-Start; Display: Flex; Justify-Content: Flex-start;)

6.2. Align the transverse axis: Align-Items and Align-Self

Flex elements can be aligned on the transverse axis of the current line of the Flex container. Align-Items sets alignment for all Flex-container elements, including anonymous Flex elements. Align-Self allows you to override this alignment for individual Flex elements. If any of the transverse margin Flex element is AUTO, Align-Self has no effect.

6.2.1. Align-Items.

The property aligns Flex elements, including anonymous Flex elements on the transverse axis. Not inherited.


Values:
Flex-Start.
Flex-End.
Center
Baseline	The basic lines of all Flex elements involved in alignment coincide.
Stretch.
initial	Sets the default property value.
inherit.	Inherits the value of the property from the parent element.

Fig. 10. Alignment of elements in a vertical container

Syntax

Flex-Container (Display: -WebKit-Flex; -WebKit-Align-Items: Flex-Start; Display: Flex; Align-Items: Flex-start;)

6.2.2. Align-Self.

The property is responsible for the alignment of a separate Flex element in the height of the Flex-container. Overrides the alignment specified by Align-Items. Not inherited.


Values:
AUTO.	The default value. The Flex element uses the alignment specified in the Align-Items Flex container property.
Flex-Start.	The top edge of the Flex element is placed closely with the Flex line (or at a distance, taking into account the specified margin fields and the element border framework) passing through the beginning of the transverse axis.
Flex-End.	The lower edge of the Flex element is placed closely with the Flex line (or at a distance, taking into account the specified margin fields and the element border framework) passing through the end of the transverse axis.
Center	Flex element fields are centered on the transverse axis within the Flex line.
Baseline	The Flex element is aligned with the baseline.
Stretch.	If the transverse size of the Flex element is calculated as AUTO and none of the transverse values \u200b\u200bof the Margin is not equal to AUTO, the element is stretched. The default value.
initial	Sets the default property value.
inherit.	Inherits the value of the property from the parent element.

Fig. 11. Alignment of individual FLEX elements

Syntax

Flex-Container (Display: -WebKit-Flex; Display: Flex;) .flex-item (-WebKit-Align-Self: Center; Align-Self: Center;)

6.3. Flex container lines: Align-Content

The property lines the lines in the Flex container if there is an additional space on the transverse axis, similar to the alignment of individual elements on the main axis using the Justify-Content property. The property does not affect the single-line Flex container. Not inherited.


Values:
Flex-Start.	Rows are stored towards the beginning of the Flex container. The edge of the first line is placed close to the edge of the Flex-container, each subsequent - close to the previous line.
Flex-End.	Rows are laid towards the end of the Flex container. The edge of the last row is placed close to the edge of the Flex-container, each previous one - close to the subsequent row.
Center	Rows are stored towards the center of the Flex container. Rows are located close to each other and aligned in the center of the Flex-container with an equal distance between the initial edge of the contents of the Flex container and the first string and between the final edge of the contents of the Flex container and the last string.
Space-Between.	Rows are uniformly distributed in the Flex container. If the remaining free space is negative or the Flex container has only one Flex line, this value is identical to Flex-Start. Otherwise, the edge of the first line is placed close to the initial edge of the contents of the Flex-container, the edge of the last row is close to the final edge of the content of the Flex container. The remaining lines are distributed so that the distance between any two adjacent rows is the same.
Space-around.	Rows are uniformly distributed in the Flex container with a half space at both ends. If the remaining free space is negative, this value is identical to the center center. Otherwise, the strings are distributed in such a way that the distance between any two adjacent rows is the same, and the distance between the first / last rows and the edges of the contents of the Flex container ranged from the distance between the lines.
Stretch.	The default value. Rows of Flex elements are evenly stretched, filling out all available space. If the remaining free space is negative, this value is identical to Flex-Start. Otherwise, the free space will be divided equally between all rows, increasing their transverse size.
initial	Sets the default property value.
inherit.	Inherits the value of the property from the parent element.

Fig. 12. Multi-line alignment of FLEX elements

Syntax

Flex-Container (Display: -WebKit-Flex; -WebKit-Flex-Flow: Row Wrap; -WebKit-Align-Content: Flex-End; Display: Flex; Flex-Flow: Row Wrap; Align-Content: Flex-End ; Height: 100px;)