flexbox-layout.md

Flex layout

?> Background：:point_right: flex, flex layout concept

The Flex layout is called CSS Flexible Box Layout Module. It is a new page layout solution proposed by W3C. The first version was released in 2009. Up to now, W3C has released 12 versions, latest version was launched in 20171019 and has been supported by all major browsers, so please use it boldly ~

Historic version:

https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/
https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/
https://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
https://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/
https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/
https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
https://www.w3.org/TR/2011/WD-css3-flexbox-20111129/
https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

Flexbox principle demonstration

A Visual Guide to CSS3 Flexbox Properties

**Thank：**The above demo forks from xluos的Flexbox Demo Station~

The Flex layout consists of two parts: the container flex container and the item flex item. The container has two axes by default: the horizontal spindle main axis and the vertical cross axis cross axis. The iterm defaults to the main axis. The Flex property consists of two parts: the container property and the project property. The container can be set to: flex-direction, flex-wrap, flex-grow, justify-content, align-items, align-content 6 attributes, six attributes can also be set on the item: order, flex-grow, flex-shrink, flex-basis, flex, align-self. An example is as follows:

Container properties

---

flex-direction property

function： determines the direction of the main axis.

flex-direction: row | row-reverse | column | column-reverse;

• row: The default value, the main axis is horizontal, indicating from left to right
• row-reverse: The main axis is horizontal, indicating from right to left
• column: The main axis is in the vertical direction, arranged from top to bottom
• column-reverse: The spindle is in the vertical direction, arranged from bottom to top

<script v-pre type="text/x-template" id="flexDirection"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; flex-direction: row; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{ radio.value }}

<script> export default { data() { return { elements: Array.from({ length: 5 }).map((v, i) => i + 1), radios: [ { id: 'row', value: 'row' }, { id: 'row-reverse', value: 'row-reverse' }, { id: 'column', value: 'column' }, { id: 'column-reverse', value: 'column-reverse' }, ], flexDirection: 'row', } }, methods: { handleSelected(dir) { this.flexDirection = dir; } } } </script> </script>

flex-wrap property

function: Decide how the item will wrap when it is not aligned on one axis.

flex-wrap: nowrap | wrap | wrap-reverse;

• nowrap: default value，not wrap
• wrap: wrap, the first line is above
• row-reverse: wrap, the first line is below

<script v-pre type="text/x-template" id="flexWrap"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; flex-wrap: nowrap; } .item { width: 20%; height: 29px; max-width: 155px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{ radio.value }}

<script> export default { data() { return { elements: Array.from({ length: 6 }).map((v, i) => i + 1), radios: [ { id: 'nowrap', value: 'nowrap' }, { id: 'wrap', value: 'wrap' }, { id: 'wrap-reverse', value: 'wrap-reverse' }, ], flexWrap: 'nowrap', } }, methods: { handleSelected(dir) { this.flexWrap = dir; } } } </script> </script>

flex-glow property

function: The abbreviation of flex-direction and flex-wrap properties, The default value is row nowrap

flex-wrap: <flex-direction> || <flex-wrap>;

• row nowrap: The default value, the main axis is horizontal, not wrap
• <flex-direction>: see flex-direction
• <flex-wrap>: see flex-wrap

justify-content property

function: Define the alignment of the project on the spindle.

justify-content: flex-start | flex-end | center | space-between | space-round | space-evenly;

• flex-start: Default value, left aligned
• flex-end: Right aligned
• center: Centered
• space-evenly: The interval between each item and at both ends is equal
• space-around: Equal spacing on both sides of each item
• space-between: Aligned ends, the items are equally spaced

<script v-pre type="text/x-template" id="justifyContent"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; justify-content: flex-start; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{ radio.value }}

<script> export default { data () { return { elements: Array.from({ length: 3 }).map((v, i) => i + 1), radios: [ { id: 'flex-start', value: 'flex-start' }, { id: 'flex-end', value: 'flex-end' }, { id: 'center', value: 'center' }, { id: 'space-evenly', value: 'space-evenly' }, { id: 'space-around', value: 'space-around' }, { id: 'space-between', value: 'space-between' }, ], justifyContent: 'flex-start', } }, methods: { handleSelected(dir) { this.justifyContent = dir; } } } </script> </script>

align-items property

function: Defines the alignment of the item on the cross axis (the default direction is from top to bottom).

align-items: flex-start | flex-end | center | baseline | stretch;

• flex-start: Starting point alignment of the cross axis
• flex-end: End point alignment of the cross axis
• center: center alignment of the cross axis
• baseline: Baseline alignment of the first line of text in the project
• stretch: The default value, when the item is not set to a fixed height, will fill the entire container

<script v-pre type="text/x-template" id="alignItems"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; align-items: stretch; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{ radio.value }}

<script> export default { data () { return { elements: Array.from({ length: 5 }).map((v, i) => i + 1), radios: [ { id: 'flex-start', value: 'flex-start' }, { id: 'flex-end', value: 'flex-end' }, { id: 'center', value: 'center' }, { id: 'baseline', value: 'baseline' }, { id: 'stretch', value: 'stretch' }, ], alignItems: 'stretch', } }, methods: { handleSelected(dir) { this.alignItems = dir; } } } </script> </script>

align-content property

function: Defines the alignment of multiple axes. This property does not work if the project has only one axis.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• flex-start: Starting point alignment of the cross axis
• flex-end: End point alignment of the cross axis
• center: Center alignment of the cross axis
• space-between: Aligned with the ends of the cross shaft, the average spacing between the axes, etc.
• space-around: The spacing between the sides of each axis is equal
• stretch：Default, the axis fills the entire cross axis

<script v-pre type="text/x-template" id="alignContent"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { height: 399px; display: flex; flex-wrap: wrap; align-content: stretch; } .item { width: 20%; height: 29px; max-width: 155px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{ radio.value }}

<script> export default { data () { return { elements: Array.from({ length: 15 }).map((v, i) => i + 1), radios: [ { id: 'flex-start', value: 'flex-start' }, { id: 'flex-end', value: 'flex-end' }, { id: 'center', value: 'center' }, { id: 'space-between', value: 'space-between' }, { id: 'space-around', value: 'space-around' }, { id: 'stretch', value: 'stretch' }, ], alignContent: 'stretch', } }, methods: { handleSelected(dir) { this.alignContent = dir; } } } </script> </script>

Iterm Properties

---

order property

function: Define the order in which the items are arranged.

order: <number>;

• <number> : The value is an integer. The smaller the value, the higher the ranking. The default is 0.

<script v-pre type="text/x-template" id="order"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; text-align: center; padding-top: 4px; } </style> 👉🏿🔀: {{ res }}

order: {{ $.order }}

<script> export default { data() { return { elements: [ { id: 1, order: 1 }, { id: 2, order: 2 }, { id: 3, order: 3 }, { id: 4, order: 4 }, { id: 5, order: 5 }, ], res: 0, } }, methods: { shuffle() { const i = Math.floor(Math.random() * 5); this.res = this.elements[i].order = Math.floor(Math.random() * 29); } } } </script> </script>

flex-grow property

function: Define the scale of the project and allocate space to the project according to the ratio.

flex-grow: <number>;

• <number> : The value is an integer. The larger the value, the larger the space occupied by the project. The default is 0.

<script v-pre type="text/x-template" id="flexGrow"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; } .item { height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; text-align: center; padding-top: 4px; } </style> 👉🏿🔀: {{ res }}

flexGrow: {{ $.flexGrow }}

<script> export default { data() { return { elements: [ { id: 1, flexGrow: 1 }, { id: 2, flexGrow: 1 }, { id: 3, flexGrow: 1 }, { id: 4, flexGrow: 1 }, { id: 5, flexGrow: 1 }, ], res: 1, } }, methods: { shuffle() { const i = Math.floor(Math.random() * 5); this.res = this.elements[i].flexGrow = Math.floor(Math.random() * 29); } } } </script> </script>

flex-shrink property

function: Define the contraction ratio of the project and allocate space to the project according to the ratio.

flex-shrink: <number>;

• <number> : The value is an integer. The larger the value, the smaller the space occupied by the item. The default is 0.

<script v-pre type="text/x-template" id="flexShrink"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; } .item { width: 50%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; text-align: center; padding-top: 4px; } </style> 👉🏿🔀: {{ res }}

flexShrink: {{ $.flexShrink }}

<script> export default { data () { return { elements: [ { id: 1, flexShrink: 0 }, { id: 2, flexShrink: 1 }, { id: 3, flexShrink: 2 }, ], res: 1, } }, methods: { shuffle() { const i = Math.floor(Math.random() * 3); this.res = this.elements[i].flexShrink = Math.floor(Math.random() * 4); } } } </script> </script>

flex-basis property

function: Defines the spindle space occupied by the project before allocating excess space. Based on this property, the browser calculates whether the spindle has extra space.

flex-basis: <length> | auto;

• <length> : The default is auto, which is the original size of the project; you can also set the same value as the width or height properties (such as 329px), the project will occupy a fixed space.

<script v-pre type="text/x-template" id="flexBasis"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; } .item { width: 30%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; text-align: center; padding-top: 4px; } </style> 👉🏿🔀: {{ res }}

flexBasis: {{ $.flexBasis }}

<script> export default { data () { return { elements: [ { id: 1, flexBasis: 'auto' }, { id: 2, flexBasis: 'auto' }, { id: 3, flexBasis: 'auto' }, ], res: 1, } }, methods: { shuffle() { const i = Math.floor(Math.random() * 3); this.res = this.elements[i].flexBasis = 129 + Math.floor(Math.random() * 300); } } } </script> </script>

flex property 👍

function: The abbreviation of the flex-grow,flex-shrink and flex-basis properties. The later two properties are optional.

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

• 0 1 auto: default value, no scaling, proportional shrink if container space is insufficient
• 1 1 auto: Corresponding to the keyword auto, if the container space is redundant, the extra space is allocated proportionally; if the container space is insufficient, the scale is shrinking.
• 0 0 auto: Corresponding to the keyword none, allocate space by the original size of the project

align-self property

function: Define the alignment of individual items to override the align-items property.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

• auto: The default value, which inherits the align-items attribute of the parent element. If there is no parent element, it is equivalent to the stretch.
• flex-start: Starting point alignment of the cross axis
• flex-end: End point alignment of the cross axis
• center: Center point alignment of the cross axis
• baseline: Baseline alignment of the first line of text in the item
• stretch: If the fixed height is not set, it will fill the entire container

<script v-pre type="text/x-template" id="alignSelf"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { height: 129px; display: flex; } .item { width: 20%; min-height: 29px; text-align: center; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; } </style> {{radio.value}}

{{$}}

<script> export default { data () { return { elements: [3, 1, 5, 4, 2], radios: [ { id: 'auto', value: 'auto' }, { id: 'flex-start', value: 'flex-start' }, { id: 'flex-end', value: 'flex-end' }, { id: 'center', value: 'center' }, { id: 'baseline', value: 'baseline' }, { id: 'stretch', value: 'stretch' }, ], alignSelf: 'auto', } }, methods: { handleSelected(val) { this.alignSelf = val; } } } </script> </script>

Browser Support

<iframe width="100%" height="436px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=flexbox&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe>