温馨小程序前端布局Flex

2023-11-21 23:07:10

伸缩容器支持的属性有：

1,display

2,flex-direction

3,flex-wrap

4,flex-flow

5,justify-content

6,align-items

7,align-content

8,order

9,flex-grow

10,flex-basis

11,flex

12,align-self

主要介绍这几个属性

display:flex | display:inline-flex

该属性用于指定主轴方向，语法为

flex-direction: row | row-reverse | column | column-reverse

该属性用来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及该如何换行

flex-wrap: nowrap | wrap | wrap-reverse

该属性是flex-direction和flex-wrap属性的缩写版本，它同时指定了伸缩容器的主轴和侧轴，其默认属性为row nowrap

flex-flow: flex-direction | flex-wrap

该属性用来定义伸缩项目沿主轴线的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用justify-content

flex-grow

用于定义伸缩项目的放大比例，默认值0，即如果存在剩余空间，也不放大，如果所有伸缩项目的flex－grow设置为1，那么每个伸缩项目将设置为大小相等的剩余空间，如果你将其中一个flex－frow伸缩项设置为2，那么这个伸缩项目所占剩余空间是其他伸缩项目所占胜于空间的两倍

该属性用来定义伸缩项目的收缩能力

该属性用来设置伸缩项目的基准值，剩余空间按比率进行伸缩

该属性是flex-grow ,flex-shrink,flex-basis属性的缩写

flex: none | flex-grow flex-shrink flex-basis

用于设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式