Flex弹性盒子布局

弹性盒子flex布局

主要的属性及属性值

1.包含块dispaly： flex；

首先为子元素创建flex格式化上下文。默认下子元素是并排。

flex-direction： row、row-reverse 、column、column-reverse。表示盒子项目从这4个方向排列。
flex-wrap：warp； 是否换行，默认是不换行。 当同一排太多了，可以换行， 如果不换，会改变大小以容纳更多的元素。

flex-flow 是方向和换行的缩写， 第一个值是方向，第二个值是是否换行。

flex-item， （相当于子元素）， 的属性：

order： 控制布局元素的顺序。 值为数值（12345…1的优先级最高）

flex-grow：数值；决定盒子尺寸怎么增长。当有2个以上的元素有数值时，按大约比例占剩下的内容。

flex-shrink： 数值；设置盒子尺寸怎么缩小。 当item的大小超出包含块时，设置值去改变其他元素的大小进而使自己满足大小，正常情况下设置值没什么用。

flex-basis：定义基础尺寸。

{flex-grow：1；

flex-basis：20%；就能使布局一行占5个元素（只有内容区的情况下）

让所有元素处于同一个行或纵布局： flex：1； 设置为一份（剩下的位置按比例分），width自适应。

item： 对齐方式：单行

stretch：充满的方式。
单独对某个item设置对齐方式：

flex的自适应是会使同行的item的高度一样。
内容区自适应：