Flex layout

  • Flex layout is designed to provide a more efficient way to lay out, align and allocate space between items in a container.
  • Primarily to accommodate all types of display devices and screen sizes, flex containers expand projects to fill available free space, or shrink them to prevent overflow.
  • The Flexbox layout is best suited for components and small-scale layouts of applications, while the Grid layout is best suited for larger-scale layouts.

concept

  • Main axis: Items in an elastic container are arranged by default along the main axis from main-start to main-end. (The direction of the main axis can be changed, e.g. to vertical)
  • Side axis: axis perpendicular to the main axis

Elastic container properties (parent container)

Define a parent container

.container {
  display: flex;
}
Copy the code

.container {
  display: inline-flex;
}
Copy the code
  • Items in an elastic container can also be set to an elastic container, as can elements in a row

Differences between Flex and inline-Flex

div{
    display: flex;
    background-color: pink;
}
div span {
    width: 150px;
    height: 100px;
    background-color: purple;
}
div span:nth-child(2) { 
    height: 150px;
}
Copy the code
  1. When set to Flex:
  2. When set to inline-flex:
  3. Note: There is no width set for the parent; the inline-Flex parent ADAPTS the width to the child project

Flex-direction (elastic direction)

  .container {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code
  1. Set the spindle and set the layout direction of subitems
  2. Row (default) : left to right
  3. Row-reverse: from right to left
  4. Column: from top to bottom
  5. Column-reverse: indicates from bottom to top

Flex-wrap (flexible packaging)

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code
  1. Nowrap (default) : All elastic items will be on one line
  2. Wrap: Elastic items can be wrapped from top to bottom, with each line wrapped in the main axis
  3. Wrap-reverse: Elastic items can be wrapped from bottom to top, with each line wrapped in the main axis

Flex-flow

.container {
  flex-flow: column wrap;
}
Copy the code
  1. Flex-direction and flex-wrap are written together to give you a better idea of how items are arranged

Justify -content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
Copy the code
  1. Define alignment of content based on the main axis (see concept map)

3. What is the difference between space-around and space-evently

  • 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. (Project to edge interval is half project to project)
  • Space-instituted: Allocates items so that the spacing between any two items (and to the edge) is equal.
  • Chrome does not support start/end/Left/Right.

align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
Copy the code
  1. Stretch (default) : Stretch to fill the container (still following the minimum/maximum width)
  • The item is stretched when the subitem does not specify width and height
  1. Flex-start: The project is placed at the beginning of the side axis
  2. Flex-end: Items are placed at the end of the side axis.
  3. Center: The project is centered on the horizontal axis
  4. Subitems in an elastic container are (in my opinion) aligned according to the baseline position that represents their content.

align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Copy the code
  1. Normal (default) : Wrap the project in its default location as if no value had been set.
  2. Flex-start: wrap the project to the beginning of the container.
  3. Flex-end: an item wrapped at the end of a container.
  4. Center: The item in the center of the container
  5. Space-between: the equal distribution of items; The first line is at the beginning of the container and the last line is at the end of the container
  6. Space-around: Items are evenly distributed around each row and have equal space
  7. Space-instituted: Items are evenly distributed and have equal space around them
  8. Stretch: a line is stretched to take up the remaining space
  • Note: This property is only valid if the Flex container has multiple lines of Flex items. If you place them on a single line, this property has no effect on the layout.

  1. Lay out each row as a whole

  2. All column-* attributes have no effect on the Flex container.

Pseudo-elements in ::first-line and ::first-letter do not apply to flexible containers.

Elastic items (subset attributes)

The order (order)

.item {
  order: 5; /* default is 0 */
}
Copy the code
  1. The Order property controls the order in which they appear in the Flex container (negative values can occur)

Flex-grow

.item {
  flex-grow: 4; /* default 0 */
}
Copy the code
  1. This defines the ability of resilient projects to grow when necessary. It accepts unitless values as proportions. It determines the amount of free space your project should occupy in the Flex container.
  2. If all projects flex-grow is set to 1, the remaining space in the container is evenly distributed among all children. If one of the children has a value of 2, the remaining space will be twice as large (or at least try) as the others. (Browser adaptive)
  3. Negative numbers are invalid.

Flex-shrink (elastic shrinkage)

.item {
  flex-shrink: 3; /* default 1 */
}
Copy the code
  1. 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. (Can also give you want to fixed items, fixed width and height)
  2. Negative values have no effect on this property.

Flex-basis (elastic basis)

.item {
  flex-basis:  | auto; /* default auto */
}
Copy the code
  1. Properties that need to be understood in depth

The elastic

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Copy the code
  1. It is recommended to use this shorthand property rather than setting individual properties. Stenography can be intelligently set to other values.

align-self

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code
  1. The arrangement of a box on a side axis
  • The traditional layout
  1. Good compatibility
  2. The layout and trival
  3. Limitations, do not layout well on mobile
  • Flex Flex layout
  1. Easy to operate, very simple layout, mobile applications are very wide
  2. PC browser support is poor
  3. IE11 or later, not supported or only partially supported
  4. Adaptive effects

It’s super easy to center vertically

The above is from CSS teacher Ruan Yifeng Pink