Fix the flex layout once and for all.

Use flex layout once and for all, and use flex once and for all

Https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb? Utm_source = gold_browser_extension

Root tracing Layout

Everything starts with the question of how to align horizontally and vertically at the same time through CSS simple and elegant. Remember that when I first started learning CSS, I sawfloatAttributes can't help but feel bright. Naturally, they think of the left, right, and center alignment used in the Word Document Layout. However, I am very disappointed to find that CSS does not exist.float: center, Thentext-align: center,verticle-align: centerIs it feasible? The answer is no. These two attributes can only be used for intra-row elements, and the layout of block-level elements is invalid.

In the era when web page layout has not entered CSStableElement implementation, intableCell to facilitate usealign,valignTo achieve horizontal and vertical alignment, with the popularity of Web semantics, these writing methods gradually fade out of the field of view, CSS standards provide us with three layout methods:Standard Document Stream,Floating LayoutAndPositioning Layout. The combination of these methods can easily meet common requirements of PC-side pages, such as horizontal center.margin: 0 autoTo achieve horizontal and vertical center at the same time, you can set as follows:

.dad {    position: relative;}.son {    position: absolute;    margin: auto;    top: 0;    right: 0;    bottom: 0;    left: 0;}

.dad {    position: relative;}.son {    width: 100px;    height: 100px;    position: absolute;    top: 50%;    left: 50%;    margin-top: -50px;    margin-left: -50px;}

However, these writing methods have some drawbacks: lack of semantics and flexibility. What we need is to use one attribute to elegantly align or evenly distribute sub-elements, or even automatically adapt to Window Scaling. With such a demand, 4th CSS la s were created, which is the flex layout that we will focus on today.

Flex Basic Concepts

To use the flex layout, you must first set the parent containerdisplay: flexAnd then setjustify-content: centerImplement horizontal center and final settingsalign-items: centerImplement vertical center.

#dad {    display: flex;    justify-content: center;    align-items: center}

 

 

That's easy. Wait, it seems something wrong,justify-contentAndalign-itemsWhat is it? Where can we see the horizontal and vertical semantics? Yes, flex is really not that simple, and it should begin with two basic concepts.

 

 

The core concept of flex is container and axis. The container includes the parent container of the outer layer and the Child container of the inner layer. The axis includes the spindle and the cross axis. It can be said that all the features of the flex layout are built on these two concepts. The flex layout involves 12 CSS attributes (not includingdisplay: flex). The parent container and sub-container have 6 sub-containers. However, there are only four common attributes. The parent container and sub-container have two attributes. Let's start with the common attributes.

1. Container

Containers have the following features: the parent container can set the sub-container arrangement mode, and the sub-container can also set its own arrangement mode. If both are set, the sub-container settings will prevail.

 

 

1.1 parent container

• Set sub-containers to be arranged along the spindle: justify-content

justify-contentProperties are used to define how sub-containers are arranged along the main axis.

 

 

Flex-start: start end alignment

 

 

Flex-end: end segment alignment

 

 

Center: center alignment

 

 

Space-around und: the sub-containers are evenly distributed along the main axis. The distance between the sub-containers located at both ends of the end and end to the parent container is half the distance between the sub-containers.

 

 

Space-between: the sub-containers are evenly distributed along the main axis. The sub-containers located at the beginning and end are tangent to the parent container.

 

 

• Set how sub-containers are arranged along the cross axis: align-items

  align-itemsAttribute defines how to allocate the spacing of sub-containers along the cross axis.

 

 

Flex-start: start end alignment

 

 

Flex-end: end segment alignment

 

 

Center: center alignment

 

 

Baseline: baseline alignment.baselineBy default, it refers to the first line of text, that isfirst baseline, All sub-containers are aligned to the baseline. The sub-containers from the starting point of the cross axis to the baseline of the element are tangent to the starting end of the cross axis to determine the baseline.

 

 

Stretch: the size of the sub-container is stretched along the cross axis to be consistent with that of the parent container.

 

 

1.2 Sub-container

• How to scale the spindle: flex

 

 

Sub-containers are elastic (flex is elastic), and they automatically fill in the remaining space. The scaling ratio of sub-containers isflexConfirm the property.

flexThe value can be a number (such as 1, 2, 3), a number (such as 15px, 30px, 60px), ornoneKeyword. The sub-container will followflexAuto scaling of the defined size ratio, if the value isnoneNo scaling.

AlthoughflexIt is the abbreviation of multiple attributes. One to three values can be used together, but usually one value can meet the requirements. For more information, see.

 

 

• Separately set how sub-containers are arranged along the cross axis: align-self

 

 

Each sub-container can also separately define the way to arrange along the cross axis. The optional values of this attribute are different from those of the parent container.align-itemsThe attributes are identical. If both attributes are setalign-selfAttribute.

Flex-start: start end alignment

 

 

Flex-end: end segment alignment

 

 

Center: center alignment

 

 

Baseline: baseline alignment

 

 

Stretch: stretch alignment

 

 

2. Axis

, The Axis includes the spindle and the cross axis, we knowjustify-contentAttribute determines how the sub-container is arranged along the main axis,align-itemsAttribute determines how the sub-container is arranged along the cross axis. Then how is the axis determined? In the flex layout,flex-directionThe attribute determines the direction of the spindle, and the direction of the cross axis is determined by the spindle.

 

 

• Spindle

Start end of the spindleflex-startIndicates that the end segment is composedflex-end. The start and end segments of different spindle directions are also different.

Right:flex-direction: row

 

 

Down:flex-direction: column

 

 

Left:flex-direction: row-reverse

 

 

Up:flex-direction: column-reverse

 

 

• Cross axis

  When the spindle rotates 90 ° in the clockwise direction, the cross axis is obtained.flex-startAndflex-end.

  The attributes described above are the most commonly used parts in flex la S. Generally, they can meet most requirements. If complicated la s are implemented, you need to learn more about attributes.

Flex Advanced Concepts 1. parent container

• Set the line feed mode: flex-wrap

  Determines whether the Sub-containers are arranged with line breaks. Not only can the sub-containers be ordered but also supports line breaks in reverse order.

 

 

Nowrap: Do not wrap

 

 

Wrap: line feed

 

 

Wrap-reverse: line feed in reverse order

A reverse line feed refers to a line feed in the reverse direction of the cross axis.

 

 

• Combination of axial and line feed settings: flex-flow

  Flow is the flow direction, that is, the direction in which the sub-container flows, whether to allow line breaks when the flow ends, suchflex-flow: row wrap,flex-flowIs a composite attribute, which is equivalent to a combination of flex-direction and flex-wrap. The optional values are as follows:

  • row,columnYou can separately set the direction of the spindle.

  • wrap,nowrap, You can set the line feed method separately.

  • row nowrap,column wrapOr both.

• Align-content

  When Sub-containers are arranged in multiple rows, set the alignment between rows.

 

 

Flex-start: start end alignment

 

 

Flex-end: end segment alignment

 

 

Center: center alignment

 

 

Space-around: evenly distributed margin

 

 

Space-between: equi-Spacing Distribution

 

 

Stretch: stretch alignment

 

 

2. Sub-container

• Set the reference size: flex-basis

  flex-basisThe original size of the sub-container without scaling. The main axis is the horizontal table width, and the main axis is the vertical table height.

 

 

 

 

• Set the scaling ratio: flex-grow

  Proportion of auto scaling of sub-containers ., The remaining space is allocated to the sub-container.

 

 

 

 

• Set the shrinkage ratio: flex-shrink

  The proportion of auto-scaling of sub-containers ., The excess part is subtracted from the sub-container.

 

 

 

 

• Set the order: order

  Change the ordering of sub-containers and overwrite the order in the HTML code. The default value is 0, which can be a negative value. The smaller the value, the higher the ranking.

 

 

The above are all attributes of the flex layout, with a total of 12 parent containers and 6 sub-containers each. You can review them at any time.