【英文】Flex学习笔记

Posted on Edited on Views:

Preface

Flex Layout Study Notes

Parent Element Properties

  • When the box is set to flex layout, the float, clear, and vertical-align properties of the child elements will be invalid.
  • If the main axis is horizontal, the cross axis is vertical; if the main axis is vertical, the cross axis is horizontal.

display: flex;: Use flex layout.
flex-direction: set the direction of the main axis

row: The default value, from left to right
row-reverse: From right to left
column: From top to bottom
column-reverse: From bottom to top

flex-wrap: set whether the child elements wrap

nowrap: The default value, no automatic wrapping. In this case, if there are too many child elements, it will force the size of the child elements to change.
wrap: Automatically wrap. In this case, whether the child elements are too many or not, it will not change the size of the child elements and will automatically wrap the elements that cannot fit.

flex-flow: flex-direction flex-wrap: Set the direction of the main axis and whether to wrap at the same time.
justify-content: Set the arrangement of the child elements on the main axis.

flex-start: The default value, from start to end.
flex-end: From end to start.
center: Centered
space-around: Equally distribute the remaining space, with gaps on both sides.
space-between: Equally distribute the remaining space, without gaps on both sides.

align-items: For single-line child elements, set the arrangement of the child elements on the cross axis.

flex-start: The default value, from start to end.
flex-end: From end to start.
center: Center alignment.
stertch: Stretch alignment (child boxes cannot specify height).

align-content: For multi-line child elements, set the arrangement of the child elements on the cross axis.

flex-start: The default value, from start to end.
flex-end: From end to start.
center: Align the child elements as a whole in the center.
space-around: The child elements are close to both sides of the cross axis.
space-between: Each row of child elements is equally divided on the cross axis, and then aligned as a whole in the center.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <style>
      div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: flex-start;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Child Element Properties

Allocate Remaining Space to Child Elements

flex <num>: Specify weight proportion.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <style>
      div {
        display: flex;
      }
      div span {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Control the arrangement of the current child element on the cross axis

  • Override the align-items property of the child element by using the align-self property.

align-self: For single-line child elements, set the arrangement of the child elements on the cross axis.

auto: Follow the align-self property of the parent element. If there is no parent element, align with stertch.
flex-start: From start to end.
flex-end: From end to start.
center: Center alignment.
stertch: Stretch alignment (child boxes cannot specify height).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <style>
      div {
        display: flex;
      }
      div span:nth(0) {
        align-self: auto;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Specify the arrangement order of child items

order <num>: Specify the arrangement order of child items. The smaller the number, the closer to the front, it can be 0, positive number or negative number.

0: Default value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <style>
      div {
        display: flex;
      }
      div span:nth(1) {
        order: -1;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Finished

References

Bilibili - Just Call It That