css弹性盒子属性

css弹性盒子

1.display:flex;

弹性盒子需要写在父级元素的css样式中，其子集元素就会默认的同行排列。

2.弹性盒子的属性：

①flex-direction:排列方式，row(横向排列)、column(纵向排列)、row-reverse(横向反向排列)、column-reverse(纵向反向排列)
下面将各举一个小实例：
横向排列：row
纵向排列：column
横向反向排列：row-reverse
纵向反向排列column-reverse

②justify-content：对齐方式，flex-start(起始位置对齐) flex-end(结束位置对齐) center(居中) space-between(靠边，分散对齐) space-around(不靠边，分散对齐)。
示例如下
first-start（起始位置对齐）

flex-end（结束位置对齐）
center：
space-between

space-around

③flex-wrap:wrap(换行，当盒子一行不足以盛下它的多个子级元素的时候，就会换行)、nowarp(不换行)。这个属性是用来写元素的子级在X轴上的对齐方式。

④align-items:stretch(在竖直方向铺满，但是里面的内容不能设置高度)…这个属性用来写盒子的子级元素在Y轴上的对齐方式,flex-start 上对齐,flex-end下对齐,center居中对齐,baseline第一行文字的基线对齐。
示例如图：

⑤align-content:产生换行的时候，可以用来除去换行所产生的缝隙，属性值有：对齐方式，flex-start(起始位置对齐) flex-end(结束位置对齐) center(居中) space-between(靠边，分散对齐) space-around(不靠边，分散对齐)，strech(默认值，铺满整个Y轴)。但是，当元素只有一行，不需要换行的时候会没有任何效果。

⑥flex-flow:flex-direction和flex-wrap的缩写。一般写为：flex-flow:row wrap;属性值根据具体情况子级设置。

3.弹性盒子的子级元素的排序设置：

①order：number；数值越小越靠前。

②flex-grow:number;默认值是0，即，有剩余空间也不放大（用来设置放大比例）；

③flex-shrink:number;默认值是1，即，空间不够也不缩小（用来设置缩小比例）；原理同上。

④flex-basis:auto;(或像素)。

⑤align-self:相对于子级元素自己进行设置，写在子级元素的样式中。（对齐方式）