Container element attributes

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

order

This property determines the order of elements. The smaller the value is, the more advanced it is. The default value is 0. If both are 0, they are sorted in code order.

<style>
    .box {
      width: 800px;
      display: flex;
    }

    .box div {
      width: 200px;
    }

    .first {
      background: red;
      order: 4;
    }

    .second {
      background: blue;
      order: 3;
    }

    .third {
      background: yellow;
      /* order: 2; */
    }

    .four {
      background: green;
    }
    
  <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="four">4</div>
  </div>
Copy the code

flex-grow

Specifies the size of container elements when the width of the container is greater than the total width of the container elements. The default value is 0, that is, if there is free space, it is not enlarged. Note: When the container is set to flex-wrap: nowrap; When the container width is insufficient without a line feed, the elastic element is determined by flex-grow. The width of the elastic container is exactly equal to the sum of the elements’ widths, so whatever flex-grow is does not take effect.

<style>
    .box {
      width: 800px;
      display: flex;
      border: 1px solid black;
    }

    .box div {
      width: 100px;
    }

    .first {
      background: red;
      /* order: 4; */
      flex-grow: 2;
    }

    .second {
      background: blue;
      /* order: 3; */
      flex-grow: 1;
    }

    .third {
      background: yellow;
      /* order: 2; */
    }

    .four {
      background: green;
    }
  </style>
  
  <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="four">4</div>
  </div>
Copy the code

flex-shrink

Defines the shrinking scale of an item (how to shrink if the container width is less than the total width of the element). The default is 1, meaning that the item will shrink if there is not enough space. Equal scale shrinkage by default. If the value is 0, the element does not shrink.

  <style>
    .box {
      width: 800px;
      display: flex;
      border: 1px solid black;
    }

    .box div {
      width: 250px;
    }

    .first {
      background: red;
      /* order: 4; */
      /* flex-grow: 2; */
      flex-shrink: 0;
    }

    .second {
      background: blue;
      /* order: 3; */
      /* flex-grow: 1; */
      flex-shrink: 2;
    }

    .third {
      background: yellow;
      /* order: 2; */
    }

    .four {
      background: green;
    }
  </style>
  
  <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="four">4</div>
  </div>
Copy the code

Flex-basis (personally not very useful)

Set the initial size of the element on the main axis. The initial size is the size of the element before flex-grow and Flex-shrink take effect. If flex-grow and Flex-shrink are set, this value will become invalid. The default value is auto. If width is set, the element size is determined by width/height (main axis), if not by content. When set to px, it overwrites the main axis width/height of the element itself.

Flex-basis: 0 and flex-basis: auto

  • flex-basis: autoRepresents the original size of the project when set toautoRetrieves it according to the principal axisflex-item 的 width 或 heightValue asflex-basisThe value of the. ifwidth 或 heightA value ofauto,flex-basisSet tocontentThat is, the contents of flex-based elements are automatically resized.
  • flex-basis: 0Equivalent to specifying a width or height (depending on the main axis) of 0.

flex

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto.

Some common abbreviations are:

-flex: 1 = flex: 1 1 0% -flex: 2 = flex: 2 1 0% -flex: auto = flex: 1 1 auto-flex: None = flex: 0 0 autoCopy the code

align-self

Allows a single item to have a different alignment than other items, overriding the align-items property.

Can take: align – self: auto | flex – start | flex – end | center | baseline | stretch.

The default value is auto, which inherits the align-items property of the parent element.

  <style>
    .box {
      width: 800px;
      height: 300px;
      display: flex;
      border: 1px solid black;
      align-items: center;
    }

    .box div {
      width: 150px;
    }

    .first {
      background: red;
      align-self: auto;
    }

    .second {
      background: blue;
      align-self: stretch;
    }

    .third {
      background: yellow;
      align-self: baseline;
    }

    .four {
      background: green;
      align-self: flex-end;
    }
  </style>
  
  <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="four">4</div>
  </div>
Copy the code