Flex Layout Tutorial: Syntax section

I always remember style tags in English, but the context-content and align-items attribute really confuse me. This time I’m going to just remember that the context-content attribute defines the alignment of items on the main axis

I. Basic concepts

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items” for short.

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end

The following six properties are set on the container.

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

By default, the direction of the spindle is horizontal, The flex-direction attribute, which changes the orientation of the main axis, defines the alignment of items on the main axis. The align-items property defines how items are aligned on the cross axis. Note that, assuming flex-direction changes the axis orientation, precy-content operates on items in the axis direction, not necessarily horizontal!!

The second example

1. Flex implements vertical center display
 <div class="father">
    <div class="son1">hello</div>
  </div>
  <style>
    /* precision-content defines the orientation of the main axis. When flex-direction is not defined, the default is horizontal, with the starting point being the leftmost */
    .father {
      width: 200px;
      height: 200px;
      display: flex;
      background-color: burlywood;
      justify-content: center;
      align-items: center;
    }
  </style>
Copy the code

2. Multi-element centered display (very common)
  <div class="father">
    <div class="son1">hello</div>
    <div class="son2">Hahaha hahaha</div>
    <div class="son3">Lovely very</div>
  </div>
  <style>
    .father {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
Copy the code

flex-direction: column; I’ve changed the direction of the principal axis

The vertical operation should be context-content, the horizontal operation property of the item should be align-items, and if you want a single item horizontally centered, it should be align-items: center.

3. Align both ends, with equal spacing between items (very common)
 <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
  </div>
  <style>
    .son1..son2..son3 {
      width: 100px;
      height: 200px;
      background-color: coral;
    }
    .father {
      display: flex;
      /* Assume the left and right padding is 20px */
      padding: 0px 20px;
      justify-content: space-between;
    }
  </style>
Copy the code

For spacing, we can measure the left and right padding, and then use space-between on the main axis to unify the spacing

4. Wrap
 <div class="father">
    <div class="son1"></div>
    <div class="son1"></div>
    <div class="son1"></div>
    <div class="son1"></div>
  </div>
  <style>
    .son1 {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-top: 10px;
      background-color: coral;
    }
    .father {
      display: flex;
      width: 380px;
      flex-wrap: wrap;
    }
  </style>
Copy the code

The default is no line wrapping. Set wrap to wrap

Only through repeated understanding and memorization can you write it out with a wave of your hand

Are there any other scenes you guys use? Welcome to leave a message