Flex layout is learning and using

Time:2020-8-14

preface

Flex is the abbreviation for flexible box, meaning “flexible layout”, which is used to provide maximum flexibility for the box model. It provides powerful spatial distribution and alignment between the child elements of flexbox. Flex layout is the preferred solution for today’s layout. This article will introduce the basic properties of flexbox and feel the convenience of flex.

Conceptual attributes

The elements with flex layout are called flex container, or “container” for short. All its child elements automatically become container members, called flex item, or “project” for short.

Flex layout is learning and using
The container has two axes by default: the horizontal main axis and the vertical cross axis. The starting position of the spindle (the intersection with the border) is calledmain startThe ending position is calledmain endIt’s called the starting position of the axiscross startThe ending position is calledcross end

Items are arranged along the main axis by default. The spindle space occupied by a single project is calledmain sizeThe space occupied by the cross axis is calledcross size

Using flex layout

If you want to use flex layout, you candisplaySet properties.

.flex-container {
  Display: - WebKit flex; WebKit core browser
  display: flex;
}

The in line elements are arranged in flex.

.flex-container {
  Display: - WebKit inline flex; WebKit core browser
  display: inline-flex;
}

Flexbox container properties (Flex container)

There are a total of six container properties.

  • flex-direction: property determines the orientation of the spindle (the arrangement direction of flex items).
  • flex-wrap: by default, items are arranged on a single line (also known as “grid line”).flex-wrapProperty to define how to wrap a line if an axis cannot be arranged.
  • flex-flow: property isflex-directionProperties andflex-wrapProperty, the default value isrow nowrap
  • justify-content: property defines the alignment of the item on the spindle.
  • align-items: property defines how items are aligned on the cross axis.
  • align-content: property defines the alignment of multiple axes. If the project has only one axis, this property has no effect.

flex-direction

This property specifies how the flex project is laid out in the flex container by setting the orientation of the flex container spindle. They can be laid out in two main directions (horizontal rows or vertical columns).

.flex-container {
  -webkit-flex-direction: row | row-reverse | column | column-reverse;
  flex-direction:  row | row-reverse | column | column-reverse;
}

Flex layout is learning and using

  • row(default): the spindle is horizontal and the starting point is on the left.
  • 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 upper edge.
  • column-reverse: the main axis is vertical and the starting point is at the bottom.

flex-wrap

The original concept of flexbox was to set up a container for its items on a single line. Theflex-wrapProperty controls whether the flex container arranges its items as one or more rows, and the stacking direction of the rows.

.flex-container {
  -webkit-flex-wrap: nnowrap | wrap | wrap-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Flex layout is learning and using

  • nowrap(default): does not wrap.
  • wrap: line feed, first line above.
  • wrap-reverse: line feed, first line below.

Note: the wrap and wrap reverse attributes will be opposite in the flex container.

flex-flow

This property isflex-directionandflex-wrapAttribute.
Default value:row nowrap

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

flex-flow: row wrap:
Flex layout is learning and using

justify-content

Thejustify-contentProperty to align flex items along the axis of the current line of the flex container. When all of the scaling items on a row are inflexible or have reached their maximum size, it helps to allocate the remaining free space.

.flex-container {
  -webkit-justify-content: flex-start | flex-end | center | space-between 
  | space-around;
  justify-content: flex-start | flex-end | center | space-between 
  | space-around;
}

Flex layout is learning and using

  • flex-start(default): align left
  • flex-end: align right
  • center: Center
  • space-between: align both ends so that the spaces between items are equal.
  • space-around: equal spacing on both sides of each item. As a result, the spacing between items is twice as large as that between items and borders.

align-items

Flex projects can be aligned on the horizontal axis of the current row of a flex container, similar tojustify-contentBut it’s in the vertical direction. This property sets the alignment of the default cross axis for all flex projects, including anonymous projects.

.flex-container {
  -webkit-align-items: flex-start | flex-end | center | baseline | stretch;
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Flex layout is learning and using

  • flex-start: the starting point of the cross axis is aligned.
  • flex-end: align the ends of the cross axis.
  • center: align the midpoint of the cross axis.
  • baseline: the baseline alignment of the first line of text for an item.
  • stretch(default): if the project has no height set or is set to auto, the height of the entire container is occupied.

align-content

align-contentWhen there is extra space on the horizontal axis, this property changes the line of the flex container inside the flex containerjustify-contentAlignment, similar to aligning individual items within the spindle. If the project has only one axis, this property has no effect.

.flex-container {
  -webkit-align-content: flex-start | flex-end | center | space-between |
  space-around | stretch;
  align-content: flex-start | flex-end | center | space-between |
  space-around | stretch;
}

Flex layout is learning and using

  • 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: it is aligned 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 axes and the border.
  • stretch(default): the axis occupies the entire intersection axis.

Flex project properties (Flex item)

There are six kinds of project attributes.

  • order: property defines the order in which items are arranged. The smaller the value is, the higher the arrangement will be. The default value is 0.
  • flex-grow: property defines the magnification of an item. The default value is 0, that is, if there is any remaining space, it will not be enlarged.
  • flex-shrink: property defines the reduction scale of an item. The default value is 1, that is, if there is insufficient space, the item will be reduced.
  • flex-basisThe: property defines the spindle space occupied by the item before the extra space is allocated.
  • flex: property isflex-grow, flex-shrinkandflex-basisThe default value is0 1 auto。 The last two properties are optional.
  • align-self: property allows a single item to have a different alignment from other items, which can be overriddenalign-itemsProperty. The default value isautoThat inherits the parent elementalign-itemsAttribute, if there is no parent element, equivalent tostretch

order

You can use this simple property to reorder flex projects without reorganizing the HTML code.

.flex-item {
  -webkit-order: <integer>; 
  order: <integer>;
}

Flex layout is learning and using

flex-grow

If all flex projects have the same value flex grow as all items in the container, the second flex project takes up more space than the size of the other flex projects.Note: negative numbers are invalid

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

Flex layout is learning and using

flex-shrink

Theflex-shrinkParameter specifies the flex shrink factor, which determines how much flex projects shrink relative to the rest of the flex items in the flex container when space is allocated.Note: negative numbers are invalid

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

When the number is 1, flex shrink: 2, and the rest are 0, the effect will be:
Flex layout is learning and using
If theflex-shrinkAttribute is 1, when the space is insufficient, it will be reduced by equal scale. If the flex shrink property of one project is 0 and all other items are 1, the former will not shrink when there is insufficient space.

flex-basis

This property takes the same values as the width and height properties and specifies the initial major size of the flex project before allocating free space based on the flex factor.

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

Flex layout is learning and using

flex

This property is abbreviatedFlex grow, flex shrink and flex basisPerformance. Among other values, you can set it toauto(1 1 auto)andnone(0 0 auto)

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

flex: 0 1 100px:

Flex layout is learning and using

align-self

thisalign-selfProperty allowedalign-itemsOverride the default alignment (or the alignment specified by) for a single flex project.

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

Flex layout is learning and using
The attribute may take six values exceptautoWith the othersalign-itemsProperties are exactly the same.

Related articles

Flex layout tutorial: Grammar