弹性盒模型

一、目的：

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

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

3.适用于小规模布局。

二、属性

1.display：flex/display：inline-flex

适用于父类元素，前提要声明使用弹性盒模型

 

 

2.flex-direction：写在父级css中，作用于子级

用于检索子级在盒子中的位置，换句话说就是子级的排列顺序

row:横向，从左到右

row-reverse：反横向，从右到左

column：纵向，从上到下

column-reverse：反纵向，从下到上

 

 

 

 

3.flew-wrap：写在父级作用在子级

作用：用于检索子级是否超出父级，即换不换行

nowrap：不换行

wrap：换行

wrap-reverse：反转wrap排列

 

 

4.flex-flow：复合属性。写在父级作用在子级

flex-flow：<flex-direction><flex-wrap> 先写排列方式，再写是否换行

5.justify-content：写在父级作用在子级，主要用于检索弹性盒子在主轴（X）方向上的对齐方式

flex-start：左对齐

flex-end：右对齐

center:居中

space-between：两端居左居右，中间等间距

space-around：N盒子的个数均分为N个空间，盒子在各自的空间里居中

 

 

6.align-items：检索盒子在Y轴上的对齐方式（写在父级作用在子级）

flex-start：置顶

flex-end：置底

center:居中

baseline：与基线对齐

stretch：置顶+置底，高度受到min-height和max-height制约

 

 

7.align-content：用于检索换行时对齐方式（写在父级作用在子级）

flex-start：置顶

flex-end：置底

center:居中

space-between：上下置顶+置底，中间居中

space-around：纵向平分空间，各行居中显示

stretch：纵向平分空间，各行以最大方式显示

 

 

8.order：排列顺序（写在子级）

值为数字，值越小，排位越靠前

9.flex-shrink

起效前提：子级长度和大于父级

起效后，三者按比例分配父级的宽度，即原定宽度不起作用

eg.父级宽度为400px，三个子级分别宽度200px，对C使用flex-shrink：3，此时三者比例为1：1：3     按上述比例消化多余的200px即40px 40px 120px ，用各自的长度减去消化的就是自己剩下的

 

 

10.align-self设置自身在父级Y轴上的排列（作用在子级）

auto：如果“align-self”的值为auto，则其计算值为元素的父元素的“laign-self”值，如果没有父元素，则其计算值为“stretch”

flex-start：置顶

flex-end：置底

center:居中

stretch：纵向平分空间，各行以最大方式显示

baseline：与基线对齐