An overview of the

The traditional layout solution is based on the box model, which relies on display + position+ float to implement, and has poor flexibility. In 2009, the W3C introduced a new approach called Flex, which stands for Flexible Box.

Common application

  • Centered layout
justify-content:center; // align align-items:center; // Vertical centerCopy the code
  • Two columns of the layout
.left{ width:200px; } .right{ flex-grow:1; // Right adaptive}Copy the code
  • Three column layout
.left{ width:200px; } .middle{ flex-grow:1; }. Right {width:200px; }Copy the code

The basic concept

The container
project

Defining flex containers

This element is defined as an elastic container by declaring the display property to be flex or inline-flex

  • Any container can be specified as a Flex layout.
.box {
  display: flex;
Copy the code
  • Inline elements can also be laid out using Flex.
.box {display: inline-flex; }Copy the code

With Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated.

Container attribute

The flex – direction attribute

Flex-direction Direction of the main axis (that is, the alignment of items)

.box { flex-direction: row | row-reverse | column | column-reverse; } // ROW (default) : the main axis is horizontal and the starting point is on the left. //row-reverse: the main axis is horizontal and the starting point is at the right end. //column: the main axis is vertical, and the starting point is at the top. //column-reverse: the main axis is vertical and the starting point is down.Copy the code

The flex – wrap attributes

By default, projects are arranged on a line (also known as an “axis”). Flex-wrap defines how to wrap a line if it does not fit

.box { flex-wrap: nowrap | wrap | wrap-reverse; } //nowrap (default) : no line wrap //wrap: wrap with first line at the top //wrap-reverse: wrap with first line at the bottomCopy the code

The flex – flow properties

Flex-flow is short for flex-direction and flex-wrap. The default value is row nowrap

The box {flex - flow: < > 'flex - direction' | | < > 'flex - wrap'}Copy the code

The justify – content attribute

Illustration-content defines how elastic items are aligned on the main axis and how additional space is allocated

.box { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } //flex-start (default) : the starting point of the main axis is aligned, usually left. //flex-end: the end point of the main axis is aligned, usually right. //center: centered //space-between: Align both ends, with equal spacing between items. //space-around: Each item is spaced equally on both sides. As a result, the spacing between items is twice as large as the spacing between items and the border.Copy the code

The align – the items property

Align-items defines how elastic items are aligned on the cross axis.

.box { align-items: stretch | flex-start | flex-end | center | baseline; } //flex-start: align the starting point of the cross axis. //flex-end: align the end of the cross axis. //center: center. //baseline: the baseline alignment of the first line of the project. //stretch (default) : If the height of the project is not set or set to Auto, it will occupy the entire height of the container.Copy the code

The align – content attribute

Align-content defines the alignment and extra space allocation of multiple lines on the side axis. It does not work when there is only one line

.box { align-content: stretch | flex-start | flex-end | center | space-between | space-around ; } //stretch (default) : axis takes up the entire cross axis. //flex-start: align with the starting point of the cross axis. //flex-end: align with the end of the cross axis. // Center: align with the midpoint of the cross axis. //space-between: align with the two ends of the cross axis, and the spacing between the axes is evenly distributed. //space-around: the space on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.Copy the code

The project properties

Order attribute

Order defines the order in which items are sorted, the smaller the number, the higher the order.

.item {
  order: <integer>; /* Default 0 */}Copy the code

The flex – turns up properties

Flex-grow defines the zoom scale of the project, which defaults to 0, or does not zoom if there is free space.

.item { flex-grow: <number>; /* Default 0 */}Copy the code

Rules:

  • Total free space = container size – all itemsflex-basisThe sum of the
  • Expandable space = total available space/all itemsflex-growThe sum of the
  • Each space is equal to that termflex-basis+ expandable space * itemflex-grow

The flex – the shrink properties

Flex-shrink defines the elastic project shrink scale, which defaults to 1, that is, if there is insufficient space, the project will shrink.

.item { flex-shrink: <number>; /* Default 1 */}Copy the code

Rules:

The contraction factor only comes into play in the case of flex-wrap: nowrap. Because the new version of Flex does not shrink projects to zero indefinitely, the Flex-shrink rule is more complex than flex-grow.

  • Count all itemsflex-shrink * flex-basisThe sum of the
  • Calculate the shrinkage factor for each term
    • Shrinkage factor = (flex-shrink * flex-basis)/The first step is to calculate the sum
  • Remove the calculation of space
    • Space removed per item = shrinkage factor of the item * Total space spilled

The flex – the basis properties

Flex-basis defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

.item { flex-basis: <length> | auto; /* Default auto */}Copy the code

Flex properties

Flex is short for flex-grow flex-shrink flex-basis. The default value is 0. 1 Auto. The last two attributes are optional

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

Quick value:

  • flex:auto (1 1 auto)
  • flex:none (0 0 auto)
  • flex:1(110 %) : equal layout

The align – self properties

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } //auto :(default) inherits the align-items property of the parent element // the other five are the same as the align-items propertyCopy the code

Reference:

Flex layout syntax tutorial

Flex- Elastic layout is so easy!!