What is the Flex layout?

Flex is short for Flexible Box, which stands for Flexible layout and is used to provide maximum flexibility for box-shaped models.

The basic concept

Elements with a Flex layout are called Flex containers, or containers for short. All of its child elements automatically become container members, called Flex Items. Any container can be specified as a Flex layout. Inline elements can also be laid out using Flex

<div class="box">
    <div class="item one">Project 1</div>
    <div class="item two">Project 2</div>
    <div class="item three">Project 3</div>
    <div class="item four">Item 4</div>
</div>
Copy the code
.box {
    width: 300px;
    height: 300px;
    background: aqua;
    display: flex;
}

.item {
    width: 50px;
    height: 50px;
    background: rgb(243.62.92);
    font-size: 13px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box .one {
    background: red;
}
.box .two {
    background: coral;
}
.box .three {
    background: forestgreen;
}
Copy the code

A. a box B. a box C. a box D. a box Each item box is an item, which can be understood as a sub-box or member

Container properties

  • The container has six properties, and the container can be thought of as the parent box, which is the box with the display: flex property set.

flex-direction

  • Determine the orientation of the main axis (that is, the alignment of items)

The flex-direction attribute has four values:

1. Row (default) : Set the main axis to horizontal, starting at the left end

When box flex-direction is set to row

2. Row-reverse: Set the spindle to horizontal with the starting point at the right end

When box flex-direction is set to row-reverse

3. Column: Set the main axis to vertical, with the starting point at the top

When box flex-direction is set to Column

4. Column-reverse: Set the main axis to vertical and the starting point to the bottom

When box flex-direction is set to column-reverse

flex-wrap

  • Defines line breaks for subboxes

The flex-wrap attribute has three values:

1. Norap (default) : no line breaks

It doesn’t matter if the box flex-wrap is set to NowRAP and the members don’t reach the width of the newline, but if the total width exceeds the parent box, the members will be squeezed, such as adding a few more members

<div class="item one">Project 1</div>
<div class="item two">Project 2</div>
<div class="item three">Project 3</div>
<div class="item four">Item 4</div>
<div class="item four">Project 5</div>
<div class="item four">Item 6</div>
<div class="item four">Item 7</div>
<div class="item four">Item 8</div>
Copy the code

2, wrap: line wrap, first line at the top

When the box flex-wrap is set to wrap, I have removed the height of the parent box, which is split into two lines that are too wide to look good

3, wrap-reverse: newline, first line below

When flex-wrap is set to wrap-reverse for box

flex-flow

  • Is short for flex-direction and flex-wrap. The default value is row nowrap.
.box {
    flex-flow: <flex-direction> <flex-wrap>;
}
Copy the code

justify-content

  • Sets the alignment of members on the spindle

The implement-content attribute has five values:

Flex-start (default) : left-justify

2, flex-end: right-align

3. You’re in the center

Space-betweet: Between the two ends, the intervals between members are all equal

5. Space-around: Each member has equal spacing on both sides. As a result, the spacing between members is twice as large as the spacing between items and borders

align-items

  • The align-items property defines how members align on the cross axis (the cross axis is the y axis if the main axis is x).

The align-items property has five values:

1. Flex-start: Align the starting point of the cross axis

2. Flex-end: Align the end of the cross axis

3. Center: align the midpoint of the cross axis

Padding-top: 15px; padding-top: 15px;

5. Stretch (default) : If the member height is not set or set to Auto, it will take up the entire height of the container. Here I have removed the height of the member

align-content

  • The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. So if there’s only one line of members then this property is useless, so let’s set the members to 8 and wrap them, right

The align-content property has six values:

1. Flex-start: align with the starting point of the cross axis

2, Flex-end: align with the end of the cross axis

3. Center: align with the midpoint of the cross axis

4. Space-between: align with both ends of the crossing axis, and the spacing between the axes is evenly distributed

5, space-around: The space on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders

6. Stretch (default value) : axis occupies the whole cross axis

Project attributes

  • Items (members, subboxes) have six attributes

order flex-grow flex-shrink flex-basis flex align-self

order

The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0

.box .one {
    background: chocolate;
    order: 4;
}

.box .two {
    background: coral;
    order: 1;
}

.box .three {
    background: forestgreen;
    order: 3;
}

.box .four {
    background: red;
    order: 2;
}
Copy the code

flex-grow

  • The flex-grow property defines the enlargement ratio of the member, which defaults to 0, or no enlargement if there is free space.
  • If all members have a flex-grow attribute of 1, they divide the remaining space equally, if any. If one member has a flex-grow attribute of 2 and all the other items are 1, the former takes up twice as much free space as the other items.

Set all flex-grow attributes to 1 (add flex-grow: 1; to item) I took the rounded corners off here

Set the Flex-Grow attribute to 2 for all project 2 members

flex-shrink

  • The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.
  • If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.
  • Negative values for this property are not valid.

When the Flex-shrink attribute is set to 1 for all projects, the Flex-shrink attribute is set to 0 for project 2

flex-basis

  • The Flex-basis property defines the amount of principal space that the project occupies before allocating excess space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
  • That is to say, when members want to divide the remaining space of the container, they can use the Flex-basis attribute to occupy a space for individual members and then participate in dividing the remaining space. After dividing the remaining space, individual members and the space occupied before are the final size of the member with the Flex-basis attribute added
  • It can be set to the same value as the width or height attribute (such as 50px), and the project will take up a fixed space.

For example, I gave project 2 a flex-basis property of 50px

.box .one {
    background: chocolate;
    flex: 1;
}

.box .two {
    background: coral;
    flex: 1;
    flex-basis: 50px;
}

.box .three {
    background: forestgreen;
    flex: 1;
}

.box .four {
    background: red;
    flex: 1;
}
Copy the code

flex

  • The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.
  • Flex: 1 (indicates that all members will split the remaining space equally)

align-self

  • The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.
  • This property may take six values, all identical to the align-items property except auto.
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code