This is the 13th day of my participation in the August More Text Challenge.More challenges in August

In the early days, it was common to write web pages with a tabular layout. Then came the box model, which relied on the display + position + float properties. It was very inconvenient for special layouts, such as vertical centring, which was not easy to implement, and then there was a growing demand for the elastic box model

As long as you add the display: Flex attribute to the element’s parent box, you have an elastic box model where any container can be assigned a Flex layout, and inline elements can use flex layouts

    // Inline elements
    .box{
      display: inline-flex;
    }
Copy the code

1. Basic concepts

An element that uses Flex layout is a Flex container, or “container,” and all its children are called Flex projects, or “projects.“

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size. The information comes from here

2. Container properties

With the basics behind us, let’s take a look at some of his attributes:

Property of the container, which sets display:flex’s parent box

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

2.1 the flex – direction

This property determines the orientation of the main axis, that is, whether items in the container are lined horizontally or vertically

    .box {
        flex-direction: row | row - reverse | column | column lines - reverse, in turn, the column, in turn, the columns of the}Copy the code

2.2 the flex – wrap

This property determines whether you can choose to wrap or not when a row of elements in your container does not fit. If not, the items in your container will be shrunk

    .box {
        flex-wrap: nowrap | wrap | wrap - reverse the non-breaking in changed direction and, in turn,}Copy the code

2.3 the flex – flow

So this is just shorthand for these two properties, nothing to say

    .box {
        flex-flow: row  wrap
}

Copy the code

2.4 the justify – content

This is what determines the alignment of the spindle

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code
  • flex-start(Default) : Left-justified
  • flex-end: the right alignment,
  • centerCenter:
  • space-between: Align both ends with equal spacing between items.
  • space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border

2.5 the align – items

So this is the decision how is it aligned on the cross axis

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code
  • flex-start: Aligns the starting point of the cross axis.
  • flex-end: Aligns the ends of the intersecting axes.
  • center: Midpoint alignment of cross axes.
  • baseline: Baseline alignment of the first line of the project.
  • stretch(Default) : If the height of the item is not set or is set to Auto, the item takes up the entire container height.

2.6 the align – content

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

  • flex-start: aligns with the starting point of the crossing axis.
  • flex-endAlign with the endpoint of the intersecting axis.
  • centerAlign with the midpoint of the intersecting axis.
  • space-between: Aligned with both ends of the cross axes, the spacing between axes is evenly distributed.
  • space-aroundThe spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
  • stretch(Default) : Axis takes up the entire cross axis.

These are all container properties

This is the usual vertical centralization method, and that 100vh is the entire height of the viewport, or vw if it’s the width

    .box {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
Copy the code