[web front end] ten minutes to thoroughly understand the flex layout

Time:2022-5-8

Summarize flex layout attributes in six words: simple, convenient and fast.

1、 Introduction

Flex (flexible box: flexible layout box model) is an attribute proposed by W3C in 2009, which can carry out flexible layout of pages concisely and quickly. The main idea is to give the container the ability to control the height and width of internal elements. Currently supported by the following browsers:

[web front end] ten minutes to thoroughly understand the flex layout

browser support

When it is used in the browser of WebKit kernel, it must be prefixed with – WebKit.

[web front end] ten minutes to thoroughly understand the flex layout

flex container

Using a flex container, its internal elements automatically become flex items. Container ownershipTwoInvisible axis, horizontalprincipal axis(main axis), and verticalCross axis(cross axis)。

The position where the spindle starts, that is, the intersection of the spindle and the left border, is called main start; The position where the spindle ends is called main end; The starting position of the cross axis, that is, the intersection of the cross axis and the upper border, is called cross start; The position where the cross axis ends is called cross end.

Items are arranged according to the main axis or cross axis. The width occupied by items in the main axis direction is called main size, and the width occupied in the cross axis direction is called cross size.

Note: when using the element in the flex container, that is, the float of flex item, the clear and vertical align attributes will become invalid.

2、 Attribute summary table

Attribute name Attribute meaning Possible values for property
Container properties flex-direction Determine the item arrangement direction Row (default, left and right), row reverse (right and left), column (up and down), column reverse (down and up)
flex-wrap How do items wrap when they cannot be arranged Nowrap (default, no line feed), wrap (line feed), wrap reverse (line feed back)
flex-flow Collection abbreviation of flex direction and flex wrap Row nowrap (default, other effects can be set as above)
justify-content Alignment of item on spindle Flex start, flex end, center, space between, space around
align-items Alignment of item on cross axis Flex start, flex end, center, baseline (the bottom of the first line of item text is aligned), stretch (when the height of item is not set, the item will be aligned with the same height of the container)
align-content Alignment of multiple axes flex-start、flex-end、center、space-between、space-around、stretch
Property of item order Define the sort order of items Integer. The default value is 0. The smaller the value, the higher the value
flex-grow When there is extra space, the magnification of the item Integer. The default value is 0. It will not be enlarged even if there is extra space
flex-shrink When there is not enough space, the item will be scaled down Integer, the default value is 1, that is, it is reduced when there is insufficient space
flex-basis Space occupied by item on the spindle Integer, length value, auto by default
flex Short for growth, shrink and basis The default value is 0 1 auto
align-self Unique alignment of a single item The same as align items, you can override the align items attribute

3、 Detailed explanation of container properties

3.1 flex-direction

[web front end] ten minutes to thoroughly understand the flex layout

flex-direction

Flex direction determines the direction of the spindle, that is, the direction of the item arrangement. There are four possible values: row (default) | row reverse | column | column reverse.

  • Row: by default, the spindle is horizontal, and items are arranged from left to right along the spindle
  • Column: the spindle changes to the vertical direction, and items are arranged from top to bottom along the spindle
  • Row reverse: the spindle is horizontal, and the items are arranged from right to left (opposite to row)
  • Column reverse: the main axis is vertical, and the items are arranged from bottom to top (opposite to column)

3.2 flex-wrap

[web front end] ten minutes to thoroughly understand the flex layout

flex-wrap

Flex wrap determines whether to wrap a line when the item cannot be filled in the box.

  • Nowrap: by default, the width of the item is automatically reduced without line breaks
  • Wrap: wrap a line with the first line above
  • Wrap reverse: wrap a line, with the first line below (opposite to wrap)

3.3 flex-flow

[web front end] ten minutes to thoroughly understand the flex layout

flex-flow

It is a collection abbreviation of flex direction and flex wrap, such as row wrap | column wrap reverse, etc. The default value is row nowrap, that is, arrange horizontally without wrapping.

3.4 justify-content

row
[web front end] ten minutes to thoroughly understand the flex layout

justify-content

Determines the alignment of items on the horizontal axis. Possible values include flex start (default), flex end, center, space between, and space around. When the main axis is horizontal, the specific meaning is as follows:

  • Flex start: align left
  • Flex end: right justified
  • Center: center alignment
  • Space – between: align both ends
  • Space around: evenly distributed along the axis
  • Space evenly: evenly distributed on the left and right
column
[web front end] ten minutes to thoroughly understand the flex layout

justify-content

Determines the alignment of items on the vertical axis. Possible values include flex start (default), flex end, center, space between, and space around. When it is a longitudinal spindle, the specific meaning is as follows:

  • Flex start: align up
  • Flex end: align bottom
  • center:居中对齐
  • space- between:两端对齐
  • space-around:沿轴线均匀分布
  • space-evenly:上下均匀分布

补充知识点:space-around 和 space-evenly 的区别

[web front end] ten minutes to thoroughly understand the flex layout

space-around 和 space-evenly

3.5 align-items

row
[web front end] ten minutes to thoroughly understand the flex layout

align-items

决定了 item 在横向主轴上的对齐方式,可能的值有 flex-start | flex-end | center | stretch | baseline ,当为横向主轴时,其具体含义为:

  • flex-start:顶端对齐
  • flex-end:底部对齐
  • center:竖直方向上居中对齐
  • stretch:当 item 未设置高度时,item 将和容器等高对齐
  • baseline:item 第一行文字的底部对齐
column
[web front end] ten minutes to thoroughly understand the flex layout

align-items

决定了 item 在纵向主轴上的对齐方式,可能的值有 flex-start | flex-end | center | stretch | baseline ,当为纵向主轴时,其具体含义为:

  • flex-start:左侧对齐
  • flex-end:右侧对齐
  • center:水平方向上居中对齐
  • stretch:当 item 未设置宽度时,item 将和容器等宽对齐

3.6 align-content

[web front end] ten minutes to thoroughly understand the flex layout

align-content

该属性定义了当有多根主轴时,即 item 不止一行时,多行在交叉轴上的对齐方式。注意当有多行时,定义了 align-content 后,align-items 属性将失效。align-content 可能值含义如下(假设主轴为垂直方向):

  • flex-start:上对齐
  • flex-end:下对齐
  • center:垂直居中对齐
  • space- between:沿轴线两端对齐
  • space-around:沿轴线均匀分布
  • stretch:各行将根据其 flex-grow 值伸展以充分占据剩余空间

四、item属性详述

item 的属性在 item 的 style 中设置,item 共有如下六种属性:

4.1 order

[web front end] ten minutes to thoroughly understand the flex layout

order

order 的值是整数,默认为 0,整数越小,item 排列越靠前,如上图所示。

4.2 flex-grow

[web front end] ten minutes to thoroughly understand the flex layout

flex-grow

它定义了当 flex 容器有多余空间时,item 是否放大。默认值为 0,即当有多余空间时也不放大;可能的值为整数,表示不同 item 的放大比例。

4.3 flex-shrink

[web front end] ten minutes to thoroughly understand the flex layout

flex-shrink

定义了当容器空间不足时,item 是否缩小。默认值为 1,表示当空间不足时,item 自动缩小,其可能的值为整数,表示不同 item 的缩小比例。

4.4 flex-basis

[web front end] ten minutes to thoroughly understand the flex layout

flex-basis

表示 item 在主轴上占据的空间,默认值为 auto。

4.5 flex

[web front end] ten minutes to thoroughly understand the flex layout

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。

4.6 align-self

[web front end] ten minutes to thoroughly understand the flex layout

align-self

align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式,它有六个可能的值,默认值为 auto。

  • auto:和父元素 align-self 的值一致
  • flex-start:顶端对齐
  • flex-end:底部对齐
  • center:竖直方向上居中对齐
  • baseline:item 第一行文字的底部对齐
  • stretch:当 item 未设置高度时,item 将和容器等高对齐

Recommended Today

MySQL related

Indexes Bottom structure Disadvantages of hash table index: Using hash storage requires adding all files to memory, which consumes more memory space If all queries are equivalent queries, the hash is indeed fast, but in the actual scene, more data is found, and not all queries are equivalent queries, so the hash table is not […]