Css related, flex layout is all-pass!

Root-seeking source layout

Everything starts with the question: how to achieve horizontal and vertical centering at the same time with CSS simply and elegantly.

Remember the beginning of learning CSS, see the floatproperty could not help feeling shines, logical to think left a Word document layout used in aligned, right-aligned and centered.

However, soon disappointed to find CSS does not exist in float: centerwriting, then text-align: center, verticle-align: centerwhether it feasible? The answer is no.

These two attributes can only be used for inline elements and are not valid for block-level element layout.

Age did not enter the page layout of CSS layout by almost tableelements implemented in tablethe unit can easily use Gerry align, valignto achieve horizontal and vertical alignment, with the prevalence of semantic Web, which gradually forgotten by the wording .

CSS standard provides us with three kinds of layout: 标准文档流, 浮动布局and 定位布局. The combination of these methods can easily solve the common needs of PC-side pages. For example, horizontal centering can be used margin: 0 auto, and horizontal and vertical centering can be 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;
}

These writing methods have some defects: lack of semantics and not flexible enough.

What we need is to achieve the centering or uniform distribution of child elements through 1 attribute, and even automatically adapt to the window zoom.

Under such demand, the fourth layout method of CSS was born. This is the flex layout we will focus on today.

Basic concepts of flex

To use flex layout, first set the parent container display: flex, and then set to justify-content: center achieve horizontal centering, and finally set to align-items: center achieve vertical centering.

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

It's that simple, and you're done.

We start justify-content with align-items two basic concepts.

It was quite difficult, the concept is the core of flex container and axes .

Outer container comprises a parent container and the inner sub container , the shaft comprising a main shaft and a cross-axis , can be said that all the characteristics of the layout of the flex are built on two concepts.

The flex layout involves 12 CSS attributes (not included display: flex), including 6 parent and 6 child containers. However, there are only four commonly used attributes, two for the parent container and two for the child container. Let's start with the commonly used ones.

1. container

The container has such a characteristic: the parent container can uniformly set the arrangement of the child containers, and the child container can also set its own arrangement method separately.

1.1 Parent container

Set the sub-containers to be arranged along the main axis: justify-content

justify-content The attribute is used to define how to arrange the sub-containers along the main axis.

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

align-items The attribute is used to define how to distribute the sub-container spacing along the cross axis.

baseline: baseline alignment. The baseline here refers to the first line of text by default, that is, the first baseline. All sub-containers are aligned to the baseline. The sub-container with the largest distance from the start of the cross axis to the element baseline will be tangent to the start of the cross axis to determine the baseline.

stretch: The size of the child container along the cross axis direction is stretched to be consistent with the parent container.

1.2 Child container

How to stretch on the spindle: flex

Sub container is a flexible (flex i.e. elasticity), they will automatically fill the remaining space of the container by the stretch ratio of the sub- flexdetermined attribute.

flexThe value may be unitless number (such as: 1, 2, 3), there may be a single digit (eg: 15px, 30px, 60px), it may also be nonethe keyword.

According to the sub-tank will flexautomatically retractable defined size ratio, if the value is nonenot retractable.

Although flexa plurality of abbreviation property to allow 1 - 3 in conjunction values, but usually to meet the needs with a value that can be written with reference to all of the FIG.

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

Each child container can also be individually defined to be arranged along the cross axis. The optional value of this property is align-items exactly the same as the parent container property. If the two are set at the same time, the child container align-self property shall prevail.

2. Shaft

As shown, the shaft comprises a spindle and a cross-axis , we know the justify-contentattribute determining arrangement along the main axis of the sub-tank.

align-items The attributes determine the arrangement of the child containers along the cross axis.

So how is the axis itself determined? In flex layout, the flex-directionattribute determines the direction of the main axis, and the direction of the cross axis is determined by the main axis.

Spindle

The starting end of the spindle is flex-start indicated by and the end segment is flex-end indicated by . The positions of the start and end segments corresponding to different spindle directions are also different.

Cross axis

The spindle is rotated counterclockwise 90 ° to give the cross-axis, intersecting-axis and the starting end also the end of the paragraph flex-startand flex-endFig.

The several attributes described above are the most commonly used parts of the flex layout. Generally speaking, they can meet most needs. If you implement a complex layout, you need to know more about the attributes.

flex advanced concept

Set the line break mode: flex-wrap

Determines whether the sub-containers are line-wrapped. Not only can they be sequentially wrapped, but they can also be reversed.

Line breaks in reverse order refer to line breaks along the opposite direction of the cross axis.

Combination setting of axial and line feed: flex-flow

flow is the flow direction, that is, the direction in which the sub-container flows, and whether the line break is allowed to flow to the end point. For example flex-flow: row wrap, it flex-flowis a composite attribute, which is equivalent to the combination of flex-direction and flex-wrap.
- row, columnEtc., the spindle direction can be set separately
- wrap, nowrapEtc., the line feed method can be set separately
- row nowrap, column wrapEtc., or both
Align multiple lines along the cross axis: align-content

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

2. Child container

Set the base size: flex-basis

flex-basis Represents the original size of the sub-container without scaling. When the main axis is horizontal, it represents the width, and when the main axis is vertical, it represents the height.

Set the expansion ratio: flex-grow

The proportion of sub-containers that stretch elastically. As shown in the figure, the remaining space is allocated to the sub-containers in a ratio of 1: 2.

Set shrink ratio: flex-shrink

The proportion of elastic contraction of the sub-container. As shown in the figure, the excess is subtracted from the child container at a ratio of 1: 2.

Set the sort order: order

Change the arrangement order of the subcontainers to override the order in the HTML code. The default value is 0, which can be a negative value. The smaller the value, the higher the arrangement.

The above are all the attributes of the flex layout. There are 12 in total, and 6 each of the parent container and the child container, which can be reviewed at any time through the following figure.