[Frontend] CSS-Flex elastic box model layout

I. Introduction

  CSS Flexbox (Flexbox) is a powerful and flexible layout model that simplifies our control over the layout of web pages and makes pages more adaptable on different devices. This article will introduce the basic concepts, properties and usage methods of CSS flexible boxes to help you better grasp the layout of flexible boxes.

2. What is the flex layout

Flex is the abbreviation of Flexible Box, which means "elastic layout", which is used to provide maximum flexibility for the box model.

1. Any container can be specified as a Flex layout

.box{
	display: flex;
}

2. Inline elements can also use Flex layout

.box{
	display: inline-flex;
}

3. Browsers with Webkit kernel must be prefixed with -webkit

.box{
	display: -webkit-flex;
	display: flex;
}

Note: After setting to Flex layout, the float, clear and vertical-align attributes of child elements will be invalid

3. Basic concepts

Elements that adopt a Flex layout are called a Flex container (flex container), or "container" for short. All its child elements automatically become members of the container and become flex items (flex item), referred to as "items".

The container has two axes by default: the horizontal main axis (main axis) and the vertical cross axis (cross asix). The starting position of the main axis (the intersection with the border) is called main start , and the ending position is called main end ; the starting position of the cross axis is called cross start , and the ending position is called cross end

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

Four, two commonly used properties of flex

Regarding the commonly used properties of flex, we can divide them into container properties and project properties

1. Container properties

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

2. Project properties

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

5. Container properties

1、flex-direction

① Definition

Determines the direction of the main axis (that is, the direction in which items are arranged)

②, sentence

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

1), attribute value

• row (default value): the main axis is horizontal, and the starting point is at the left end
• 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 on the upper edge
• column-reverse: the main axis is vertical, and the starting point is at the bottom

③, code example

1）、flex-direction: row

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

2）、flex-direction: row-reverse

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

3）、flex-direction: column

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

4）、flex-direction: column-reverse

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: column-reverse;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

2、flex-wrap

① Definition

Elastic elements are always arranged along the main axis, so if the main axis cannot be arranged, use flex-wrap to determine whether the items in the container can wrap

②, sentence

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

1), attribute value

• nowrap (default): do not wrap
• wrap: the first line is below
• wrap-reverse: newline, first line above

The default is not to wrap the line, but the element will not be allowed to remove the container directly, which will involve the elastic expansion and contraction of the element

③, code example

1）、flex-wrap：nowrap

<div class="content1">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content1 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content1 div {
     height: 50%;
     width: 300px;
}

.content1 {
    display: flex;
    flex-wrap: nowrap;
}

2）、flex-wrap：wrap

<div class="content">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content div {
     height: 50%;
     width: 300px;
}

.content {
    display: flex;
    flex-wrap: wrap;
}

3）、flex-wrap：wrap-reverse

<div class="content2">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content2 div {
     height: 50%;
     width: 300px;
}

.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

3、flex-flow

① Definition

It is a shorthand form of flex-direction attribute and flex-wrap attribute, and the default value is row nowrap

②, sentence

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

③, code example

element {
  flex-flow: column-reverse wrap;
}

4、justify-content

① Definition

Defines the alignment of items on the main axis

②, sentence

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

1), attribute value

• flex-start (default): left-aligned
• flex-end: right alignment
• center: centered
• spac-between: Justify both ends, and the spacing between items is equal
• space-around: two items are equally spaced on both sides

③, code example

1）、justify-content：flex-start

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: flex-start;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

2）、justify-content：flex-end

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: flex-end;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

3）、justify-content：center

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: center;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

4）、justify-content：space-between

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
      display: flex;
      justify-content: space-between;
    }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

5)、justify-content：space-around

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
     display: flex;
     justify-content: space-around;
   }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

5、align-items

① Definition

Defines how items are aligned on the cross axis

②, sentence

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

1), attribute value

• flex-start: The starting point of the cross axis is aligned
• flex-end: Align the end of the cross axis
• center: Align the midpoint of the cross axis
• baseline: the baseline alignment of the first line of text in the item
• stretch (default value): If the item does not have a height set or is set to auto, it will be covered with the height of the entire container
  

6、align-content

① Definition

Defines the alignment of multiple axes. This property has no effect if the item has only one axis

②, sentence

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

1), attribute value

• 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: Aligned with both ends of the cross axis, the interval between the axes is evenly distributed
• space-around: The spacing on both sides of each axis is equal. Therefore, the distance between the axes is twice as large as the distance between the axes and the frame
• stretch (default): the axis fills the entire cross axis
  

6. Project properties

1、order

① Definition

Defines the sort order of the items. The smaller the value, the higher the arrangement, the default is 0

②, sentence

.item {
    order: <integer>;
}

2、flex-grow

① Definition

  As mentioned above, when the container is set to flex-wrap: nowrap; when the line is not wrapped, and the width of the container is not enough, the elastic element will determine the magnification ratio of the defined item according to flex-grow (how to stretch when the container width > the total width of the element) . The default is 0, that is, if there is remaining space, do not zoom in

②, sentence

.item {
    flex-grow: <number>;
}

1), attribute value

• 0 (default): do not zoom in if there is remaining space
• If all items have a flex-grow property of 1, they will equally divide the remaining space (if any)
• If the flex-grow property of one item is 2 and the other items are 1, the remaining space occupied by the former will be twice as much as that of the other items

Note: The width of the flexible container is exactly equal to the sum of the element widths, and there is no excess width. At this time, no matter what value flex-grow is, it will not take effect

3、flex-shrink

① Definition

Defines the reduction ratio of the item (how to shrink when the container width < the total width of the element), the default is 1, that is, if there is insufficient space, the item will shrink

②, sentence

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

If the flex-shrink property of all items is 1, when the space is insufficient, they will be reduced proportionally
If the flex-shrink property of one item is 0, and the other items are 1, when the space is insufficient, the former will not shrink
in the width of the container When there is surplus, flex-shrink will not take effect

4、flex-basis

① Definition

What is set is the initial size of the element on the main axis. The so-called initial size is the size of the element before flex-grow and flex-shrink take effect. The browser calculates
whether there is extra space on the main axis according to this property. The default value is auto, which is the item's Original size, if width is set, the size of the element is determined by width/height (the direction of the main axis), if not set, it is determined by the content

②, sentence

.item {
   flex-basis: <length> | auto; /* default auto */
}

When set to 0, it will expand according to the content.
It can be set to the same value as the width or height attribute (such as 350px), and the item will occupy a fixed space

5、flex

① Definition

The flex attribute is shorthand for flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto, which is also a complex attribute that is difficult to understand.

②, sentence

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

1), attribute value

• flex: 1 = flex: 1 1 0%
• flex: 2 = flex: 2 1 0%
• flex: auto = flex: 1 1 auto
• flex: none = flex: 0 0 auto, often used for fixed size without stretching

The difference between flex:1 and flex:auto can be attributed to the difference between flex-basis:0 and flex-basis:auto
When set to 0 (absolute elastic element), this is equivalent to telling flex-grow and flex-shrink in I don’t need to consider my size when stretching.
When set to auto (relative to elastic elements), you need to take the element size into consideration when stretching.
Note: It is recommended to use this attribute first instead of writing three separate attributes separately. because the browser will infer the relevant value

6、align-self

① Definition

Allows a single item to have a different alignment from other items, and can override the align-items attribute. The
default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch

②, sentence

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

7. Application Scenarios of Flexbox Model Layout

   Flexbox elastic box model layout can be applied to almost all scenarios that require layout and arrangement of elements, especially very important in responsive design. Here are some application scenarios:

1. Center elements vertically and horizontally
2. Create a grid layout
3. Create an adaptive layout
4. Manage space allocation and alignment
5. Create a staggered layout
6. Create multi-column layouts
7. Adapt to different screen sizes and devices

  In conclusion, the Flexbox model layout is a very flexible layout method that can be used for both simple and complex layout needs. It can also be used with other CSS properties such as grid layout and responsive design techniques, which makes it very useful in web development.

8. Advantages of Flexbox Model Layout

1. Simplify the layout

Using flexible box layout can greatly simplify our control of web page layout and reduce the use of attributes such as positioning and floating

2. Responsive design

The flexible box layout is highly adaptable, and can automatically adjust the layout according to different devices and screen sizes to achieve responsive design

3. Strong flexibility

The flexible box layout has very flexible scalability, can adapt to various arrangement and alignment requirements, and provides better layout control

Nine. Summary

  The emergence of Flex elastic layout is to meet the increasingly rich and complex market demands of software interfaces and functions. Its core appeal is that the size of child elements should be able to dynamically respond to changes in the size of parent elements and maintain certain structural characteristics.

1. Implementation principle

In terms of implementation principles, in order to meet flexible and changeable layout methods, flex layout introduces a set of very important concepts:

• Main axis (main axis): The direction in which the flex item extends determines the arrangement position of the next flex item;
• Cross axis: The direction perpendicular to the main axis determines the specific behavior details of the main axis when it encounters a newline situation.

2. Layout work steps

For flex containers, the entire layout work can be divided into three steps:

• Step 1: All flex items are divided into rows according to their own size and the size of the main axis. To put it simply, when the main axis space cannot accommodate flex items, branching is performed;
• Step 2: According to the branch information obtained in the previous step and the characteristics of the flex items on each line, calculate the main axis size and layout information of all flex items in this line;
• Step 3: Calculate the size and layout information of all flex items on the cross axis through the three attributes of align-content, align-items and align-self.

  In general, the emergence of flex layout makes it possible to have rich and varied web page layouts. On the one hand, it liberates the creativity of engineers, and on the other hand, it satisfies the increasingly demanding and complex market demands.