Flex Layout Learning

1. Flex layout principles

Flex: Abbreviation for Flexible Box, used to provide maximum flexibility for box models. Any container can be specified as a Flex layout.

• When we set the parent box to flex layout, the float, clear, and vertical-align attributes of the child elements become invalid;
• Flexible layout = Flexible box layout = Elastic layout = Flex layout

1.1 Layout Principles

Elements with a Flex layout are called Flex containers.

All of its child elements automatically become container members, called Flex projects, or projects for short.

Common flex layout parent properties

The following six attributes are set for the parent element:

• Flex-direction: sets the spindle direction
• Context-content: Sets the arrangement of child elements on the main axis
• Flex-wrap: Sets whether a child element is wrapped on a line
• Align-content: Sets the arrangement of children on the side axis (multiple lines)
• Align-items: Sets the arrangement of child elements on the side axis (single line)
• Flex-flow: compound property, equivalent to setting both flex-direction and flex-wrap

2.1 flex-direction Specifies the spindle direction

1. In flex layout, there are two directions: main axis and side axis

• The default axis is x, horizontal to the right;
• The default side axis is the y axis, horizontal and downward.

2. Attribute Value:

2.2 context-content: Sets the arrangement of child elements on the main axis

Note: Be sure to specify the main axis before using this property

2.3 flex-wrap: Sets whether a child element is wrapped

By default, items are placed in one line. The flex-wrap attribute defines that flex layouts are non-newline by default (exceeding the width of the parent reduces the width of the child elements).

2.4 align-content: Sets the arrangement of child elements on the side axis (multiple lines)

Sets the arrangement of children on the side axis and can only be used when children break a line (multiple lines), it has no effect on a single line

2.5 align-items: Sets the arrangement of child elements on the side axis (single row)

This property controls how the children are arranged on the side axis (default is the Y-axis) and is used when the children are single items (single row)

2.6 Flex-flow: Compound property, equivalent to setting both flex-direction and flex-wrap properties

flex-direction: column;
flex-wrap: wrap; // Can be shortened to:flex-flow: column wrap;
Copy the code

Common properties of Flex layout subitems

• Number of flex subprojects
• Align-self controls the alignment of the sub-axis of the item itself
• The order attribute defines the order in which the children are sorted (sequential)

3.1 Share of Flex subprojects

The Flex property defines the amount of remaining space allocated to a subproject, using Flex to indicate how many shares.

Case 1: Left and right sides fixed, middle adaptive

<div>
  <section>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>
Copy the code

section {
  width: 60%;
  height: 150px;
  background-color: pink;
  margin: 0 auto;
  display: flex;
}

section div:nth-child(1) {
  width: 100px;
  height: 150px;
  background-color: red;
}

/* The left and right sides are fixed, the middle is adaptive */
section div:nth-child(2) {
  flex: 1;
  background-color: green;
}

section div:nth-child(3) {
  width: 100px;
  height: 150px;
  background-color: blue;
}
Copy the code

Case 2: Three equal portions

<p>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</p>
Copy the code

p {
  display: flex;
  width: 60%;
  height: 150px;
  background-color: pink;
  margin: 100px auto;         
}
/* * * */
p span {
  flex: 1;
}
Copy the code

Case 3: Unequal distribution

p {
  display: flex;
  width: 60%;
  height: 150px;
  background-color: pink;
  margin: 100px auto;
}

p span {
  flex: 1;
}
/* The second one is 2 */
p span:nth-child(2) {
  flex: 2;
  background-color: skyblue;
}
Copy the code

3.2 align-self controls the arrangement of the sub-items themselves on the side axis

The align-self property allows a single item to be aligned differently from 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.

Case 1:

<div id="box">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
Copy the code

#box {
  display: flex;
  width: 80%;
  height: 300px;
  background-color: pink;
}

#box span {
  width: 150px;
  height: 100px;
  background-color: purple;
  margin-right: 5px;
}

#box span:nth-child(3) {
  align-self: flex-end;
}
Copy the code

3.3 The order attribute defines the order of subitems (before and after)

The smaller the value is, the more advanced it is. The default value is 0.

#box {
  display: flex;
  width: 80%;
  height: 300px;
  background-color: pink;
}

#box span {
  width: 150px;
  height: 100px;
  background-color: purple;
  margin-right: 5px; } // The default is yes0, -1than0Small, the secondspanWill be in advance#box span:nth-child(2) {
  order: -1;
}

#box span:nth-child(3) {
  align-self: flex-end;
}
Copy the code