flex layout (study notes)

One: The principle of flex layout

①: flex is the abbreviation of flexble Box, meaning 'elastic box', which is used to provide maximum flexibility for the box model. Any container can be specified as a flex layout.

When we set the flex layout for the parent box, the float, clear and vertical-align attributes of the child elements will be invalid
Flexible layout = flexible box = flexible box layout = flex layout

②: The element adopting flex layout is called flex container (flex container), referred to as 'container', and all its sub-elements automatically become members of the container, and become flex items (flex item), referred to as 'item'

<style>
        .father{
            height: 100px;
            width: 80%;
            display: flex;
            justify-content: space-around;
            background-color: yellow;
        }
        .father span{
            background-color: red;
            height: 100px;
            width: 150px;
        }

 </style>
<body>
    <div class="father">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

The div in the above figure is the flex container
The span in the above figure is the subcontainer flex item
Subcontainers can be arranged horizontally or vertically

Summarize the principle of flex layout: it is to add flex attributes to the parent box to control the position and sorting method of the box

③: There are six common parent attributes

flex-direction: Set the direction of the main axis
justify-content: Set the arrangement of child elements on the main axis
flex-wrap: Set whether the child element wraps
align-content: Set the arrangement of child elements (multiple lines)
align-items: Set the arrangement of sub-elements on the axis (single line)
flex-flow: Composite attribute, which is equivalent to setting flex-direction and flex-wrap at the same time

Let's talk about the role of the following attributes in detail

2. There are six common parent attributes

1. flex-direction sets the direction of the main axis⭐

(1) Spindle and Measuring Axis

In the flex layout, it is divided into two directions: the main axis and the measurement axis. The same name is: row and column, x axis and y axis

The default axis direction is the x-axis direction, horizontal to the right
The default measurement axis direction is the y-axis, horizontally downward

(2) Attribute value

The flex-direction attribute determines the direction of the main axis (that is, the direction in which items are arranged)

Note: The main axis and measuring axis will change, it depends on who is the main axis in the flex-direction setting, the rest is the measuring axis, and our sub-elements are arranged along the main axis

2. justify-content sets the arrangement of sub-elements on the main axis⭐

The justify-content property defines how items are aligned on the main axis

Note: Before using this property, be sure to determine which axis is which

3. flex-wrap sets whether the child element wraps line ⭐

By default, items are arranged on a line (also known as 'axis'), defined by the flex-wrap property, and the default is not to wrap in flex layout

4. align-items sets the arrangement of sub-elements on the measuring axis (single line)⭐

This property is used to control the ordering of sub-items on the measurement axis (the default is y-axis) when the sub-item is a single item

Then the problem comes. The align-item can only be set for a single line. If there are multiple lines, how to set it as shown in the figure below?

If you want to implement flex provides the following properties

5. align-content sets the arrangement of sub-elements on the measuring axis (multiple lines)⭐

Set the arrangement of sub-items on the measuring axis and can only be used when the sub-item appears in a new line (multiple lines), it has no effect under a single line

Let's summarize the difference between align-content and align-items

align-items applies to single-line cases, only top-alignment, bottom-alignment, centering and stretching
align-content is suitable for newlines (multiple lines) (invalid for single lines), you can set attributes such as top alignment, bottom alignment, centering, stretching, and evenly distributing the remaining space
The summary is to find align-item in a single line and align-content in multiple lines

6，flex-flow

The flex-flow property is a composite property of the flex-direction and flex-wrap properties

flex-flow:row wrap;

3. Common properties of flex layout subitems

The number of shares occupied by flex sub-items
align-self controls the ordering of the subitems themselves on the measuring axis
The order attribute defines the order in which subitems are arranged (before and after)

1, flex attribute⭐

The flex attribute defines how many points the sub-item allocates the remaining space and uses flex to represent

Case: Use flex to achieve the following effects

<style>
 .one {
            background-color: rgb(40, 181, 80);
            height: 100px;
            width: 800px;
            display: flex;
        }
        .one div{
            flex: 1;
        }
        .one div:nth-child(2){
            flex: 2;
        }
    
</style>
<body>
    <div class="one">
        <div style="background-color: red;height: 100px;"></div>
        <div style="background-color: rgb(157, 75, 75);height: 100px;"></div>
        <div style="background-color: rgb(62, 36, 36);height: 100px;"></div>
    </div>
</body>

2, align-self controls the arrangement of the subitem itself on the measuring axis

The align-self attribute allows a single item to have a different alignment from other items, and can override the align-items attribute. The default value is auto, which means inheriting the parent element align-items attribute. If there is no parent element, it is equivalent to stretch

3, the order attribute defines the order in which items are sorted

The smaller the value, the higher the arrangement, the default is 0

Note : not the same as z-index