preface

The traditional layout method is based on the box model, and the use of floating, positioning and other methods will not only affect other element attributes, but also can not be well laid out on the mobile terminal. In 2009, W3C proposed a new scheme —-Flex layout, Flex is relatively simple than the traditional layout, easy to operate, and compatibility support more than 95% of browsers, support IE9+, is the preferred scheme for future layout.

The full text summary

The point speed to see

  • Flex has four core concepts: container, project, spindle, and side axis.
  • justify-content:centerandalign-items:centerAttributes can quickly center elements horizontally and vertically;
  • justify-contentIn thespace-evenlyProperty each element allocates space equally,space-aroundThe sides are narrower;
  • felx-growSet the stretch ratio of subitems,flex-shrinkSet the compression ratio of subitems,flex-basisSet the width of the subitem in the spindle space; Default value 0 1 Auto;
  • flex-grow.flex-shrinkandflex-basisYou can combine three values with a single Flex attribute, which represents the share of the item when Flex is a single value;
  • Felx layout application scenarios are mostly adaptive layout.

1 Layout Principle

Flex stands for Flexible Box and is used to provide maximum flexibility to Box models. Any container can be specified as a Flex layout.

  • Flex layout is also called flex layout, elastic layout, elastic box layout, flex box layout.
  • When we set the flex layout for the parent element, the child element’sfloat,clearandvertical-alignProperties are invalidated.

An element with a Flex layout is called a Flex container, and all of its child elements automatically become members of the container, called flex projects. The container has two axes, and the default projects are arranged along the main axis.

  • Spindle: The default spindle is horizontal, starting on the left and ending on the right,
  • Side axis: vertical by default, starting at the top and ending at the bottom.

Flex properties are divided into two parts:

  • Container properties that act on containers, also called elastic Spaces or elastic containers.
  • Item attributes that act on items, also known as elastic elements or elastic items.

2 Common container properties

2.1 the display

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

To use flex layout, first the parent item has elastic space on, block elements use Flex, and inline elements use inline-Flex. Let’s look at the simplest example:

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>
Copy the code

When the parent display element is set to Flex, the container becomes a Flex layout, and the three items are arranged along the main axis.

.container {
    display: flex;
    border: 2px black solid;
    width: 500px;
    margin: 10px auto;
}

.item {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

.item:first-of-type {
    background-color: pink;
}

.item:last-of-type {
    background-color: greenyellow;
}
Copy the code

The effect is that the three items are arranged in a row horizontally along the main axis.

2.2 the flex – direction

By default, the main axis is x (row), so the corresponding y axis is the side axis. Of course, we can also set our main axis to y axis, so the elements are aligned with the main axis.

flex-direction: row | row-reverse | column | column-reverse;
Copy the code
  • Row is arranged horizontally to float left

  • Row-reverse horizontal reverse order, equivalent to right float

  • Column vertical arrangement

  • Column-reverse Specifies the vertical reverse order

2.3 the justify – content

Spindle alignment, sets the sorting of child elements on the spindle.

justify-content: flex-start | flex-end | center
Copy the code
  • Flex – start in the beginning

  • The flex – end in the end

  • Center in the middle

  • Evenly evenly split remaining space (1 space each at the beginning and end)

  • Allocate the remaining space evenly (leave half space between the front and the back)

  • The space-between ends are aligned

2.4 the flex – warp

Flex-warp indicates whether the child elements are wrapped, which is not by default.

flex-wrap: no-wrap | wrap | wrap-reverse;
Copy the code
  • Nowrap non-breaking

When the sum of the child widths exceeds the elastic box, the child widths are automatically reduced to ensure that they are displayed on the same line.

  • Warp line

The number of newlines determines the number of lines on the side axis

  • Warp-reverse is the opposite of wrap

2.5 the align – items

Side axis alignment: Sets the sorting of elements on the side axis.

align-items:flex-start | flex-end | center | baseline | stretch
Copy the code
  • Flex – start in the beginning

  • The flex – end in the end

  • Center in the middle

  • Streth Stretch (default when height is not set for child elements)

2.6 the align – content

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

Multi-line alignment of the side-axis is used for line breaks where there is more than one line of the side-axis and multiple axes along the main axis, setting the overall position, as in context-content.

  • Flex – start in the beginning
  • The flex – end in the end
  • Center in the middle
  • Space-around Spaces contain elements with narrower sides
  • The space- instituted contains evenly spaced elements
  • The space-content ends are aligned

3 Common project attributes

This applies to the sum of the width or height of the subitems. We can use these attributes to control the subitems for a more flexible layout when the main or side axis has free space or overflow space.

  • The remaining space

What is surplus space? When the container is 500px wide and the three boxes ABC are 100px wide, then the remaining space on the main axis of the container is 500-300=200px.

  • Overflow space

When the width of the container is 500px and the width of the three boxes ABC is 200px, the overflow space on the main axis of the container is 500-600=100.

3.1 the flex – turns up

  • Set the subitem stretch ratio.
  • It is applicable to the width of the child item that does not fill the parent item. The larger the value is, the larger the stretch will be.
flex-grow:0;
Copy the code

The default flex-grow value is 0, and the children do no scaling. If you set the flex-grow property to 1 for all three children, they will be allocated 200px in a 1:1:1 ratio, and each child will be 166px wide.

If you set flex-grow to 1 for project A and default to 0 for the other two, their ratio will be 1:0:0, meaning that all the remaining space will be given to project A, which will have 300px.

Setting flex-grow will not take effect if the container has no space left at all.

3.2 the flex – the shrink

  • Grow compress shrink meaning, set the compression ratio of child items.
  • The width of the child item exceeds that of the parent item. The larger the value is, the larger the compression is.
flex-shrink:1;
Copy the code

The default flex-shrink value is 1. When the child entries exceed the parent, the child entries are compressed in a 1:1 ratio. If you set the parent item to 500px and the three sub-items to 200 widths, the three items will be 166px wide.

If you don’t want compression, you can choose line wrap by setting flex-warp to warp.

Flex-shrink also does not work if the container has space left.

3.3 the flex – basis

  • Basis means to set the width of the subitem in the main axis space.
  • Actual project width priority:

max-width/min-width > flex-basis > width 

flex-basis:auto;
Copy the code

The default value of Flex-basis is auto, which is the original width of the project.

3.4 the flex

  • Flex-grow, Flex-shrink, and Flex-basis combine three values with a flex attribute.
  • When Flex is a single value, it represents the number of shares.
.item {
    flex:1; } // equivalent to.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}
Copy the code

3.5 the order

Sets the order of subitems. Default is 0. The smaller the number, the higher the order.

order:0;
Copy the code

3.6 the align – self

Sets the alignment of child elements to override the align-items property. The default is auto, inheriting the align-items of the parent item.

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

To item B separately set properties align – self auto | flex – start | baseline

flex-end

center

4 Application Scenarios

4.1 Two-column/three-column layout

4.2 Middle adaptive layout

4.3 Mobile Search Box

conclusion

This article ends here, because my experience level is limited, unavoidably will have the flaw, welcome to correct this. Writing is not easy, behind the continuous output is the accumulation of countless days and nights, your praise is the power to continue writing, thank you for your support!