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。
-
row:容器内的flex-item,左右(横向)排序
-
row-reverse:容器内的flex-item,右左(横向)排序
-
column:容器内的flex-item,上下(纵向)排序,且顺序为从上到下排列
-
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
- flex-start:
- flex-end:
- center:
- space-between:
- space-around:
2.3、align-items
该属性控制辅助轴内容的排序方式,主要的属性有:flex-start | flex-end | center | baseline | stretch
- flex-start:
- flex-end:
- center:
- baseline: 对齐flex项目,使其文本的基线沿水平线对齐(比较冷门)
- stretch: 柔性物品垂直对齐,使它们填满容器的整个垂直空间
2.4、flex-wrap
该属性控制容器中item是否宽度不够换行,主要的属性有:nowrap | wrap | wrap-reverse
-
nowrap:不换行,就一行
-
wrap:主轴为X轴,则左上开始 - 换行
-
wrap-reverse:主轴为X轴,则左下开始 - 换行
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。
3.2、align-self
单独设置某flex-item的对齐方式,是对容器align-items属性的重写。所以它的值有如下:auto | flex-start | flex-end | center | baseline | stretch。其中默认值为auto,启用的是容器的配置。举例:
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值为数字。如下图: 上图的意思是:多出了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 ,则不会收缩。
3.6、flex
是三个属性的缩写,如下图: 写法有 :flex:1 1 auto。
后一篇写:grid 敬请期待 主要是与Flex布局做一个比对说明。