flex布局的一些属性

Flex布局：flexible box的缩写，意思为弹性布局，因此flex布局就是弹性布局

适用对象：行内元素和块级元素都可以使用flex布局

设置了Flex的元素，它的所有子元（此时为flex item）素都将成为会做出相应变化

设置在父元素身上的六个属性，

前提：给父元素设置了display：flex属性

1、flex-direction

设置元素的排列方向：

row（默认）从左到右 row-reverse从右到左

column从上到下 column-reverse从下到上

row/row-reverse 竖直方向 column/column-reverse水平方向

加入reverse则反向排列

2、flex-wrap

设置换行格式：

nowrap（默认） 不换行

wrap 换行，从上往下正常换行

wrap-reverse 换行，从上往下换行

因为默认是不换行的，所以当我们需要它换行的时候，就可以使用该属性

3、flex-flow

flex-direction的缩写,默认值为row nowrap，格式如下

flex-flow： 

4、justify-content

设置水平对齐方式

flex-start 左对齐

flex-end 右对齐

center 中间对齐

space-between 左右留空，平均分布

space-around 左右不留空，平均分布

5、align-items

设置竖直对齐方式

stretch （默认）占满整个容器

flex-start 上对齐

flex-end 下对齐

center 中间对齐，元组的中间位置在同一水平线上

baseline 项目的第一行文字对其

6、align-content

设置容器内各个项目在垂直方向的排列方式，并且只有在设置了flex-wrap这个属性时才会起作用

stretch 拉伸占满，适应容器

flex-start 位于容器开头

flex-start 位于容器结尾

center 位于容器中心

space-between 行间留白，上下不留白

space-around 行间、上下都留白

注: align-content与align-items的区别

align-content对于单行的是没有效果的；但是align-items对于单行和多行都有效果

因此，align-items用的较多

下面总结一下：

属性	作用
flex-direction	设置整体排列列方向
flex-wrap	换行
flex-flow	1、2的缩写
justify-content	水平对齐方式
align-items	竖直对其方式
align-content	多行的竖直对齐方式

​

设置在子元素上面的六个属性

1、order

定义项目的排列顺序,number的数值越小，排列越靠前，可以为负值

2、flex-grow

定义项目的放大比例

如果空间剩余，浏览器会根据flex-grow的值来分配给对应的元素放大之后的空间大小

默认值0（不放大）

3、flex-shrink

定义项目的缩小比例

如果空间不够，浏览器会根据flex-grow的值来分配给对应的元素缩小之后的空间大小

默认值1(不缩小)

上面三个格式：

.item{order|flex-grow|flex-shrink:}

4、flex-basis

定义在分配空间之前，将会用到的空间的大小

默认值为auto，就是项目的原本的大小，我们还可以给他设置如px等来控制大小

5、flex

flex-grow、flex-shrink、flex-basis的缩写

6、align-self

可以让某一个元素脱离父元素的设定，拥有单独的对齐方式

stretch （默认）占满整个容器

flex-start 上对齐

flex-end 下对齐

center 中间对齐，元组的中间位置在同一水平线上

baseline 项目的第一行文字对其

align-self的属性值和align-item一样

下面总结一下

属性	作用
order	排列顺序
flex-grow	放大比例
flex-shrink	缩小比例
flex-basis	分配空间大小
flex	2、3、4的缩写
align-self	单独设置