Find the source layout

It all started with the problem of how to center both horizontal and vertical with CSS in a simple and elegant way. I remember when I first started learning CSS, I was surprised to see the float property, which naturally reminded me of the left, right and center alignment used in Word document layout. However, I was soon disappointed to find that float did not exist in CSS: Text-align: center; verticle-align: center The answer is also no. These two attributes can only be used for inline elements and are not valid for the layout of block-level elements.

In the era when Web layout did not enter CSS, typesetting was almost realized by table elements. In the cells of table, align and valign could be conveniently used to realize horizontal and vertical alignment. With the popularity of Web semantics, these writing methods gradually faded out of view. The CSS standard provides three layouts: standard document flow, floating layout, and location layout. The combination of these methods can easily meet the common requirements of PC pages. For example, margin: 0 auto can be used to achieve horizontal center, and the following Settings can be used to achieve horizontal and vertical center simultaneously:

.dad {
    position: relative;
}Copy the code
.son {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}Copy the code
.dad {
    position: relative;
}Copy the code
.son {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}Copy the code

However, each of these approaches suffers from some drawbacks: lack of semantics and flexibility. What we need is an elegant way to center or evenly distribute child elements with just one property, and even to automatically adapt as the window scales. This led to the creation of a fourth CSS layout, which is the Flex layout that we will focus on today.

Basic Flex concepts

To use flex layout, first set the parent display: flex, then justify-content: Center to center horizontally, and finally align-items: Center to center vertically.

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

It’s that simple, and you’re done. Wait, something’s wrong, what are implement-content and align-items? Where do you see horizontal and vertical semantics? Yes, Flex is not that simple, and it starts with two basic concepts.

At the heart of Flex is the concept of containers and axes. The container consists of the outer parent and the inner child, and the axis consists of the main axis and the cross axis, on which the entire nature of the Flex layout is built. The Flex layout involves 12 CSS properties (display: flex is not included), including six parent containers and six child containers. However, there are only four common attributes, two parent and two child, so let’s start with the common ones.

1. The container

A container has the following characteristics: The parent container can set the arrangement mode of its children, and the children can also set their own arrangement mode. If both Settings are set at the same time, the Settings of the child containers prevail.

1.1 the parent container

  • Set the child containers along the main axis: context-content

The context-content attribute defines how child containers are lined up along the main axis.

Flex-start: start alignment

Flex-end: align the end segment

Center: center

Space-around: The children are evenly distributed along the main axis, with the children at both ends half as far from the parent as the children.

Space-between: The child containers are evenly distributed along the main axis. The child containers at both ends are tangent to the parent container.

  • Sets how the child containers are arranged along the cross axis: align-items

    The align-items property defines how the spacing of child containers is allocated along the cross axis.

Flex-start: start alignment

Flex-end: align the end segment

Center: center

All child containers are aligned to the baseline, and the child container with the largest distance from the beginning of the cross axis to the element baseline will be tangent to the beginning of the cross axis to determine the baseline.

Stretch: The child container is stretched along the dimensions of the cross axis to match the parent container.

1.2 children

  • How to flex on spindle: Flex

Child containers are elastic (Flex is elastic), they automatically fill the remaining space, and the scale of the child container is determined by the Flex property.

Flex values can be unitary (e.g. 1, 2, 3), unitary (e.g. 15px, 30px, 60px), or the None keyword. The child container is automatically scaled to the size scale defined by Flex, except if it is none.

Although Flex stands for multiple properties and allows 1-3 values to be used together, one value is usually sufficient, as shown in the figure below.

  • Set separately how the child containers are arranged along the cross axis: align-self

Each child can also individually define how it is arranged along the cross axis. The optional value of this property is exactly the same as the parent’s align-items property, or the child’s align-self property if both are set.

Flex-start: start alignment

Flex-end: align the end segment

Center: center

Baseline: baseline alignment

“Stretch” : align

2. Shaft

As shown in the figure, the axis includes both the main axis and the cross axis. We know that the precent-content property determines how children are arranged along the main axis, and the align-items property determines how children are arranged along the cross axis. How is the axis itself determined? In flex layout, the flex-direction property determines the orientation of the main axis, and the direction of the cross axis is determined by the main axis.

  • The spindle

The starting end of the spindle is represented by flex-start and the end segment by flex-end. The position of the beginning and end segment corresponding to different main axes is also different.

Right: flex-direction: row

Down: flex-direction: column

Left: flex-direction: row-reverse

Up: flex-direction: column-reverse

  • Cross shaft

    The cross axis is formed by rotating the spindle 90° counterclockwise. The beginning and end segments of the cross axis are also represented by flex-start and Flex-end.

    The properties described above are some of the most commonly used parts of flex layouts and generally meet most of your requirements, although you may need to learn more if you want to implement a complex layout.

Flex advanced concepts

1. The parent container

  • Set the line wrap: flex-wrap

    Determines whether child containers are wrapped. Not only sequential but also reverse wrapping is supported.

Nowrap: No line breaks

Wrap: a newline

Wrap-reverse: indicates a line feed in reverse order

Reverse newline means newline in the opposite direction of the intersecting axis.

  • Combination of axial and newline Settings: flex-flow

    For example, flex-flow: row wrap. Flex-flow is a compound property, equivalent to a combination of flex-direction and flex-wrap.

    • Row and column can be set separately

    • Wrap, nowrap, etc., can be set separately

    • Row Nowrap and Column wrap can also be set at the same time

  • Align multiple lines along the cross axis: align-content

    Sets the alignment between rows when child containers are arranged in multiple rows.

Flex-start: start alignment

Flex-end: align the end segment

Center: center

Space-around: evenly distributed margins

Space-between: evenly spaced

“Stretch” : align

2. Children

  • Set the base size: flex-basis

    Flex-basis represents the original size of the subcontainer without scaling. When the main axis is horizontal, it represents width, and when the main axis is vertical, it represents height.

  • Set scaling: flex-grow

    The proportion of elastic extension of the child container. As shown in the figure, the remaining space is allocated to the child containers in a ratio of 1:2.

  • Set the shrink ratio to flex-shrink

    The percentage of elastic shrinkage of a subcontainer. As shown, the excess is subtracted from the subcontainer in a ratio of 1:2.

  • Set the order: order

    Change the order of the child containers to override the order in the HTML code. The default value is 0, and the value can be negative. The smaller the value, the higher the order.

That’s all the flex layout attributes, 12 of them, 6 parent and 6 child, which can be reviewed at any time in the following figure.

References:

  • MDN: CSS Flexible Box Layout
  • Flex Layout Tutorial: Syntax section
  • Flex layout study Notes
  • Flex layout in 30 minutes
  • Flex Guide for Elastic box models