css弹性布局

css弹性布局

display：flex是一种弹性布局方式，意思是让盒子保持最大的灵活性，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1.flex-direction属性

决定项目的方向,默认横向排列

属性值	描述
row	默认值，横向排列
row-reverse	横向排列，但与row相反
column	垂直排列
column-reserve	垂直排列，但与column相反

2.flex-wrap属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向，默认nowrap

属性值	描述
nowrap	元素不换行，例如，两个div设置宽为100%，但实际却是50%
wrap	元素换行，一个div宽为100%，第二个div就换行了
wrap-reverse	元素换行，但与wrap方向相反

3.flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4.align-items属性

子元素在当前行的侧轴上的对齐方式

属性	描述
stretch	默认值
center	中间
flex-start	开头
flex-end	结尾
baseline	位于容器的基线上

5.justify-content属性

元素在横轴上的排列

属性值	描述
flex-start	默认值，位于元素的开头
flex-end	位于元素的结尾
center	位于元素的中心
space-between	所有子元素先两边贴边在平分剩余空间
space-around	位于它本身之前之后的留白之内，并按照比例排列

6.弹性子元素属性

(1).order

设置弹性盒子的子元素排列顺序。
<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

（2）.flex-grow属性

<integer>：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

(3).flex-shrink属性

<integer>：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

(4). flex-basis属性

<integer>：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

(5).flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

(6).align-self属性

属性值	描述
auto	默认值
stretch	元素被拉伸以适应容器
center	元素位于容器之中
flex-start	元素位于容器的开头
flex-end	元素位于容器的末尾
baseline	元素位于容器的基线上
inherit	继承父元素的属性
initial	设置该属性为它的默认值

著：此文有借鉴之处