弹性盒子的属性与使用

目的：

1、提供一种更加有效的方式来布局、对齐和分布在容器之间的各项内容，即使他们的大小是未知的变化的。

2、让容器有能力改变项目的宽和高，以填满可用空间。

3、布局与方向无关

4、最适合小规模布局（大规模用网络）

声明要使用弹性盒模型

        display:flex/display:index-flex

适用于父类元素

检索，子类在盒子中的位置（子类的排列顺序）

        flex-direction:

写在父类css中，但是作用于子级

       值      

row	横向，左到右
row-reverse	反横向，右向左
column	纵向，从上到下
row-reverse	反纵向，从上到下

检索，子类是否超出父级（换不换行）

        flex-wrap:

写在父级，作用于子级

        值

nowrap	不换行
wrap	换行
wrap-reverse	反转wrap排序

设置或检索弹性盒模型对象的子元素排列方式。

        flex-flow:

复合属性：flex-flow:<flex-direction><flex-wrap>

先写排列顺序，再写是否执行

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

检索弹性盒子在主轴（x）方向上的对齐方式

        justify-content:

写在父级，作用于子级

         值

flex-start	左对齐
flex-end	右对齐
center	居中
space-between	两端居左居右，中间等间距
space-around	N盒子的个数均分为N个空间，盒子在各自空间内居中

检索盒子在Y轴上的对齐方式

        align-items:

写在父级，作用于子级

        值

flex-start	置顶
flex-end	置底
center	居中
baseline	与基线对齐
stretch	置顶+置底，高度受到min-height与max-height制约

检索换行时对齐方式

        align-content：

写在父级，作用于子级

        值

flex-start	置顶
flex-end	置底
center	居中
space-between	上下置顶+置底，中间居中
space-around	纵向平分空间，各行居中显示
stretch	纵向平分空间，各行以最大方式显示

排列顺序

        order：

写在子级

        值

        阿拉伯数字，值越小，排的越靠前

分配剩余空间        

        flex-grow:

写在子级

        值

阿拉伯数字，值越大，分配空间越多

当子级长度和大于父级，子级按比例分配父级的宽度，原定的宽度将不起作用

        flex-shrink:

写在子级

        默认为1

设置自身在父级Y轴上的排序

        align-self:

        值

auto	计算值为元素的父元素的‘align-items'值， 如果没有父元素，则计算值为’stretch'
flex-start	置顶
flex-end	置底
center	居中
stretch	最大显示
baseline	与基线对齐

规定弹性项目的初始长度

        

flex-basis:

值	描述
number	长度单位或百分百，规定弹性项目的初始长度。
auto	默认值。长度等于弹性项目的长度。如果该项目未规定长度，则长度将依据其内容。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

弹性项目的弹性长度。

复合元素

        flex:

flex:none| [flex-grow] || [flex-shrink] || [flex-basis]

默认值：flex:0 1 auto;

值	描述
flex-grow	数字，规定项目相对于其余弹性项目的增长量。
flex-shrink	数字，规定项目相对于其余弹性项目的收缩量。
flex-basis	项目的长度。 合法值："auto"、"inherit"，或单位为 "%", "px", "em" 的值，或任何其他长度单位。
auto	等同于 1 1 auto。
initial	等同于 0 1 auto。
none	等同于 0 0 auto。
inherit	从其父元素继承该属性。