FlexBox 布局一览

280 阅读3分钟

1、摘要

本文章主要是记录FlexBox的相关属性,提供一览视图。主要介绍的内容有:flex-container、flex-item。flex-container包含如下:flex-direction、justify-content、align-items、flex-wrap、flex-flow、align-content;flex-item包含如下:order、align-self、flex-grow、flex-shrink、flex-basis、flex。

2、flex-container

flex布局的容器,相关DOM对象设置display:flex则容器起效。容器内的DOM对象则被称之为flex-item。

2.1、flex-direction

控制容器中flex-item的布局方式,该属性主要的选项有:row、row-reverse、column、column-reverse。

  1. row:容器内的flex-item,左右(横向)排序 1629299421(1).png

  2. row-reverse:容器内的flex-item,右左(横向)排序 1629299453(1).png

  3. column:容器内的flex-item,上下(纵向)排序,且顺序为从上到下排列
    1629299493(1).png

  4. column-reverse:容器内的flex-item,下上(纵向)排序,且顺序为从下到上排列 如:省略..

注意:这里的一个重要概念为,row模式时,主轴为x轴(左右) ,而上下为y轴(辅助轴),一旦定位主轴,则后续的item设置,会根据这个主轴进行伸展等响应。 而设置为column模式时,主轴为y轴(上下),而左右为x轴(辅助轴)。

2.2、justify-content

该属性控制主轴内容的排序方式,主要的属性有:justify-content: flex-start | flex-end | center | space-between | space-around

  1. flex-start: 1629297940(1).png
  2. flex-end: 1629297979(1).png
  3. center: 1629298012(1).png
  4. space-between: 1629298056(1).png
  5. space-around: 1629298093(1).png

2.3、align-items

该属性控制辅助轴内容的排序方式,主要的属性有:flex-start | flex-end | center | baseline | stretch

  1. flex-start: 1629298301(1).png
  2. flex-end: 1629298329(1).png
  3. center: 1629298351(1).png
  4. baseline: 对齐flex项目,使其文本的基线沿水平线对齐(比较冷门) 1629298512(1).png
  5. stretch: 柔性物品垂直对齐,使它们填满容器的整个垂直空间 1629298609(1).png

2.4、flex-wrap

该属性控制容器中item是否宽度不够换行,主要的属性有:nowrap | wrap | wrap-reverse

  1. nowrap:不换行,就一行

  2. wrap:主轴为X轴,则左上开始 - 换行 1629298978(1).png

  3. wrap-reverse:主轴为X轴,则左下开始 - 换行 1629298954(1).png

2.5、flex-flow

该属性为 flex-direction + flex-wrap 的缩写模式, 先 flex-direction 后 flex-wrap, 如: row wrap。

2.6、align-content

当 flex-wrap 设置为 wrap 或 wrap-reverse 时生效,当内容多于一行时,根据该属性对齐内容。属性的值有如下内容: flex-start | flex-end | center | space-between | space-around

这些属性的作用 跟 justify-content属性值的作用一样。

3、flex-item

前面章节都是在描述,flex的容器能够设置哪些属性。那作为容器内部的元素,可以通过其他的属性进行细节控制。

3.1、order

平级元素之间,设置顺序权限。order的值都是数字,按照从小到大的顺序,显示item。 1629385244(1).png

3.2、align-self

单独设置某flex-item的对齐方式,是对容器align-items属性的重写。所以它的值有如下:auto | flex-start | flex-end | center | baseline | stretch。其中默认值为auto,启用的是容器的配置。举例: 1629385496(1).png

3.3、flex-basis

表示flex-item在主轴上占据的空间,默认值为auto。如果主轴为X,则flex-basis设置的是item的宽度,如果主轴为Y,则flex-basis设置的是item的高度。所以属性的值是跟width | height 一样的。如:100px。

3.4、flex-grow

flex-grow是容器内的item按照比例的扩展,flex-grow值为数字。如下图: image.png 上图的意思是:多出了120px的宽度控件,item A、B、C 的flex-grow都设置成1,则等比例分成三份。 如果设置成1 、2 、1 ,则就是分成4份,A -> 30px 、B -> 60px 、C -> 30px。

3.5、flex-shrink

flex-grow是扩展,flex-shrink则是按照比例收缩,flex-shrink值为数字。如果设置成0 ,则不会收缩。 1629386262(1).png

3.6、flex

是三个属性的缩写,如下图: image.png 写法有 :flex:1 1 auto。

后一篇写:grid 敬请期待 主要是与Flex布局做一个比对说明。