CSS flex layout syntax

Quickly understand the flex layout (the case is in the last link, pure grammar, easy to remember)

What is flex layout?

Flex is the abbreviation of Flexible Box, which means "flexible layout", and is used to provide maximum flexibility for box model.

Any container can be specified as a Flex layout.

Inline elements can also use Flex layouts.

.box{
   display:flex  //Block level element
   display: inline-flex  //Row level element
}

Webkit The kernel browser must be added-webkit Prefix.
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

After that, set the layout of the sub elements as clear, vertical and Flex to be invalid.

Properties of the container

1. Flex direction (the attribute determines the direction of the main axis (i.e. the arrangement direction of items))

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
Of which:
row(Default value): the main axis is horizontal and the starting point is at the left end.
row-reverse: The spindle is horizontal and the starting point is at the right end.
column: The main axis is vertical and the starting point is on the top edge.
column-reverse: The main axis is vertical and the starting point is at the lower edge.

2. Flex wrap (attribute definition, how to wrap if one axis cannot be arranged)

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

Of which:
nowrap(Default): no line breaks.
wrap: Wrap, first line above.
wrap-reverse: Wrap, first line below.

3. Flex flow (short form of flex direction attribute and flex wrap attribute, the default value is row nowrap)

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

4. Justify content (the attribute defines the alignment of items on the main axis)

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Of which:
flex-start(Default): align left
flex-end: Right align
center:  Center
space-between: Align both ends so that the spacing between items is equal.
space-around: The spacing on both sides of each item is equal. Therefore, the interval between items is twice as large as that between items and borders.

5. Align items (attribute defines how items are aligned on the cross axis)

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Of which:
flex-start: Align the start point of the cross axis.
flex-end: Align the ends of the cross axes.
center: Align the midpoint of the cross axis.
baseline: Align the baseline of the first line of text of the item.
stretch(Default): if the project is not set to height or set to auto,Will occupy the height of the entire container.

6. Align content (the attribute defines the alignment of multiple axes. If the item has only one axis, this attribute does not work)

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Of which:
flex-start: Align with the start point of the cross axis.
flex-end: Align with the end of the cross axis.
center: Align with the midpoint of the cross axis.
space-between: Align with both ends of the cross axis, and the spacing between the axes is evenly distributed.
space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the frame.
stretch(Default): the axis occupies the entire cross axis.

Project properties

The following six properties are set on the project.
1.order: attribute defines the order of items. The smaller the value, the higher the arrangement. The default value is 0.

.item {
  order: <integer>;
}

2. Flex growth: the attribute defines the magnification of the item. The default is 0, that is, if there is remaining space, it will not be enlarged.

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

If all items have a flex growth attribute of 1, they will equally divide the remaining space, if any. If the flex growth attribute of one item is 2 and all other items are 1, the remaining space occupied by the former will be twice that of other items.

3. Flex shrink: the attribute defines the reduction scale of the item. The default is 1, that is, if there is insufficient space, the item will be reduced.

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

If the flex shrink attribute of all items is 1, they will be scaled down equally when there is insufficient space. If the flex shrink attribute of one item is 0 and all other items are 1, the former will not shrink when there is insufficient space. Negative values are not valid for this property.

4. Flex basis: attribute defines the main size occupied by the project before allocating excess space. Based on this attribute, the browser calculates whether the spindle has excess space. Its default value is auto, which is the original size of the project.

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

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

5.flex: the attribute is short for flex grow, flex shrink and flex basis. The default value is 0 1 auto. The last two properties are optional.

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

This attribute has two quick values: auto (1 1 auto) and none (0 0 auto).

It is recommended to use this attribute first rather than write three separate attributes separately, because the browser will calculate the relevant values.

6. Align self: the attribute allows a single item to have a different alignment from other items, which can override the align items attribute. The default value is auto, which means to inherit the align items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

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

This attribute may take six values. Except auto, all other values are completely consistent with the align items attribute.

Reference article:
Ruan Yifeng: flex layout tutorial
Sieve case exercise

Posted by BizLab on Sat, 07 May 2022 10:11:20 +0300