This article mainly introduces Flex and the flex usage scenarios involved in your daily work.

The directory is as follows:

How to use Flex 2. How to use Flex 3. Usage 2: Flex vertical center 4. Usage 3: Flex responsive layoutCopy the code

1. The flex is introduced

1. Introduction

The W3C has proposed a new solution: Flex is short for Flexible Box. In Flex, the parent element is called a container and the child element is called an Item itemCopy the code

2. Flex container properties

  1. Flex-direction 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 in the vertical direction, and the starting point is in the upper edge. Column-reverse: the main axis is vertical and the starting point is at the bottom.Copy the code
  2. Flex-wrap nowrap (default) : no line breaks. Wrap: The first line is at the top. Wrap-reverse: newline with the first line at the bottom.Copy the code
  3. Flex-flow The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is row nowrapCopy the code
  4. Flex-start (default) : justify left Flex-end: justify right Center: justify space-between: justify both ends with equal spacing between items. Space-around: 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.Copy the code
  5. Align-items (Property defines how items are aligned on the cross axis.) Flex-start: Alignment of the starting point of the cross axes. Flex-end: alignment of ends of crossed axes. Center: Alignment of the midpoint of the cross axis. Baseline: The baseline alignment of the first line of text of the project. Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.Copy the code
  6. The align-content property defines the alignment of multiple axes. This property does not work if the project has only one axis. Flex-start: align with the starting point of the cross axis. Flex-end: aligns with the end of the cross axis. Center: aligns with the midpoint of the intersecting axis. Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes. 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.Copy the code
  • stretch(Default) : Axis takes up the entire cross axis.

3. Flex’s item property

1. 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

2. The flex-grow property defines the zoom scale of the project. The default is 0, which means no zoom if there is free space.

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

3. The flex-shrink attribute defines the scale by which the 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

4. The flex-basis property defines the main size of the project before the extra space is allocated. 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

5. 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

6. The align-self property allows a single item to have a different alignment than other items, overwriting 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

2. The average layout is involved in the recent requirements, which is summarized here:

Want to make a layout like this:

Three layers of divs are involved: parent div, five child div, div with a layer x in the middle, Flex, div with a negative margin in the middle, to achieve a even layout and line break

HTML part

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="parent"> <div class="x"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> </body> </html>Copy the code

The CSS part

*{box-sizing:border-box; padding:0; margin:0; } .parent{ width:802px; margin-left:auto; margin-right:auto; margin-top:10px; border:1px solid red; } .parent>.x{ display:flex; flex-wrap:wrap; margin-right:-6px; margin-left:-6px; } .parent>.x>.child{ width:191px; height:191px; background:grey; border:1px solid blue; margin-right:6px; margin-left:6px; margin-bottom:10px; }Copy the code

3. Flex achieves vertical centralization

I want to achieve the following effect

Code part:

HTML:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> Flex implements vertical centering </title> </head> <body> <div class="parent"> <div class="child"> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </div> </body> </ HTML >Copy the code
*{box-sizing:border-box; margin:0; padding:0; } .parent{ display:flex; justify-content:center; align-items:center; height:600px; border:1px solid red; } .child{ border:3px solid green; width:300px; }Copy the code

End result:

4. Flex makes responsive layout: 9 cells

The effect is as follows:

9 grid pictures change with screen width!

The implementation code is as follows:

HTML

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> Flex do responsive layout </title> </head> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </body> </html>Copy the code

CSS

*{
  box-sizing:border-box;
  padding:0;
  margin:0;
}

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

.child{
  background:red;
  width:calc(100% / 3);
  height:100px;
  border:1px solid black;
}
Copy the code