flex syntax

1, What is Flex layout

Note: after setting to Flex layout, the float, clear and vertical align attributes of child elements will become invalid

• Flex is the abbreviation of Flexible Box, which means "flexible layout", and is used to provide maximum flexibility for box model.
• Any container can be specified as a Flex layout. For example:

.box{
  display: flex;
}

• Inline elements can also use Flex layouts. For example:

.box{
  display: inline-flex;
}

• Compatibility: ie9 and below do not support flexbox.
• Automatic prefixing: since each manufacturer has its own prefix, it is very troublesome, so a tool autoprefixer is needed

1. Some applications

• (1) Since the default values of flex flow in flx are row and nowrap, display: flex is set directly on the parent element; You can arrange all the child elements horizontally, but there is no spacing between the child elements

#warning {
  display: flex;
}
<div id="warning">
    <div class="demo1">1</div>
    <div class="demo2">2</div>
</div>

• (2) Set the horizontal dispersion and vertical center of a single element and multiple elements with the same height: if you directly set display:flex;justify-content:space-between;align-items:center; When there are several elements with different heights, this method can only realize that the midpoint of all child elements is on the same horizontal line, but can not realize that the upper border of all child elements is on the same horizontal line.

.box {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

• (3) Realize that the upper borders of multiple elements are on a horizontal line and horizontally dispersed: to realize this, you only need to wrap another layer of flex, that is, there are three layers of elements. The first layer of elements is the outermost box, and the direct child elements (only one) inside are vertically centered; The second layer of elements is the middle box, which realizes the horizontal dispersion of the elements inside and the alignment of the upper end.

#box {
  display: flex;
  align-items: center;
}
.inner-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
<div id="box">
    <div class="inner-box">
      <div class="demo1">1</div>
      <div class="demo2">2</div>
      <div class="demo3">3</div>
    </div>
</div>

2, Basic concepts

• Elements with Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, called Flex items, or "projects".
  
• By default, the container has two axes: the horizontal main axis and the vertical cross axis. The start position of the spindle (the intersection with the border) is called main start, and the end position is called main end; The start position of the cross axis is called cross start and the end position is called cross end
• Items are arranged along the main axis by default. The spindle space occupied by a single item is called main size, and the cross axis space occupied is called cross size.

3, Properties of the container

The following six properties are set on the container

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

1,flex-direction

The flex direction property determines the direction of the spindle (that is, the arrangement direction of the items).

About setting space between and space around in the vertical direction: first, the horizontal direction can be set directly with justify content; In the vertical direction, align items can only be set for one axis. You need to use align content (specially designed for multiple lines) to set this effect

There are 4 values
row(Default): the main axis is horizontal and the starting point is at the left end.
row-reverse: The spindle is horizontal and the starting point is at the right end.
column: The main axis is vertical and the starting point is on the top edge.
column-reverse: The main axis is vertical and the starting point is at the lower edge.

2. Flex wrap attribute

By default, projects are arranged on a single line (also known as a grid line). The flex wrap attribute defines how to wrap lines if one axis cannot be arranged.

There are 3 values
nowrap(Default): do not wrap
wrap: Wrap, first line above
wrap-reverse: Wrap, first line below

3,flex-flow

The flex flow attribute is a short form of the flex direction attribute and the flex wrap attribute. The default value is row nowrap

4. Justify content attribute

The justify content attribute defines how the project allocates rich space on the main axis (rich space can be understood as free space).

5 Values
flex-start(Default): all elements are on the left(There is no spacing between elements)，The rich space is on the right
flex-end: All elements are on the right(There is no spacing between elements)，The rich space is on the left
center:  All elements are in the middle(There is no spacing between elements)，The average score of affluent space is about
space-between: The first and last items are close to the border, and other items are evenly allocated with free space.
space-around: The spacing on both sides of each item is equal. Therefore, the interval between items is twice as large as that between items and borders.

5. Align items property

The align items property defines how the project allocates free space on the cross axis

5 Values
flex-start: Align the start point of the cross axis.
flex-end: Align the ends of the cross axes.
center: Align the midpoint of the cross axis.
baseline: The baseline alignment of the first line of text of the item.
stretch(Default): if the project is not set to height or is set to auto，Will occupy the height of the entire container.

6. Align content attribute

The align content attribute defines the alignment of multiple axes. This property has no effect if the project has only one axis.

6 Values
flex-start: Align with the start 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 both ends of the cross axis, and the spacing between the axes is evenly distributed.
space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the frame.
stretch(Default): the grid line occupies the entire cross axis.

4, Properties of the project

The following 6 properties are set on the project

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

1. order attribute

The order property defines the order in which items are arranged. The smaller the value, the higher the arrangement. The default value is 0. Can be set to negative.

2. Flex growth attribute

The flex growth property defines the magnification of the item. The default value is 0, that is, if there is any remaining space, it will not be enlarged.

Note: if this attribute is set, the element will calculate the width and height according to this attribute and invalidate the originally set width and height. The calculation formula of width and height is: size of child element = size of Box * box flex attribute value of child element / sum of box flex attribute values of all child elements. Therefore, the value of all child elements is often directly set to 1, that is, all elements have the same width and height.

3. Flex shrink attribute

The flex shrink attribute defines the reduction scale of the item, which is 1 by default, that is, if there is insufficient space, the item will be reduced.

Note: if the flex shrink attribute of all items is 1, they will be scaled down equally when the space is insufficient. If the flex shrink attribute of one item is 0 and all other items are 1, the former will not shrink when the space is insufficient.

4. Flex basis attribute

The flex basis attribute defines the main size occupied by the project before allocating excess space. Based on this attribute, the browser calculates whether the spindle has excess space. Its default value is auto, which is the original size of the project.

Note: it can be set to the same value as the width or height attribute (such as 350px), and the project will occupy a fixed space.

5. flex attribute

Flex attribute is short for flex grow, flex shrink and flex basis. The default value is 0 1 auto. The last two properties are optional.

This attribute has two shortcut values: auto (1 1 auto) and none (0 0 auto)

It is recommended to use this attribute first rather than write three separate attributes separately, because the browser will calculate the relevant values.

6. Align self attribute

The align self attribute 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 that it inherits the align items attribute of the parent element. If there is no parent element, it is equivalent to stretch. Its value is the same as the value of align items, but there is one more auto.

flex layouts: instances

1, Layout of dice

HTML code
<div class="box">
  <span class="item"></span>
</div>

1. Single item

/* Horizontal vertical center alignment */
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Three items

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

2, Grail layout

Holy Grail Layout refers to the most common website layout. The page is divided into three parts from top to bottom: head, body and footer. The trunk is divided into three columns horizontally, from left to right: navigation, main column and sub column.

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body { /* This is the div surrounding nav, content ads */
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* The width of the two sidebars is set to 12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* Navigation to the far left */
  order: -1;
}

3, Fixed bottom bar

Sometimes, the content of the page is too small to occupy the height of a full screen, and the bottom bar will be raised to the middle of the page. At this time, you can use the Flex layout so that the bottom bar always appears at the bottom of the page.

HTML
<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}