Do you really understand flex layout?

Web layout is a key application of CSS.

The traditional solution to layout, based on the box model, relies on the display property + position property + float property. It is very inconvenient for special layouts, such as vertical center, which is not easy to implement.

In 2009, the W3C introduced a new approach, Flex layout, that enables easy, complete, and responsive implementation of various page layouts. It is currently supported by all browsers, which means it is safe to use it now.

Flex layouts will be the preferred solution for future layouts. This article covers Flex layout syntax.

A brief introduction to Flex layout

Flex is a flexible layout.

The Flex layout provides a great deal of flexibility for the box model. Any container can be specified as a Flex layout by setting it:

.box{
  display: flex;
}
Copy the code

Inline elements can also be laid out using Flex.

.box{
  display: inline-flex;
}
Copy the code

Webkit-kernel browsers must be prefixed with -webkit.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
Copy the code

Note that with Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated (and can be nested).

2. Basic concepts

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Properties of the container

flex-direction : row-reverse, the main axis is horizontal and the starting point is at the right end. Effect:

Flex-direction: column. The main axis is in the vertical direction and the starting point is in the upper edge. Effect:

Flex-direction: column-reverse, where the main axis is vertical and the starting point is along the bottom. Effect:

Complete code:

justify-content :Flex-end, right aligned

justify-content :Center, center

justify-content :Space-between, both ends are aligned, and the spacing between items is equal.

Illustration-content: space-around, with equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.

Complete code:

<style>. Box {display: flex; display: -webkit-flex; /* Default, project left-justify */ /* justify-content: flex-start; */ /* justify item right */ /* justify-content: flex-end; */ /* justify items */ /* justify-content: center; */ /* justify-content: space-between; */ /* Both sides of each item are equally spaced */ justify-content: space-around; background: #999; width: 100%; } .box span{ margin: 10px 10px; padding: 10px; background: #ff0; width: 50px; } </style>  <div class="box"> <span>love1</span> <span>love2</span> <span>love3</span> <span>love4</span> <span>love5</span> <span>love6</span> <span>love7</span> <span>love8</span> </div>Copy the code

3.5 the align – the items property

The align-items property defines how items are aligned on the cross axis.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

It could take five values. The exact alignment depends on the direction of the intersecting axis, which is assumed to run from top to bottom.

Align-items: flex-start, align the starting point of the cross axis.

align-items :Flex-end, cross the alignment of the end of the axis.

align-items :Center, the midpoint alignment of the intersecting axes.

align-items :Baseline, the baseline alignment of the first line of text of the project.

align-items :“Stretch” (default). If the project is not set to height or is set to Auto, it will take up the entire height of the container.

Complete code:

<style type="text/css"> .box{ display: flex; display: -webkit-flex; /*align the top of the vertical axis */ *align-items: flex-start; */ *align the bottom of the vertical axis */ *align-items: flex-end; */ *align-items: center; */ *align-items: center; */ *align-items: baseline; */ *align-items: baseline; */ /* Default alignment, if the item is not set to height or set to auto, it will take up the height of the entire container */ align-items: stretch; background: #999; width: 100%; } .box span{ margin: 10px 10px; padding: 10px; background: #ff0; width: 50px; } .box span:nth-of-type(2n){ height: 80px; padding-top: 20px; } </style> <div class="box"> <span>love1</span> <span>love2</span> <span>love3</span> <span>love4</span> <span>love5</span> <span>love6</span> <span>love7</span> <span>love8</span> </div>Copy the code

3.6 the align – content attribute

The align-content property defines the alignment of multiple axes. If the project has only one axis, this property does not work (that is, you need to set the flex-wrap property of the container to WRAP)(I set the height of the container to make the effect more obvious)

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

The property may take six values.

Align-content: flex-start, aligned with the starting point of the intersecting axis.

align-content :Flex-end, aligned with the end of the cross axis.

align-content :Center, aligned with the midpoint of the intersecting axis.

align-content :Space-between, aligned with both ends of the intersecting axis, the spacing between axes is evenly distributed.

align-content :Space-around, the spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.

align-content :Stretch (default), the axis takes up the entire cross axis.

Complete code:

<style>. Box {display: flex; display: -webkit-flex; // If the project has only one axis, this property does not work (that is, you need to set the container's flex-wrap property to wrap) flex-wrap: wrap; /*align with the top of the vertical axis */ *align-content: flex-start; */ *align with the bottom of the vertical axis */ *align-content: flex-end; */ *align with the center of the vertical axis */ *align-content: center; */ *align-content: space-between; */ align-content: space-around; */ * align-content: stretch; */ * align-content: stretch; */ background: #999; width: 600px; height: 300px; } .box span{ margin: 10px 10px; padding: 10px; background: #ff0; width: 50px; } </style>  <div class="box"> <span>love1</span> <span>love2</span> <span>love3</span> <span>love4</span> <span>love5</span> <span>love6</span> <span>love7</span> <span>love8</span> </div>Copy the code

4. Project attributes

The following six properties are set on the project.

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 the order attribute

The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

.item {
  order: <integer>;
}
Copy the code

Set the first order attribute to 10, the second order attribute to -1, and the fifth order attribute to -10

Code:

CSS: <style> .box{ display: flex; display: -webkit-flex; background: #999; } .box span{ margin: 10px 10px; padding: 10px; background: #ff0; } .box span:nth-of-type(1){ order: 10; } .box span:nth-of-type(2){ order: -1; } .box span:nth-of-type(5){ order: -10; } </style>  <div class="box"> <span>love1</span> <span>love2</span> <span>love3</span> <span>love4</span> <span>love5</span> </div>Copy the code

4.2 the flex – turns attributes

The flex-grow attribute defines the size of the project. It is used when the width of the parent element is greater than the sum of the child elements. It defines how the child element allocates the remaining width of the parent element.

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

Give the first child a flex-grow attribute of 1 and the second child a flex-grow attribute of 2, and the remaining width of the parent element is divided into three equal parts and added to the first and second child as follows:

Code:

<style>. Box {display: flex; display: -webkit-flex; background: #999; } .box span{ margin: 10px 10px; padding: 10px; background: #ff0; width: 50px; } .box span:nth-of-type(1){ flex-grow: 1; } .box span:nth-of-type(2){ flex-grow: 2; } </style>  <div class="box"> <span>love1</span> <span>love2</span> <span>love3</span> <span>love4</span> <span>love5</span> </div>Copy the code

Such as: For example, if the parent element is 1000px wide and each child element is 100px wide, then there is 500px left. The first child element flex-grow is 1, and the second child flex-grow is 2, then 500px will be divided into three equal parts. Increase the width of the first child by 500 times 1/3px and the width of the second child by 500 times 2/3px

4.3 the flex – the shrink properties

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.

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

If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

Negative values have no effect on this property.

4.4 the flex – the basis of attributes

The Flex-basis property 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

It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.

4.5 the flex property

The flex attribute is short for flex-grow, flex-shrink, and 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

This property has two shortcut values: auto (1 1 auto) and None (0 0 auto).

It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

4.6 the align – self attribute

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;
}
Copy the code

This property may take six values, all identical to the align-items property except auto.