Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Recently, I got a new book called CSS New World, and I plan to attack the mountain of CSS. Without further ado, this article is a study note for the Flex layout, to deepen the impression.

1. Set display: flex

  • Flex itemsLumpy: asspanLabels can now be sized
  • Flex itemsFloating failure
  • Flex itemssupportz-indexattribute
  • Flex itemsthemarginValues do not merge, unlike block-level elements
  • Flex itemsIf set to absolute positioning, the elastic layout will be removed.
<! 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>Flex learning</title>
  <style>
    .conatiner{
      display: flex;
    }
  </style>
</head>
<body>
  <div class="container">
    <span style="float: left;">1</span>
    <span style="z-index: 9;">2</span>
    <span style="float: right;">3</span>
    <span>4</span>
  </div>
</body>

</html>
Copy the code

2. Flex -warp, etc

2.1: the flex – wrap attributes:

Flex-wrap is used to control whether flex items are displayed on a single line or on a line wrap.

  • nowarp: The default value, which is not newline, so that content overflow can occur.
    • Content overflow solution: Set the subitem’smax-width:100%
    • Becausemax-widthThe priority of is greater thanwidthAttribute priority, letchildrenDimensions change from fixed to relative.
  • wrap: This does not have what to say, the child size is large, the display line
  • warp-reverse: This is the contents of the newline display, and then upside down.

2.2: Overview of alignment characteristics:

Here are some common meanings:

  • justifyRepresents horizontal style Settings
  • alignRepresents a vertical style setting
  • itemsRepresents the styling of all elements
  • contentRepresents the overall layout style
  • selfRepresents the setting of the element’s own style

In this way, precision-content means horizontal alignment of the overall layout and the rest is not explained too much. It is easier to understand in this way, and less rigid.

🌵 Tips:

If the flex-direction attribute is column or column-reserve, the vertical layout of flex items is not controlled by align-items, but by context-content. Flexi-content controls the layout of the main axis, and flex-direction sets the main axis direction 👇 :

  • Flex-direction :row: axis x horizontal (rectangular coordinate system)

  • Flex-direction :column: y horizontal

3. An in-depth understanding of Flex properties

3.1: The friendly details that Flex hides

The flex attribute is the abbreviation for flex-grow, flex-shrink, and Flex-basis. it is similar to background, and contains bG-color and other properties.

Here are a few Settings for Flex in one set:

  • 1The value of the case:
    • flex:1: Set this parameter to yesflex-growattribute
    • flex:92px: Set this parameter to yesflex-basisattribute
  • 2The value of the case:
    • flex:1 92px: Set this parameter to yesflex-growProperties andflex-basisattribute
    • flex:1 1: Set this parameter to yesflex-growProperties andflex-shrinkattribute
  • 3The value of the case on the corresponding seat 😑

3.2:flex:1,flex:0,flex:noneAs well asflex:auto

  • flex:0: equivalent toflex: 0 1 0%, that is,basisis0%Represents the minimum content width, if the content in the child is textifThe effect of
  • flex:none: equivalent toflex:0 0 autoSaid,There is no, i.e.,flexThe subterm is not elastic,flex-basis:autonamelyThe base size is determined by the content, suitable for fixed-size elements (no setting requiredwidthAttributes)
    • This property can be given similarlybuttonFixed size sub-item Settings, while the whole remainsThe elastic.
  • flex:1: equivalent toflex:1 1 0%;
  • flex:auto: equivalent toflex:1 1 autoThis is just like the nameautomatic, i.e.,flexThe subitems automatically fill the remaining space or automatically shrink

🌵 Tips:

For Flex :1 and Flex: Auto, behave differently when the container size is insufficient:

  • flex:1: Performance comparisonThe shyWill make full use of the remaining space, butWill not infringeSpace for other child elements
  • flex:auto: Performance comparisonbullying, will preferentially expand their own size, will encroach on other child elements due space to themselves