CSS3 Flexbox (Telescopic box/Elastic box Model) Visualization guide

In the http://css.doyoe.com/(CSS Reference manual), this article corresponds to the telescopic box

introduced

Flexbox layout officially known as the CSS flexible Box layout module is a CSS3 new layout block that implements the alignment, orientation, and ordering of items in the container (even in case of project size, dynamic generation). The biggest feature of the Flex container is the ability to modify the width and height of the child elements to fit the ideal distribution under different screen sizes.

Many designers, developers find that flexbox layouts are simple to use, simpler to locate elements, and more complex layouts that are easier to implement with less code, greatly simplifying the development process. Unlike block layouts, inline layouts, which are based on vertical and horizontal orientations, the Flexbox layout algorithm is based on direction. The Flexbox layout is suitable for small application components, and the new CSS grid layout module is more suitable for a large number of layouts.

This guide does not explain how flex properties work, we just visually demonstrate how flex properties affect layouts.

Basic

Before describing the flex properties, let's briefly introduce the next Flexbox model. The flex layout consists of the parent container (which we call Flex container) and its child elements (what we call Flex items).

In the box shown, you can see the properties and terminology used to describe flex container and flex items, and if you want to learn more, visit the Flexbox Model official documentation.

Flexbox has undergone several updates and grammatical changes since the initial draft of 2009, and in order to avoid confusion and ensure clarity, we only use the syntax in the last working draft of September 2014. If you want to achieve compatibility with older browsers, visit this article to find best practices.

The most recent Flexbox spec browser support is as follows:

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with-webkit-)
• Android 4.4+
• IOS 7.1+ (prefixed with-webkit-)

You can also go to Caniuse to learn more about browser compatibility.

Some of the terms used in this article are expressed in the following conventions

1. flex-container-Elastic Container
2. flex-item-Elastic Sub-elements
3. Main axis-Spindle
4. Cross axis-side shafts

Use

Using Flexbox, you only need to set the display property on the parent element.

{  display: -webkit-flex/**/  display: Flex ;}

If you want to display it inline,

{  display: -webkit-inline-flex/** *   Display: inline-flex;}

Note : You only need to set this property on the parent element, and its child elements will automatically become flex items.

There are many ways to group all of the properties of Flexbox, and I find that the easiest way to understand it is to divide it into two groups, one for the properties of the elastic container and one for the properties of the elastic child element, which we will then one by one parse in this way.

Elastic container (Flex container) Properties flex-direction

This property affects how the child elements (Flex item) are arranged in the container by setting the Flex container primary axis direction. We can set the two main directions horizontally and vertically.

The acceptable values are four row, Row-reverse, column, Column-reverse, as shown below.

{  -webkit-flex-direction: row/**/  flex-direction :         row;}

The elastic child elements will be arranged horizontally from left to right.

{  -webkit-flex-direction: row-reverse*/**   Flex-direction:         row-reverse;}

The elastic child elements are arranged horizontally from right to left.

{  -webkit-flex-direction: column/**   / Flex-direction:         column;}

Elastic child elements are arranged vertically from top to bottom

{  -webkit-flex-direction: column-reverse*/**   Flex-direction:         column-reverse;}

Elastic sub-elements are arranged vertically from the bottom up

The default value is row .
note that row and Row-reverse are based on the writing order, so they will be reversed in the rtl environment.

Flex-wrap

Flexbox's original idea was to keep the child elements of the elastic container in one line. The flex-wrap properties control when the child element items exceeds the elastic container range is whether the line wraps, and the direction of the new line.

This property can accept several values: No-wrap, WRAP, Wrap-reverse, respectively, as shown below.

{  -webkit-flex-wrap: nowrap*/**/  flex-wrap:          NoWrap;}

The flex child element will be displayed on one line, and the default child elements items will be reduced to fit the width of the elastic container.

{  -webkit-flex-wrap: wrap*/*/  Flex-wrap :         wrap;}

If necessary, the flex element will be displayed from left to right and top to bottom .

{  -webkit-flex-wrap: wrap-reverse*/**/  flex-wrap:          wrap-reverse;}

If necessary, the flex element will be displayed from left to right and from bottom to top .

The default value is no-wrap .
Note that these properties are also based on the writing order, so the rtl environment will be reversed.

Flex-flow

flex-flowproperty is flex-direction a flex-wrap shortcut to a property, and a composite property.

{  -webkit-flex-flow: <flex-direction> | | <flex-wrap>/**    flex-flow:         <flex-direction> | | <flex-wrap>;}

The default value is row nowrap .

justify-content

justify-contentSets the alignment of the primary coordinate of the current row of the elastic child element in the elastic container, which assists in allocating extra space when all child elements on a row in the elastic container cannot be scaled or have reached their maximum value.

The acceptable values are five values Flex-start, Flex-end, center, Space-between, Space-around, and so on, with the default value flex-start . The details are shown below.

{  -webkit-justify-content: flex-start*/**   Justify-content:         flex-start;}

In the ltr environment, flex Sub-elements will be left-aligned in the elastic container.

{  -webkit-justify-content: flex-end*/**   Justify-content:         flex-end;}

In the ltr environment, flex Sub-elements will align to the right of the elastic container.

{  -webkit-justify-content: Center/**   / Justify-content:         center;}

The flex items will be centered in the elastic container.

{  -webkit-justify-content: space-between*/**   justify-content:         space-between;}

Elastic child elements Flex items in the first, last aligned elastic container edges, and the rest are evenly distributed .

{  -webkit-justify-content: space-around*/**   Justify-content:         space-around;}

Elastic sub-elements any one of the flex items participates in a homogeneous distribution , even the first and last.

Align-items

align-itemsSets the alignment of the flex child element on the current row side axis in the elastic container, justify-content similar to but acting on the side axis (Flex-direction is the vertical axis when row and Row-reverse, Flex is column and column-reverse when the horizontal axis). This property sets the default alignment for all Flex items, which contains an anonymous item.

The acceptable values are five values Flex-start, Flex-end, center, Baseline, stretch, and so on, and the default value is stretch. The details are shown below.

{  -webkit-align-items: stretch*/**/  align-items:          stretch;}

The elastic sub-elements will start at the end of the side axis and fill the entire height (width).

{  -webkit-align-items: flex-start*/**   Align-items:         flex-start;}

The elastic child elements will be stacked at the start of the side axis of the elastic container.

{  -webkit-align-items: flex-end*/**/  align-items:          flex-end;}

The elastic child elements will be stacked at the end of the side axis of the elastic container.

{  -webkit-align-items: Center/**   / Align-items:         center;}

The elastic child elements will be stacked in the middle of the side axis of the elastic container.

{  -webkit-align-items: baseline*/**/  align-items:          baseline;}

The elastic child elements will be aligned in the form of a text baseline.

note that more details about baseline calculations are here.

align-content

When there is white space in the side axis of the elastic container, the property sets the alignment of the align-content retractable row, just as it justify-content is set on the spindle.

The values that are acceptable are: stretch, Flex-start, Flex-end, center, Space-between, Space-around, and so on, with the default value of stretch.

{  -webkit-align-content: stretch*/* */  align-content :         stretch;}

The lines divide the remaining space evenly.

{  -webkit-align-content: flex-start*/**   Align-content:         flex-start;}

The stack of rows is adjacent to the start boundary of the side axis.

{  -webkit-align-content: flex-end*/* */  align-content :         flex-end;}

The stack of rows is adjacent to the end boundary of the side axis.

{  -webkit-align-content: Center/**   / Align-content:         center;}

Each row stack is centered on the side axis.

{  -webkit-align-content: space-between*/**   Align-content:         space-between;}

Spaces are evenly spaced between lines, with the first and last lines immediately adjacent to the edge of the side axis.

{  -webkit-align-content: space-around*/**   align-content:         space-around;}

The rows are evenly spaced in the elastic box, and the ends retain half the space between the child elements and the child elements.

Attention

• This property is used only for cases where there are multiple rows in the elastic container, and if there is only one single row, the property is invalid. Other than that.

• The "line" above refers to the parallel data in the direction of the spindle, for example, when the Flex-direction value is row, Row-reverse, and the value is column, and the exponent is column-reverse.

Precautions

• All column- properties are not valid for elastic containers
• ::first-lineand ::first-letter pseudo-objects are not valid for resilient containers

Elastic child Element (Flex Item) property Order

The Order property controls the ordering of lining elements in the Flex container, which is arranged by default in the order in which they are added in the elastic container.

The acceptable value is an integer number, and the default value is 0.

{  -webkit-order: <integer>/** *  Order :         <integer>;}

The elastic child elements will be arranged according to the given number, as shown in.

Flex-grow

This property sets the extension ratio (flex-grow) of the elastic child element, which determines the extended size of a child element relative to other ordinary child elements.

Acceptable values are numbers, the default is 0, and negative numbers are not valid.

{  -webkit-flex-grow: <number>/**/  flex-grow :         <number>;}

If all of the elastic child elements have equal flex-grow values, then all child elements will have the same size.

The second element can be relatively large, as shown in.

Flex-shrink

This property sets the shrinkage ratio (flex-shrink) of the elastic child element, which determines the shrinking size of a child element relative to other ordinary child elements.

{  -webkit-flex-shrink: <number>/**/  Flex-shrink :         <number>;}

By default, all child elements can be shrunk, and if set to 0, they do not shrink.

flex-basis

This property specifies the default size value before the flex child element is scaled, equivalent to the width and height properties.

{  -webkit-flex-basis: Auto | <width>/**   flex-basis:         Auto | <width>;}

Acceptable values are numeric, percent, and auto, with the default value auto (
No specific width value, depending on other properties).

As shown, we set the width value of the fourth child element.

Note that new keywords may be introduced in the future.

Flex

This property is flex-grow, flex-shrink the flex-basis compound property of the and property, in a shorthand manner.

{  -webkit-flex: none | auto | [<flex-grow> <flex-shrink>? | | <flex-basis>] /*  */  flex:         none | auto | [<flex-grow> <flex-shrink>? | | <flex-basis>];}

The default value is: 0 1 Auto.

Note that it is recommended to use composite properties, because the way composite properties can easily reset properties that do not specify a specific value to accommodate most general applications.

align-self

align-selfAllows independent elastic child elements to override the default alignment setting (Align-items) of the elastic container. Everyone to the Align-items section gets different ways to behave differently.

{  -webkit-align-self: Auto | flex-start | flex-end | center | baseline | stretch*/*/  align-self:         Auto | flex-start | flex-end | center | baseline | stretch;}

The default value is auto.

The third and fourth elastic child elements will align-self override the default alignment using properties.

Note:the value of Auto for align-self computes to the value of Align-items on the element ' s parent, or stretch if the ele ment has no parent.

Note that algin-self when you specify auto, the properties of the elastic container are used, align-items or the Stretch property is used if there is no parent object.

Note

• float, clear and vertical-align not valid for flex item.

flexbox Experimental Field

The original experimental field angular address was the wall, I fork under the revised, please study online, or to GitHub focus on the original project.

CSS3 Flexbox (Telescopic box/Elastic box Model) Visualization guide