This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

Flex is short for Flexible Box, which stands for Flexible layout and is used to provide maximum flexibility for the Box model.

Any container can be set to a Flex layout:

.box {
    display: flex;
}
Copy the code

When set to a Flex layout, float, clear, and vertical-align properties of child elements become invalid!

Containers with Flex layouts are called Flex containers, or containers for short. All child elements in the container become Flex projects, or projects for short.

With the Flex layout, the container and the project have their own properties.

To better understand the different properties of a container with a Flex layout, I’ve written a real-time demo of a small application that visually demonstrates the different properties of a container.

Demo address: Flex container properties demo

Source repository: [GitHub]

The upper part represents the container properties, the middle button represents the property values, and the lower part is the display area. Because flex-flow is a conflation of the flex-direction and flex-wrap properties (described later), the flex-direction and flex-wrap properties are placed below flex-flow.

Next, I will describe the function of each container attribute and project attribute respectively.

1. Container properties

1. flex-direction

Flex-direction determines the direction of the principal axis. There are four values:

  • row: Default, horizontal,Left and rightarrangement
  • row-reverse: Horizontal direction,Right and leftarrangement
  • column: vertical direction,Up and downarrangement
  • column-reverse: vertical direction,On the under –arrangement

2. flex-wrap

Flex-wrap determines how to wrap an item if it doesn’t fit on one axis. There are three values:

  • nowrap: Default, no line feeds
  • wrap: line break with the first line at the top
  • wrap-reverse: line break with the first line at the bottom

3. flex-flow

Flex-flow is the concatenation of the flex-direction and flex-wrap properties, which is equivalent to two properties abbreviated to one.

Default: flex-wrap: row nowrap;

4. justify-content

Inter-content Specifies the alignment of items on the main axis. There are six values:

  • Flex-start: Default, left-aligned (spindle horizontal)/upaligned (spindle vertical)

  • Flex-end: Right align (spindle horizontal)/Bottom align (spindle vertical)

  • Center: a center

  • Space-between: Aligns the items at both ends and the space between items is equal

  • Space-around: Each project is equally spaced on both sides

  • Space-evenly spaced: Each item is equally spaced between and at both ends

It’s not that standard, but it should tell you something. Use the Flex container properties demo to show it dynamically to better understand.

5. align-items

Align-items defines the alignment of items on the cross axis (the default direction is top to bottom). There are five values:

  • flex-start: cross axisThe starting pointalignment
  • flex-end: cross axisAt the end ofalignment
  • center: cross axiscenteralignment
  • baseline: Baseline alignment of the first line of text in the project
  • stretch: By default, items that are not set to a fixed height are stretched to fit the container

6. align-content

Align-content defines the alignment of multiple axes. If the item has only one axis, this property does not work. There are six values:

  • flex-start: cross axisThe starting pointalignment
  • flex-end: cross axisAt the end ofalignment
  • center: cross axiscenteralignment
  • space-betweenAnd:Cross axisAlignment,The interval between axesEvenly distributed
  • space-around: The intervals on both sides of each axis are in phase
  • stretch: By default, the axis occupies the entire cross axis

2. Project attributes

1. order

Order defines the order in which items are arranged.

The value is an integer. The smaller the value, the higher the order. The default value is 0.

2. flex-grow

Flex-grow defines the scale at which a project can be scaled to allocate space.

The value is an integer. The larger the value, the larger the space occupied by the item. The default value is 0.

3. flex-shrink

Flex-shrink defines the shrink ratio by which the project is allocated space.

The value is an integer. The larger the value, the smaller the space occupied by the item. The default value is 1.

4. flex-basis

The Flex-basis defines the main space occupied by the project before the extra space is allocated. The browser uses this property to calculate whether the main axis has extra space.

The default is Auto, the original size of the project.

You can also set the same value as the Width or height property, and the project will take up a fixed amount of space.

5. flex

Flex is a combination of Flex-grow, flex-shrink, and Flex-basis.

Default value: flex: 0 1 Auto; Does not expand, if the container space is insufficient, it shrinks proportionally.

6. align-self

Align-self defines the alignment of individual items, overriding the align-items property. There are six possible values:

  • auto: The default value, which inherits from the parent elementalign-itemsProperty, if there is no parent elementstretch
  • flex-start: cross axisThe starting pointalignment
  • flex-end: cross axisAt the end ofalignment
  • center: cross axiscenteralignment
  • baseline: Baseline alignment of the first line of text in the project
  • stretch: If no fixed height is set, the entire container will be filled

The above is a summary of personal learning, if there is something wrong, welcome to ridicule, point out! 😃 😃 😃