CSS Flex Layouts

1. Introduction 1.1 Description

The flex layout, also known as Flex flexible layout, is primarily designed to have the width and height of the item fill the free space of the parent container in a certain order.

Example

Note : In the following section, the parent container is referred to as an item in the container.

1.2 Browser support conditions

IE 11 does not fully support the Flex layout scheme, in IE 10 CSS can use the-ms-prefix to support a partial flex layout, but only use the old Flex layout properties: CSS Flexible Box layout Module (Syntax)

Ie	Edge	Firefox	Chrome	Android Chrome	Ios Safari
11 10-ms-	All	28 18-moz-	29 21-webkit-	All	All

2. Flex properties that can be used by the parent container

Go directly to the topic and first describe the properties that the parent container can use with Flex layout.

2.1 Display:flex | Inline-flex

To create a flex container, you must set the Display property in the parent container style to flex or Inline-flex.

. parent {    Display:flex;/* or Inline-flex */}

2.2 Flex-direction

Description : Sets the orientation of the item display.

Syntax :

Row default : Item is displayed on one line, from left to right.

row-reverse: item appears on one line, from right to left.

Column: Item is displayed in a column, from top to bottom.

column-reverse: Item is displayed in a column, from bottom to top.

Example :

2.3 Flex-wrap

Description : Sets the way in which line breaks appear when item is not displayed on a single line.

scene : The sum of the item's width is greater than the width of the parent container.

Syntax :

Flex-wrap:nowrap | Wrap | Wrap-reverse;

nowrap Default value : item does not wrap.

Wrap: Displays in the width of the item itself, or a line if the current line is not displayed.

wrap-reverse: With wrap, it's just a line in the opposite direction to show item.

Example :

2.4 Flex-flow

description : Flex-direction flex-wrap Shorthand method

Syntax :

Flex-flow:flex-direction Flex-wrap;

Default value : Row nowrap

2.5 Setting item-aligned properties

Description : The properties of the parent container that control the alignment of item are justify-content, Align-items, Align-content.

justify-content: Controls the alignment of all item on main axis (spindle).

align-items: Controls the alignment of all item in cross axis.

align-content: Controls the alignment of item on cross axis (intersection) when flex-wrap:wrap* (that is, the item wrapping arrangement).

Main axis (spindle) and cross axis (crossover axis)

main axis: refers to the axis that is consistent with the value set by the flex-direction, such as flex-direction:row; then the spindle is the horizontal axis.

Cross axis: an axis that crosses the main axis (spindle), such as a horizontal axis, and a longitudinal axis.

The head and tail of the shaft

Main-start: The head of main axis (spindle).

main-end: The tail of main axis (spindle).

Cross-start: The head of cross axis (crossover axis).

cross-end: The tail of cross axis (crossover axis).

1) justify-content

Description : Controls the alignment of all item on main axis (spindle).

Syntax :

Justify-content:flex-start | Flex-end | Center | Space-between | Space-around;

Flex-start Default value : Item starts with the head of main axis (spindle).

flex-end: Item starts at the tail end of main axis (spindle).

Center: Item is displayed centered on main axis (spindle).

space-between: Item is evenly distributed on main axis (spindle), where the first one is on the head of main axis (spindle), and the last one is at the rear of main axis (spindle).

space-around: Item is distributed on main axis (spindle). The left and right intervals for each item are equal. If each item is spaced around 15px, the 1th item starts at the beginning of the interval 15px, and 1th with the 2nd item interval 30px.

space-evenly: Item is evenly distributed on the main axis (spindle).

Example :

reference : Mdn:aligning Items in a Flex Container

2) Align-items

Description : Controls the alignment of all item in cross axis.

Syntax :

Align-items:flex-start | Flex-end | Center | Baseline | Stretch

Stretch Default value : item height is stretched to the entire cross axis (crossover axis).

Flex-start: The item header is aligned at the beginning of the cross axis (intersection axis).

flex-end: The item tail is aligned at the end of cross axis (intersection axis).

Center: item is centered vertically.

Baseline: Aligns according to the content baseline.

Example :

3) Align-content

Description : Controls the alignment of item on cross axis curves when flex-wrap:wrap* (that is, item wrapping arrangement).

Syntax :

Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch

Stretch Default value : item height is stretched to the entire cross axis (crossover axis).

Flex-start: The item header is aligned at the beginning of the cross axis (intersection axis).

flex-end: The item tail is aligned at the end of cross axis (intersection axis).

Center: item is centered vertically.

space-between: Item is evenly distributed across cross axis (crossover axis), where the first one is on the cross axis (crossover axis) head and the last one at Cross axis (crossover axis).

space-around: Item is distributed on Cross axis (crossover axis). The upper and lower intervals for each item are equal: If each item is spaced up to 15px, the 1th item starts at the beginning of the interval 15px, and the 1th with the 2nd item interval 30px.

Example :

3. The Flex property that the item can use 3.1 The default width, height of item

Before you learn the flex properties that can be used with item, first know the width and height of item by default, as an example of parent container Flex-direction:row :

1) When the parent container is set to height, and item is not set, the height of item fills the parent container's height. Because by default, the style for the parent setting item is Align-items:stretch.

2) The parent container is not set to height, an item has a height, and the height of the other item is equal to the maximum height in item.

3) The parent container and item are not set Height,item will set height based on the content size, and the height of the other item will be equal to the maximum height in item.

3.2 Order

description : By default, item is sorted in the order of HTML code. The Order property, however, controls how the item is presented in the parent container.

Syntax :

/**/

reference : mdn:ordering Flex Items

3.3 Flex-basis

Description : Sets the initialization size of item.

Syntax :

Flex-basis:number | Auto

Auto Default value : Based on the size of the content area setting.

Number: can be specific numbers or percentages.

3.4 Flex-grow

Description : Specifies the proportion of the remaining space occupied by the item, and the remaining space percentage of the current item = Current.flex-grow/alli.flex-grow.

Syntax :

/**/

Number Default 0: Specifies how the item partitions the remaining space.

3.5 Flex-shrink

Description : The percentage of item reduction

Syntax :

/**/

Number: Default 1;

3.6 Flex

description : Flex-grow flex-shrink flex-basis Shorthand method

Syntax :

Flex:flex-grow Flex-shrink flex-basis;

default value : 0 1 Auto

4. DEMO

5. Using Scene 5.1 adaptive layout

Description : The specified item can be changed along with the size of the parent container.

Example :

. parent {    Position:absolute;    Display:flex;    width:100%;    height:100%;} . Left {    width:200px;    height:100%;    Background-color: #72e4a0;} . right {    flex:1;/* or flex-grow:1 */    height:100%;    Background-color: #9dc3e6;}

5.2 Center Layout

description : Includes horizontal centering, vertical centering, and horizontal vertical centering.

example : Horizontal vertical centering

. Parent {width:200px;height:100px;position:relative;background-color: #374858;}. Item {width:100px;height:50px;background-color: #9dc3e6;}. parent {    Display:flex;    Justify-content:center;    Align-items:center;}

6. References

W3Schools CSS Flex property:https://www.w3schools.com/cssref/css3_pr_flex.asp

A Complete Guide to flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS Flexible Box layout:https://www.w3.org/tr/css-flexbox-1/

MDN Flexbox:https://developer.mozilla.org/en-us/docs/web/css/css_flexible_box_layout/basic_concepts_of_flexbox

CSS Flex Layouts