flex布局

最近做支付宝小程序项目，用到了flex布局，为此，做一些总结记录;

## flex布局：弹性盒子布局。 display: flex;

- 注意：使用Flex布局之后，里面的float、clear、vertical-align属性将失效

- Flex容器有以下6个属性

. ①flex-direction

. ②flex-wrap

. ③flex-flow

. ④justify-content

. ⑤align-items

. ⑥align-content

# 1.flex-direction属性决定主轴(main-axis)的方向：

- flex-driection: row; 默认值，从左往右开始排序-- 1234

- flex-driection: row-reverse 从右往左到序-- 4321

- flex-driection: column 从上往下排序

- flex-driection: column-reverse 从下往上倒序

# 2.flex-wrap设置项目是否在一条线上，默认为nowrap

- flex-wrap: wrap 溢出自动换行

- flex-wrap: nowrap，效果（不换行，默认会缩放）

- flex-wrap: wrap-reverse，效果（第一行在下方）

# 3.flex-flow属性是flex-direction属性和flex-wrap属性的简写属性。默认值为row nowrap。

- flex-flow:column nowrap;

# 4.justify-content属性定义项目在主轴上的对齐方式，默认值为flex-star

- justify-content: flex-start 靠左上方

- justify-content: flex-end 靠左下方

- justify-content: center 主轴方向的居中

- justify-content: space-between 元素均分两边无缝隙

- justify-content: space-around 均分元素在各小块中居中，两边有空间

# 5.align-items属性定义项目在纵轴上的对齐方式，默认值为stretch，适用于项目在纵轴上高度不一样的情况

- align-items: flex-start 顶部对齐| flex-end 底部对齐| center 中间对齐| baseline 文字对齐| stretch

# 6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。即需要设置容器的flex-wrap属性值为wrap

- align-content: flex-start | flex-end | center | space-between | space-around | stretch

## 在子元素中可设置：

- flex:1 子元素在父盒子所占的大小。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

- order:0 order定义项目的排列顺序。数值越小，排列越靠前，默认为0。

- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。