This is the second day of my participation in the August Text Challenge.More challenges in August

What is the Flex layout?

Flex is short for Flexible Box and is used to provide maximum flexibility for boxed models. Any container can be specified as a Flex layout.

.box {
    display: flex;
}
Copy the code

Inline elements can also be laid out using Flex

.box {
    display: inline-flex;
}
Copy the code

Note that with Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

2. Basic concepts

Elements with a Flex layout are called Flex containers. All of its child elements automatically become container members, called Flex items.

  1. The container has two axes by default: a horizontal main axis and a vertical cross axis.
  2. The starting position of the spindle (where it intersects with the border) is calledmain startThe end position is calledmain end;

The starting position of the intersecting axis is called cross start and the ending position is called cross end. 3. By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Properties of the container

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 the flex – direction attribute

The flex-direction attribute determines the direction of the main axis (that is, the alignment of items).

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code

The Flex-direction attribute has four values.

  • row(Default) : The main axis is horizontal and the starting point is on the left.
  • row-reverse: The main axis is horizontal and the starting point is at the right end.
  • column: The main axis is vertical, and the starting point is on the upper edge.
  • column-reverse: The main axis is vertical and the starting point is down

3.2 the flex – wrap attributes

By default, projects are arranged on a line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code

The flex-wrap attribute has three values.

  1. Nowrap (default) : no line breaks.

  2. Wrap: The first line is at the top.

  3. Wrap-reverse: newline with the first line at the bottom.

3.3 the flex – flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code

3.4 the justify – content attribute

The context-content attribute defines the alignment of items on the main axis.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code

The justify-content attribute has five values, aligned according to the direction of the axis. So let’s say that the principal axis is going from left to right.

  • flex-start(Default) : Left-justified
  • flex-end: the right alignment,
  • centerCenter:
  • space-between: Align both ends with equal spacing between items.
  • space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.

3.5 the align – the items property

The align-items property defines how items are aligned on the cross axis.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

The align-items property has five values. The exact alignment depends on the direction of the intersecting axis, which is assumed to run from top to bottom.

  • flex-start: Aligns the starting point of the cross axis.
  • flex-end: Aligns the ends of the intersecting axes.
  • center: Midpoint alignment of cross axes.
  • baseline: Baseline alignment of the first line of the project.
  • stretch(Default) : If the project is not set to height or is set toautoWill take up the entire height of the container.

3.6 the align – content attribute

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

The align-content property has six values.

  • flex-start: aligns with the starting point of the crossing axis.
  • flex-endAlign with the endpoint of the intersecting axis.
  • centerAlign with the midpoint of the intersecting axis.
  • space-between: Aligned with both ends of the cross axes, the spacing between axes is evenly distributed.
  • space-aroundThe spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
  • stretch(Default) : Axis takes up the entire cross axis.

4. Project attributes

The following six properties are set on the project.

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 the order attribute

The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

.item {
  order: <integer>;
}
Copy the code

4.2 the flex – turns attributes

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code

If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

4.3 the flex – the shrink properties

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.

.item {
  flex-shrink: <number>; /* default 1 */
}
Copy the code

If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient. Negative values have no effect on this property.

4.4 the flex – the basis of attributes

The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code

It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.

4.5 the flex property

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

This property has two shortcut values: auto (1 1 auto) and None (0 0 auto).

It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

4.6 the align – self attribute

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 inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

The align-self property has six values, all of which are exactly the same as the align-items property except auto.