弹性盒模型

1、CSS3弹性盒模型

面试题！！

1.1、怪异盒模型与标准盒模型

1.1.1、两者边框大小一样，弹性盒模型content大小发生变化。总体不变。

标准盒模型content大小不变，总体发生变化。

怪异盒模型：

box-sizing：content-box

标准盒模型：

box-sizing:border-box

2、定义弹性盒模型：

2.1、父级添加声明display:flex

2.2、平分盒模型空间：flex:1

2.3、兼容性：加前缀

display:-webkit-flex

3、排列方式：

flex-direction

3.1、竖向排列，从上到下：flex-direction:colum

3.2、横向排列，从左到右：flex-direction:row（默认）

3.3、横向反方向，从右到左：flex-direction:row-rever

3.4、竖向反方向，从下到上：flex-direction:colum-rever

4、主轴（justity-content）

4.1、X轴，从顶部开始（默认方式）：justify-content:flex-start

4.2、X轴，从末端开始：justify-content:flex-end

4.3、X轴，从中间到两边，justify-content:flex-center

4.4、两端对齐，中间自适应：justify-content:space-between

4.5、自动分配距离：justify-content:space-around

5、侧轴（Y轴）

5.1、排列方式

align-items

5.2、align-items:flex-start

5.3、align-items:flex-end

5.4、align-items:flex-center

5.5、align-items:baseline作用与flex-first等效

5.6、设置居中：（面试题！！！）

X轴：justify-content：flex-center

Y轴：align-items：center

6、换行（flex-wrap）

6.1、必须满足条件：横向排列（flex-direction:row）

6.2、换行方式：

6.2.1、换行：flex-wrap:wrap

6.2.2、不换行：flex-wrap:nowrap

6.2.3、反转换行，即上下颠倒换行：flex-wrap:wrap-reverse

7、行与行之间的对齐

align-conter

7.1、必须满足条件：

条件1：有多行，即多个div

条件2：换行：flex-wrap:wrap

7.2、对齐方式

7.2.1、水平居左：align-content:start

7.2.2、水平居中：align-content:center

7.2.3、水平居右：align-content:end

8、单独设置元素位置（子级）

align-self

8.1、左 div:nth-child(1){align-slefflex-start;}

8.2、中flex-center

8.3、右flex-end

8.4、若子级无宽高，则继承父级：align-self:stretch

8.5、继承父级：align-self:baseline

8.6、继承父级：align-self:auto

9、优先级

order

9.1、order与z-index的区别

order值越大，权重越小

z-index值越小，权重越大

10、flex

10.1、平均分配：flex:1

书写格式：

1、定义弹性盒模型

display:flex

2、设置水平排列

flex-wrap:row

3、设置主轴

justify-content:flex-start