Flex layout

Flexible Box Layouts (Flex), called “Flexible layouts”, provide maximum flexibility in the layout of a web page, replacing the usual float layout, and can be set by any container. Note: After setting the Flex layout, the Float layout of the child element is invalidated

Four concepts in Flex

Container: If you add display:flex; Then the label is a container

Item: The direct child element in the container is called item (it must be the direct child element) Main axis: The default sorting direction of items is the main axis (default horizontal arrangement, a container can have multiple spindles) Cross axis: the axis perpendicular to the main axis is the cross axis

Container properties

Flex-direction | Flex-wrap | Flex-flow | justify-content | align-items | align-content

  1. Flex-direction (property determines the direction of the spindle)

The flex - direction: row | row - reverse | column | column - reverse;

  • 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 at the upper end
  • Column-reverse: the main axis is vertical and the starting point is at the bottom

  1. Flex-wrap(property determines how to wrap items if they don’t fit)

The flex - wrap: nowrap | wrap | wrap - reverse;

  • Norwrap (default) : no line breaks
  • Wrap: The first line is at the top
  • Wrap-reverse: newline with the first line at the bottom

3.Flex-flow (properties are short for flex-direction and flex-wrap)

  • flex-flow: flex-direction || flex-wrap;

4. Context-content (Deals with excess space outside the project)

  • The justify - content: flex - start | | flex - end center | space - between | space - around;
  • The flex – start; (Default), items are left justified
  • Flex-end: justify items to the right
  • Center: Project center
  • Space-between: items are aligned at both ends with equal intervals between items
  • Space-around: Equal spacing on both sides of each item

5. Align-items (property determines how items are aligned on the cross axis)

  • The align - items: stretch | flex - start | flex - end | center | baseline;
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container
  • Flex-start: Alignment of the starting point of the cross axes
  • Flex-end: alignment of ends of crossed axes
  • Center: Alignment of the midpoint of the cross axis
  • Baseline: The baseline alignment of the first line of text of the project

Note: The height of the current container must be set for this to work

6. Align-content (property determines the alignment of multiple spindles)

  • The align - content: stretch | flex - start | flex - end | center | space - between | space - around;
  • Stretch (default) : Axis takes up the entire cross axis
  • Flex-start: align with the starting point of the cross axis
  • Flex-end: aligns with the end of the cross axis
  • Center: aligns with the midpoint of the intersecting axis
  • Space-between: aligned with both ends of the intersecting axes, the spacing between axes is equal
  • Space-around: The spacing on both sides of each axis is equal

Project attributes

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

  1. The order (property defines the order of items. The smaller the value, the higher the rank, default is 0)

order: <integer>;

  1. Flex-grow (property defines the scale of the project, default to 0, if there is free space, not to scale)

The flex - turns: < number >;

  1. Flex-shrink (The flex-shrink attribute defines the scale by which the project shrinks. The default is 1, which means that the project shrinks if there is not enough space)

flex-shrink: <number>;

  1. The flex-basis property defines the amount of principal axis space that the project occupies before allocating excess space. Based on this property, the browser calculates whether the main axis has extra space. It defaults to Auto, the original size of the project, and can also be setxx px, the project will occupy a fixed space)

flex-basis: <length> | auto;

  1. Flex (The properties are short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto. The last two attributes are optional)

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

  1. The align-items property allows a single item to be aligned differently than other items, overriding the align-items property. Defaults to auto, inheriting the align-items property of the parent element, or equivalent to stretch if there is no parent element.)

align-self: auto | stretch | flex-start | flex-end | center | baseline;

^ _ <