Flex elastic box model and compatibility

Flex layout and traditional layout

The traditional solution to layout, based on the box model, relies on the display property + position property + float property. It is very inconvenient for special layouts, such as vertical center, which is not easy to implement.

In 2009, the concept of elastic box model was proposed, and it has the characteristics of simplicity, integrity and responsiveness. Because of its responsive nature, it is often used in the layout of mobile pages. Unfortunately, on the mobile end of its compatibility, most of the mainstream browsers in China are dead, so we need to make a compatibility, as shown in the picture :(chicken ribs compatibility ah ~)

Flex container

Adding displays:flex /display: inline-Flex to the parent makes it an elastic box container, and the layout is very different from our traditional document flow layout, which uses a spindle and side axis. The elements are arranged according to the main axis first, and the side axis is an auxiliary arrangement.

The children below the container of the elastic box model are arranged in an elastic layout, but the grandchild elements are not affected by the layout of the parent elastic model.

Flex container Properties

• flex-direction

  • Elastic box model spindle setting, set on the setting spindle, spindle will affect the arrangement of child elements

  • Properties:

    • Horizontal row(default) arrayed from left to right (side axis: top to bottom)
    • Horizontal row-reverse arranges from right to left (side axis: top to bottom)
    • Vertical columns are arranged from top to bottom (side axis: left to right)
    • Reverse vertical column-reverse from bottom to top (side axis: left to right)

    

• flex-wrap

  • In the elastic box model, elements do not break lines by default; if you want them to break lines, you need to set this property
  • Properties:
    • Nowrap (default) does not wrap lines
    • Wrap Normal line wrap
      • 
    • Wrap-reverse Indicates the reverse newline
      • 
  • Note: If you set nowRap to no line breaks when the element is beyond the parent width. If the wrap is set to wrap properly, the auxiliary side axis is needed. Front wrap, top to bottom or left to right, or bottom to top or right to left if it’s wrap-reverse.

• flex-flow

  Flex-direction, flex-wrap compound property. This property allows you to set both flex-direction and flex-wrap. Such as:

  flex-flow:flex-direction,flex-wrap;
  Copy the code

• justify-content

  The arrangement of the main axis elements. Here we need to introduce the concept of a spare space. When the parent subtracts the child’s own space (width/height + margin + padding + border), the remaining space is the remaining space. The remaining space is redistributed to the child elements, resulting in different arrangements

  • Properties:

    • Flex-start (default) elements are aligned along the beginning of the main axis, and the rich space remains at the end of the main axis
    • Flex-end elements are aligned at the end of the main axis, and the rich space remains at the beginning of the main axis
    • Center elements are arranged in the middle of the main axis, with rich Spaces evenly distributed on both sides
    • Space-between children are evenly distributed on the main axis, and rich space is evenly distributed between children
    • Space-around rich space is evenly distributed on the left and right sides of the children

    

• align-items

  Property defines the alignment of flex children in the ** lateral (vertical) ** direction of the current row of the Flex container

  • Stretch (default value): stretches
  • Flex-start: Align the starting point on the cross axis
  • Flex-end: alignment of ends on cross axes
  • Center: Cross axes are centered and aligned
  • Baseline: baseline alignment, based on the cross axis text baseline

• align-content

  Used to define the arrangement of multiple spindles, if there is only one spindles it will not work

  attribute	parsing
  stretch	The default value. Elements are stretched to fit the container.
  center	The element is in the center of the container. Stack each row in the middle of the elastic box container.
  flex-start	The element is at the beginning of the container. Stack each line toward the starting position of the elastic box container. Each row is immediately adjacent to the previous row.
  flex-end	The element is at the end of the container. Stack each row toward the end of the elastic box container. Each row is immediately adjacent to the previous row.
  space-between	Elements are inside containers with white space between the rows.
  space-around	Elements are in containers with white space before, between, and after each row.
  space-evenly	Average whitespace between elements

Flex child container properties

• order

  The order of each subitem, the smaller the number, will be in the front of the main axis, the larger the more row, set negative value is also possible

• flex-grow

  Scale up for each subitem. In the case of free space, the larger the flex-grow number, the more free space the child takes up. For example, if all the other children are 1, one of them is 2. I’m going to have twice as many subelements in a space of two. If the default value is 0, the default value is not occupied even if there is free space.

  

• flex-shrink

  Define the scaling of each subitem, the larger the value, the greater the scope of compression.

  If all subitems have the same value, such as default 1, then when the remaining space is insufficient, it will be scaled down equally. If one of them is 0 and the other is 1, the space of the 0 subitem will not become smaller.

  

• flex-basis

  Used to set the initial value of the subproject. If the parent doesn’t have enough space, the initial values will be affected and elements will be compressed. If an initial value is set, the priority of the initial value is greater than the width of the element. The size of the initial value is shown first.

• flex

  The flex attribute is a compound of flex-grow, Flex-shrink, and Flex-basis. The default value is 0, 1 auto. The last two attributes are optional

• align-self

  Attribute allows a single item to be aligned differently from other items. For example, in a row, you want the third line to start below the main axis, then you can use this style.

  attribute	describe
  auto	Automatic, default
  stretch	scaling
  center	center
  flex-start	The spindle start
  flex-end	End of the spindle
  baseline	Text baseline

• Special margin

  Child elements can also set margins.

  Margin Auto of the child level will divide the rich space of the parent level

  The left and right margin auto of the child level will divide the rich space of the left and right of the parent level equally

  So if a child element has margin: auto, the element is centered vertically

Older versions are flex compatible

As we mentioned at the beginning, many mobile browsers in The country are not Flex friendly. Then we need to do a little bit of compatibility. Usually use the display:box to set. It’s actually very similar to Flex.

• The container is set

  • display: -webkit-box; Safari, Google Chrome, Maxthon 3, Cheetah browser, Baidu Browser Opera browser based on Webkit.
  • display: -moz-box; — Indicates the Firefox private property.
  • display: -ms-box; — Indicates the private property of Internet Explorer.
  • display: -o-box; — represents Opera private properties

• Attribute set

  • Box – received: horizontal | | vertical horizontal or vertical alignment, similar to the flex – direction
  • Box – direction: normal | | reverse transposed, similar to the flex – direction: row – severse
  • Box – pack: start | | end | | center | | the justify major axis aligned, similar to the justify – content
  • Box – align: start | | center | | end cross axis aligned, similar to align – items

• Subproject property Settings

  • Box-flex: number is similar to flex-grow
  • Box-ordinal-group: number is similar to order

  All the above attributes need to be prefixed with -webkit-, -moz-, -ms-, -o- for browser compatibility.

  Pay attention to

  These properties are set before display:flex. If a flex browser reads CSS and executes the display:box code first, it will display normally. If the display:box code is not recognized by Flex, it will not affect its subsequent display. If you are compatible with Flex and read display:flex then the flex Settings override the box Settings.

The old chicken soup

Rush ah worker! ~