HTML&CSSCSS

Flex

  1. flex layout features

    Traditional layout: good compatibility, cumbersome layout, limited, cannot be well laid out on the mobile side. flex is a one-dimensional layout.

    Flex flexible layout: easy to operate, simple layout, easy to use on mobile, poor browser support on PC, not supported/partially supported below IE11.

    Recommendation: Use traditional layout for PC side page layout, and flex layout for mobile terminal/PC side without considering compatibility issues.


  2. Flex layout principle

    flex is the abbreviation of flexible box, flexible layout, used to provide maximum flexibility for the box model, any container can specify flex layout. An element that uses flex layout is called flex container; all its child elements automatically become container members, called flex item.


    After the parent element sets the flex layout, the float, clear and vertical-align properties of the child element will be invalid. (floats are out. And flex can center elements vertically, so vertical-align doesn’t work).


    Summary: It is to control the position and arrangement of the child boxes by adding the flex property display:flex; to the parent box. Note the difference with display:block.

    • display :

      Property Value Description Tailwind
      flex flex layout flex

  1. Common attributes of flex layout parents

    • flex-direction: Set the direction of the main axis (not important)

      Main and Cross axes: rows and columns, x-axis and y-axis. The default main axis is horizontal to the right and the cross axis is vertical downward. The main axis and the side axis will change, depending on who is set as the main axis in flex-direction, and the rest is the side axis. And our child elements are arranged according to the main axis. For example: display:flex; flex-direction: row;

      Property Value Description Tailwind
      row default, left to right
      row-reverse right to left
      column top to bottom flex-col
      column-reverse bottom to top

    • justify-content: Set the arrangement of sub-elements on the main axis

      The justify-content attribute defines the alignment of the flex item on the main axis, and the main axis must be determined before use.

      Property Value Description Tailwind
      flex-start default, start at head, left to right if main axis is x-axis
      flex-end align from the end
      center align at the center of the main axis (horizontally if the main axis is the x-axis)
      space-around Divide the remaining space equally (without borders)
      space-between First paste the two sides, and then divide the remaining space equally (important) justify-between

    • flex-wrap: Set whether the child element wraps

      By default, items are arranged on a single line (axis). The flex-wrap attribute defines that the default is not to wrap in the flex layout. If the cumulative width of the child elements exceeds the container, the width of the child elements will be automatically reduced and placed in the parent element.

      If you don’t want to shrink the child elements automatically, but want the extra child elements to wrap automatically, you can use flex-wrap: wrap property.

      Property Value Description Tailwind
      nowrap default, no newline
      wrap line break
      wrap-reverse Lines are wrapped and children are reversed diagonally.

    • align-items: Set the arrangement of sub-elements on the side axis (single line)

      If you just want to lay out elements on a single axis, the previous flex-direction is enough. But if you want elements to be laid out on the main axis + side axis at the same time (such as centering the main axis + centering the side axis), you need align-items.

      Property Value Description Tailwind
      flex-start top to bottom
      flex-end bottom to top
      center squeeze together and center (vertically center) items-center
      stretch default? Stretch to the height of the parent element (When using it, do not give height to the child element)
      baseline the baseline to align the content with

    • align-content: Set the arrangement of sub-elements on the side axis (multiple lines)

      Used for requirements that cannot be implemented in the layout align-items. align-items can only be aligned on the top/bottom/center, without space-around in justify-content, etc.

      align-content sets the arrangement of sub-items on the side axis, and can only be used when the sub-item appears in a new line (multiple lines), and it has no effect under a single line.

      Property Value Description Tailwind
      flex-start start alignment at the head of the cross axis
      flex-end start alignment at the end of the cross axis
      center display in the middle of the side axis
      space-around Children divide the remaining space equally on the cross axis
      space-between The child items are distributed at both ends on the side axis, and then divide the remaining space equally
      stretch Default value, set the height of the child element to equal the height of the parent element

      The difference between align-content and align-items

      1. align-items is suitable for single-line cases, only top alignment, bottom alignment, centering and stretching.

      2. align-content is suitable for newlines (multiple lines), and a single line is invalid. You can set attribute values such as top alignment, bottom alignment, centering, stretching, and evenly distributing the remaining space.


    • flex-flow: Composite attribute, equivalent to setting flex-direction and flex-wrap at the same time

      Shorthand for setting the main axis direction flex-direction and whether to wrap flex-wrap.

      1
      flex-flow: row wrap;

    • gap: margin between child elements.

      The difference with margin is that all items can inherit gap directly, instead of writing margin for each item.

      Property Value Description Tailwind
      gap spacing between child elements gap-[]/-8

  1. Common properties of flex layout children

    1. Number of flex sub-items

      The flex attribute defines the allocation of remaining space to sub-items, and uses flex to indicate how many number of copies. For example, to make a navigation bar with search, the left and right small buttons are fixed, and the middle search bar is adaptive. E.g:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      section { /*parent element*/
          display:flex
      }
      section div:nth-child(1) { /*fixed size, no need to write flex*/
          width:100px;
          height: 150px;
      }
      section div:nth-child(3) { /*fixed size, no need to write flex*/
          width:100px;
          height: 150px;
      }
      section div:nth-child(2) { /*1 point is all free space, adaptive*/
          flex:1
      }

      The three child elements in the parent element bisect the width, such as

      1
      2
      3
      4
      5
      6
      p {
          display:flex;
          width:60%;
          height:150px;
      }
      p span {flex:1} /* Don't give the width and height, directly divide it into 3 equal parts, one for each. No width is given, the sum of their widths is the width of the parent element */

      do not evenly distribute element widths, such as

      1
      2
      3
      4
      5
      6
      p {
          display:flex;
          width:60%;
          height:150px;
      }
      p span:nth-child(2) {flex:2} /*The child element number 2 occupies two shares, here is 50%, and the other two boxes take one share, each 25%*/

    2. align-self controls the arrangement of sub-items on the side axis

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

      The default value is auto, which indicates that the align-items property of the parent element is inherited. If there is no parent element, it is equivalent to stretch.

      1
      2
      3
      section div:nth-child(1) {
          align-self:flex-end; /*A single child element has a different layout from other child elements*/
      }

    3. The order attribute defines the order of the child items (before and after)

      The smaller the value, the higher the ranking, the default is 0. Note, not the same as z-index.

      1
      2
      3
      section div:nth-child(2) {
          order:-1; /*sort by number size*/
      }

    4. flex-basis, flex-grow, flex-shrink

      It means that the child element stretches proportionally when the width of the parent element is sufficient; or when the width of the parent element is insufficient, Compression ratio.


      flex-grow: sub-element stretching ratio allocation, the default value is 0, and cannot be negative. If the value is 1, it is fixed and cannot be enlarged.

      flex-shrink: Sub-element compression ratio allocation, the default value is 1, which cannot be negative. If the value is 0, it is fixed and cannot be reduced any more.

      flex-basis: The basic size of the child element, the default value is auto. It is not a fixed execution value, but a recommended value, the benchmark value; the real value is determined by grow and shrink. If flex-basis: 0px , the fixed size cannot be scaled.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      .red{
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100px;
      }
      .blue{
        flex-grow: 2;
        flex-shrink: 2;
        flex-basis: 100px;
      }

  1. Detailed Tutorials and Exercises

    Detailed tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Exercise 1: https://flexboxfroggy.com/#zh-cn

    Exercise 2: http://www.flexboxdefense.com/

    Exercise 3: http://tom.infinityfreeapp.com/html/shapes.html


Share