This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Flex layout (Flexible layout) is one of the most used layout schemes in Web development

Once flex layout is enabled, the layout of the elements inside Flex has nothing to do with whether a Flex-Item is a block-level element or an inline element. The Flex layout is all up to you, depending on the properties you set

The basic use

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 400px;
      background-color: #FF9933;
    }

    .item {
      width: 100px;
      height: 100px;
      color: #fff;
      line-height: 100px;
      text-align: center;
    }

    .item1 {
      background-color: #33CC33;
    }

    .item2 {
      background-color: #CCDDDD;
    }

    .item3 {
      background-color: #0099CC;
    }

    .container {
      display: flex;
    }
  </style>
</head>
<body>

  <! -- We can use display: Flex --. Container for block level elements inline-flex --. Container after flex layout is enabled for inline elements Container is flex-item. Every item inside a Container is flex-item -->
  <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
  </div>
</body>
</html>
Copy the code

Layout model

The flex – the attribute of the container

flex-direction

By default, Flex items are sorted from Main Start to Main end along the main axis

Flex-driection has four values:

Row: Default values are arranged from left to right

Row-reverse: rows from right to left

Column: rows from top to bottom

Column-reverse: columns are arranged from bottom to top

justify-content

Context-content determines how flex items are aligned on the main axis

Illustration-content Optional value:

Flex-start: defaults to left-aligned values

The flex – end: right alignment

Center: a center

Space-between: aligns both ends

  • flex-itemsThe distance between them is equal
  • withmain startandmain endfull-justified

Instituted: evenly spaced

  • Flex-items are equidistant from each other

  • The distance between flex-items and main Start and Main End is equal to the distance between flex-items

space-around

  • Flex-items are equidistant from each other

  • The distance between flex-items and main Start and Main End is half of the distance between flex-items

align-items

Align-items determines the alignment of flex-items on the cross axis

An optional value

Normal – Default value

  • ifflex-itemsSet the height, layout andflex-startsimilar
  • ifflex-itemsNo setting height, layout andstretchsimilar

Stretch: The height is the same as that of the Flex Container

  • Set up theflex itemsincross axisThe direction of thesizeforauto
  • That is, the height automatically stretches to fill toflex container

flex-start

  • withcross startalignment
  • At the top of the alignment

flex-end

  • withcroess endalignment
  • At the bottom of the alignment

center

  • Vertical center
  • flex-itemsThe center line of the container, vertically centered and aligned

baseline

  • Base line alignment of content (that is, the bottom alignment of the letter X)
  • Note: The baseline for comparison is the baseline for the first row, not the other rows

flex-wrap

Flex-wrap determines whether elements in flex-Container are displayed on a single line or multiple lines

  • If a row does not fit, it is compressed as much as possibleflex-itemsThe width of the

Mowrap – Default value for no line feed

Wrap – multiple lines

Wrap-reverse – Multiple rows are reversed on the cross axis

flex-flow

Flex-flow is short for flex-direction + flex-wrap

/* flex-flow: flex-direction Optional value Flex-wrap Optional value */
/* If either option of flex-flow is not written, the corresponding default value */ is used
/* The two flex-flow options are configured in no order - either one comes first */
{
  flex-flow: row-reverse wrap;
}
Copy the code

align-content

Align-content determines the alignment of multiple flex items on the cross axis

The usage and optional values are consistent with precy-content

The flex – the attribute of the items

order

Order determines the order in which flex-items are arranged

  • The default value is 0

  • Can set any integer (positive integer, negative integer, 0)

  • The smaller the value, the higher the rank

  • If the order values are the same, they are sorted in the default order in the code

.item1 {
  background-color: hsl(120.60%.50%);
}

.item2 {
  background-color: #CCDDDD;
  order: 6;
}

.item3 {
  background-color: #0099CC;
  order: -1;
}

.container {
  display: flex;
}
Copy the code
 <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
  </div>
Copy the code

align-self

Setting the align-self value of a flex-item overrides the align-items set on flex-Container

So align-self has the same optional value as align-items

.item1 {
  background-color: hsl(120.60%.50%);
  align-self: flex-start;
}

.item2 {
  background-color: #CCDDDD;
}

.item3 {
  background-color: #0099CC;
  align-self: flex-end;
}

.container {
  display: flex;
  align-items: center;
}
Copy the code
 <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
  </div>
Copy the code

flex-grow

Does flex-grow determine how Flex items expand

The value of fle- Grow can be any non-negative number (decimal, integer, 0), and the default is 0

The Flex-grow property takes effect when the Flex Container has a free size on the main Axis (that is, when it has a free width)

  1. When the sum of flex-grow for all Flex items exceeds 1, the size of each Flex item extension is the sum of the remaining size/all flex-grow items

  2. When the sum of flex-grow for all Flex items is less than 1, the size of each Flex item extension is the remaining size * flex-grow

The final size of flex items cannot exceed max-width/max-height

/* Total width 600px, each element 100px remaining 300px */
.item1 {
  background-color: hsl(120.60%.50%);
  flex-grow: 1; /* Total length 200px */
}

.item2 {
  background-color: #CCDDDD;
  flex-grow: 1; /* Total length 200px */
}

.item3 {
  background-color: #0099CC;
  flex-grow: 1; /* Total length 200px */
}
Copy the code
/* Total width 600px, each element 100px remaining 300px */
.item1 {
background-color: hsl(120.60%.50%);
flex-grow: 2; /* 300/5 = 60 Expanded express 100 + 60 * 2 = 220 */
}

.item2 {
background-color: #CCDDDD;
flex-grow: 2; /* 300/5 = 60 Expanded express 100 + 60 * 2 = 220 */
}

.item3 {
background-color: #0099CC;
flex-grow: 1; /* 300/5 = 60 Expanded express 100 + 60 * 1 = 160 */
}
Copy the code
/* Total width 600px, each element 100px remaining 300px */
.item1 {
  background-color: hsl(120.60%.50%);
  flex-grow:.2; /* 100 + 300 * 0.2 = 160 */
}

.item2 {
  background-color: #CCDDDD;
  flex-grow:.2; /* 100 + 300 * 0.2 = 160 */
}

.item3 {
  background-color: #0099CC;
  flex-grow:.1; /* 100 + 300 * 0.1 = 130 */
}
Copy the code
/* Total width 600px, each element 100px remaining 300px */
.item1 {
  background-color: hsl(120.60%.50%);
  flex-grow: 2; /* 100 + 300/4.1 * 2 = 246.34 */
}

.item2 {
  background-color: #CCDDDD;
  flex-grow: 2; /* 100 + 300/4.1 * 2 = 246.34 */
}

.item3 {
  background-color: #0099CC;
  flex-grow:.1;  /* 100 + 300/4.1 * 0.1 = 107.32 */
}
Copy the code

flex-shrink

Flex -shrink is used to control how flex items shrink

The value of ducle-shrink can be any non-negative number (positive decimal, positive integer, 0), and the default value is 1

The Flex-shrink attribute takes effect only when flex items exceed the size of the Flex container on the main Axis (that is, when overflow occurs)

  1. When the sum of flex-shrink for all Flex items exceeds 1, the size of each Flex item extension is the sum of the overflow size * flex-grow

  2. When the sum of flex-shrink for all Flex items is less than 1, the size of each Flex item extension is overflow size * flex-grow

    When the sum of flex-shrink for all Flex items is less than 1, overflow occurs even if flex-items are already scaled

The final size of flex-items after shrinking cannot be less than min-width/min-height

The minimum width of flex-item is the width of the contents of flex-item

/* Total width 500px, each element 200px overflows 100px */
.item1 {
  background-color: hsl(120.60%.50%);
  flex-shrink: 2; /* 200-100/5 * 2 = 160 */
}

.item2 {
  background-color: #CCDDDD;
  flex-shrink: 2; /* 200-100/5 * 2 = 160 */
}

.item3 {
  background-color: #0099CC;
  flex-shrink: 1;  /* 200-100/5 * 1 = 180 */
}
Copy the code
/* Total width 500px, each element 200px overflows 100px */
.item1 {
  background-color: hsl(120.60%.50%);
  flex-shrink:.2; /* 200-100 * 0.2 = 180 */
}

.item2 {
  background-color: #CCDDDD;
  flex-shrink:.2; /* 200-100 * 0.2 = 180 */
}

.item3 {
  background-color: #0099CC;
  flex-shrink:.1;  /* 200-100 * 0.1 = 190 */
}
Copy the code
/* Total width 500px, each element 200px overflows 100px */
.item1 {
  background-color: hsl(120.60%.50%);
  flex-shrink: 2; /* 200-100/4.1 * 2 = 151.22 */
}

.item2 {
  background-color: #CCDDDD;
  flex-shrink: 2; /* 200-100/4.1 * 2 = 151.22 */
}

.item3 {
  background-color: #0099CC;
  flex-shrink:.1;  /* 200-100/4.1 * 0.1 = 197.5s6 */
}
Copy the code

flex-basis

Flex-basis sets the width of the Flex item (when Flex-direction is row or row-reverse) or the height (when flex-direction is column or column-reverse)

The default value is auto, which is whatever width or height the Flex item was originally set to

You can also set a specific value, in which case the width or height set by Flex-basis overrides the original width or height of the Flex item

.item {
  flex-basis: 100px;
}
Copy the code

In flex layout, determine the priority of the flex-item width and height attribute;

  1. max-width/min-width/max-height/min-height
  2. flex-basis
  3. width/height
  4. The width or height of the content

flex

Flex is short for flex-grow+ flex-shrink+ flex-basis

The Flex property can specify 1, 2, or 3 values

Single value

  • No unit number — flex-grow
  • Effective width value — flex-basis
  • Such as:none.auto.initalAnd so on

The double value

  • The first value must be unitary – flex-grow
  • The second value can be one of the following
    • No unit value — flex-shrink
    • Effective width value — flex-basis

Three values

  • No unit value — flex-grow
  • No unit value — flex-basis
  • Effective width value — flex-basis