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:

Attribute values instructions
row Default is left to right
row-reverse From right to left
column The main axis is set to y, and the X axis becomes the side axis, running from top to bottom
column-reverse The main axis is set to y, and the X axis becomes the side axis from bottom to top

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

Attribute values instructions
flex-start Default, starting at the head, left to right if the main axis is X-axis
flex-end I’m going to start at the tail
center Align in axis center (horizontally centered if axis is x)
space-around Bisecting remaining space
space-between Edge both sides and then divide the remaining space equally

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).

Attribute values instructions
no-wrap Don’t wrap
wrap A newline

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

Attribute values instructions
flex-start Default value, starting alignment at the head of the side axis
flex-end Begin to align at the tail of the side axis
center Display in the middle of the side axis
space-around The subterm bisects the remaining space on the lateral axis
space-between The subterm is first distributed at both ends of the lateral axis and then bisects the remaining space
stretch Sets the height of the child element to equal the height of the parent element

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)

Attribute values instructions
flex-start Default value, from top to bottom
flex-end From the bottom up
center Cluster together center (vertical center)
stretch The tensile

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