Flex layout beginner notes

<div id="app">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
</div>
Copy the code

  <style>
    #app{
      width: 500px;
      height: 500px;
      background-color: cornsilk;
      /* Use flex layout */
      display: flex;
      /* flex-direction Row indicates the direction of the main axis. Row-reverse indicates the direction of the main axis. Column indicates the direction of the cross axis
      flex-direction: row;
      /* Out of width wrap nowRap defaults to no line wrap child elements equal scale wrap out of wrap wrap-reverse out of line wrap direction reverse */
      /* flex-wrap: wrap; * /
      /* flex-flow is a combination of flex-direction and flex-wrap. The first value represents the flex-directio value. The second value represents the flex-wrap value
      /* flex-flow: column wrap; * /
      /* justify-content specifies how the axis will be evenly spaced. Flex-start will be on the left side of the index flex-end will be on the right side of the index center will be in the middle of the index Space-around Each child element is equally spaced, so the middle distance is 2 times the left and right sides */
      justify-content: space-around;
      /* align-conten specifies the alignment of the intersecting axis and its function as context-centent */
      align-content: flex-start;
      /* align-items = flex-start = flex-end = flex-end = center = center Baseline The first child is aligned with text at the bottom */
      align-items: flex-start;


    }
    .item{
      width: 100px;
      height: 100px;
    }
    .item1{
      background-color: blue;
      /* orde indicates the display order
      order: 2;
      /* Flex-grow controls the size of the element column to be set to any non-negative number (decimal, integer, 0). This takes effect only when the sum of the elements that determine the direction is less than the parent. If the sum of the elements is greater than about 1, the remaining space is proportionally divided
      flex-grow: 2.;
      /* Flex-shrink control the element shrink ratio column can be set to any non-negative number (decimal, integer, 0) until the sum of all elements determining the direction is greater than the parent. If the sum is greater than 1, the element shrinks proportionally. If the sum is less than, the element shrinks proportionally but still exceeds */
      flex-shrink: 2;
      /* flex-basis defaults to auto. Maxwidth maxheight minwidth minheight > flex-basis > width > content size */
      flex-basis: auto;
      /* flex is a combination of flex-grow, flex-shrink, and flex-basis properties */
      flex: 1 1 auto;
    }
    .item2{
      background-color: darkgoldenrod;
      order: 1;
      flex-grow: 2.;
    }
    .item3{
      background-color: darkmagenta;
      order: 3;
      flex-grow: 2.;
    }
  </style>
Copy the code