This is the 18th day of my participation in the August Challenge

 Flexible Box

Flexible Box is a new typesetting context that controls the following styles of child boxes:

  • Direction of placement
  • Put the order
  • Box width and height
  • Horizontal and vertical alignment
  • Whether line folding is allowed

Attribute set to the parent element

Generating Flex containers

  • Use display:flex to make the element generate a block-level Flex container
  • Use display:inline-flex to generate a line-level Flex container for the element

Flex-direction: controls the layout direction

Optional value:

  • Row: from left to right
  • Row-reverse: from right to left
  • Column: from top to bottom
  • Column-reverse: indicates from bottom to top

Flex-wrap: controls whether elements in the container are wrapped

Optional value:

  • Nowrap: Default, no line breaks, automatically adjusts the element width if there are too many elements in a row
  • Warp: Wrapping extra elements in a row when there are too many

Illustration-content: The arrangement of child elements on the main axis

Optional value:

  • Flex-start: alignment from the main axis
  • Flex-end: alignment from the end of the main axis
  • Center: align in spindle
  • Space-between: edges on both sides and then halves the remaining space
  • Space-around: Divides the remaining space evenly

As shown below:

​

Align-items: the arrangement of child elements along the lateral axis (single row)

Optional value:

  • Flex-start: alignment from the side axis
  • Flex-end: aligned from the end of the side axis
  • Center: align in the side axis
  • Stretch: Each element is stretched to the height of the container
  • Baseline: Baseline alignment for each element

As shown below:

​

Align-content: Sets the alignment of child elements along the lateral axis (multiple lines)

  • Flex-start: alignment from the side axis
  • Flex-end: aligned from the end of the side axis
  • Center: align in the side axis
  • Space-between: The child elements are first distributed on both sides of the lateral axis and bisect the remaining space
  • Space-around: The child bisects the remaining space on the side axis
  • Stretch: Sets the height of the child element to equal the height of the container

As shown below:

​

Attributes that are set to child elements

Flexibility: Controls the width of elements in containers

This property sets the elasticity of child elements, that is, they stretch when there is free space in the container; When the container runs out of space, it shrinks.

  • Flex-grow: The ability to stretch when there is room left
.a,.b,.c{
width:100px;
}
.a,.b{
flex-grow:1;
}
Copy the code

This code sets the flex-grow property for elements A and B, so that when space is available, it is allocated equally to elements A and B.

  • Flex-shrink: The ability to shrink a container when space is insufficient
  • Flex-basis: The base length without stretching or contracting

You can set all three properties together using flex properties

.a{
flex:1 1 auto
}
Copy the code

Order: SpecifiedOrder of neutrons in a container

The order attribute defaults to 0 for all child elements. When you set an order attribute to a value greater than 0 for one of the child elements, the element is placed behind the others.

​