15-弹性盒模型

弹性盒模型

弹性盒模型的作用：用来辅助div+css布局，解决传统布局的繁琐不便之处并且达到自适应布局模式（也称之为弹性布局）。

（传统布局）div+css布局

• 基于盒模型，依赖 display属性 + position属性 + float属性进行页面布局。
• 好处：兼容性比较好
• 坏处：布局比较繁琐
• 不便：
  • 盒子居中，各种居中对齐
  • 大量调整盒子位置
  • 通常div水平显示设置float
  • 清除浮动
  • margin重叠问题

css3给我们提出了一套自适应的布局模式——弹性布局（弹性盒模型），它用来辅助div+css布局。

什么是弹性盒模型

• 概念：是一种当页面需要自适应不同屏幕大小以及设备类型时确保元素拥有恰当行为的布局模式
• 目的：提供一种更加有效 的方式来针对一个容器里面的元素进行排列，对齐和分配空间，就是为了元素在盒子里面面对盒子的宽度不同时能更好的适应。这种布局模式对移动端更加友好。

弹性盒子结构

弹性盒子是由弹性容器和弹性项目构成。

• 弹性容器：包含弹性项目的父元素
• 弹性项目：弹性容器里面的每个子元素。
• 主轴：弹性项目排列所有轴就称为主轴。默认主轴是水平方向
• 侧轴：与主轴垂直的方向就称为侧轴。

弹性容器

设置弹性容器（给父元素设置）

• display：flex:将盒子变为块级的弹性容器，对其他兄弟元素来说，它依然是一个普通的块级标签，对里面的子元素（弹性项目）来说，这个盒子是它们的弹性容器。
• display:inline-flex：将盒子变为行内块级弹性容器，对其他兄弟标签来说，它是一个普通的行内块级元素，对里面的子元素来说，它是弹性容器。

特点：

• 弹性容器里面的子元素（弹性项目）可以同行显示，默认排列不下时，按比例将子元素进行压缩
• 弹性容器只对于直接子元素有效
• 弹性容器对自己的兄弟标签没有任何影响
• 对于弹性容器来说，高度是自适应的，无需设置高度（需要固定高度时才设置）

注意

• 弹性容器外面和弹性项目内都是正常渲染的，弹性盒子只控制弹性项目如何在弹性容器里面显示。

弹性项目的排列方式

• flex-wrap 控制弹性项目是否换行

  • flex-wrap：nowrap; 不换行（默认值）
  • flex-wrap:wrap; 换行

• flex-direction

  控制弹性项目的排列方式，同时确定弹性容器的主轴。

  默认是水平方向为主轴，侧轴是与主轴垂直的轴为侧轴

  • row:默认值，沿着水平主轴让元素从左到右的排列
  • row-reverse:沿着水平主轴让元素反向排列
  • column:设置垂直方向为主轴，元素从上到下排列（改变主轴）
  • column-reverse:设置垂直方向为主轴，元素反向排列

改变某个弹性项目的显示位置

order（给子元素设置）

• 取值也为数字，默认为0，数字越大越靠后

• 相同数字按照代码结构排列

• 语法：

  order:数字;
  1

• 应用场景：

  • 不改变代码结构的前提下，可以调整盒子之间的位置
  • 后期可以实现盒子拖拽功能

富裕空间

• 弹性项目在弹性容器里面排列之后剩余的空间，即弹性容器排除弹性项目之后剩余的空间。
• 主轴富裕空间：justify-content
• 侧轴富裕空间：align-items 所有的弹性项目 align-self 设置当前弹性项目
• 原理：让弹性项目通过flex-grow去消化富裕空间

分配主轴方向上的富裕空间

justify-content

• flex-start:默认值，将主轴方向的富裕空间分配在弹性项目的最后（左对齐）
• flex-end:将富裕空间分配在主轴的弹性项目最前面（右对齐）
• center:弹性项目居中
• space-between:首尾紧靠弹性容器，中间弹性项目均分
• space-around:每个弹性项目两边的距离是一样的。
• space-evenly:每个弹性项目之间的距离相同，包含第一个和最后一个和弹性容器的距离。

分配侧轴方向上的富裕空间

align-items

• flex-strat:默认值，弹性项目在侧轴的顶部对齐
• flex-end:弹性项目在侧轴的底部对齐
• center:弹性项目在侧轴上居中对齐
• strech:拉伸，如果弹性项目没有设置高度，弹性项目会将弹性容器撑满

align-self（给子元素设置）

• flex-start 上方
• flex-end 下方
• 弹性项目私有align-items的属性，即单独给某个弹性项目（子元素）设置侧轴方向上的富裕空间分配。

消化富裕空间

flex-grow（给子元素设置）

语法：

flex-grow ：数字;（弹性因子）
1

• 默认为0 ，取值为数字
  • 0表示不参与富裕空间的消化
• 原理：弹性项目会将弹性容器里面多余的空间（富裕空间）分成等量的份数，然后按照每个弹性项目的比例分配给弹性项目里面，弹性项目去消化。
• 弹性因子越大，分配的弹性空间越大，盒子的宽度越大。

压缩空间

• 同一行弹性项目宽度相加之后，超出弹性容器的空间。

• 原理：让弹性项目通过flex-shrink去压缩分配给弹性项目

分配压缩空间

flex-shrink（给子元素设置）

设置当前弹性容器宽度不够时，弹性项目的压缩因子（收缩因子）

• 取值：数字，默认为1

• 数字越大，压缩空间越大，盒子反而越小

• 原理：当弹性容器宽度容不下当前这行弹性项目时，就会按照flex-shrink来收缩弹性项目以达到不换行的目的。这个属性会按照设置的值将要收缩的宽度等量划分，减少弹性项目的的尺寸。

• 前提：弹性容器宽度不够时，并且不换行，而且弹性项目的总宽度要大于弹性容器的宽度，才能有效

• 压缩空间的分配公式：

  每个弹性项目最终压缩后的宽度=自己弹性项目的初始宽度-（压缩空间/ 压缩因子的总数）
  
  压缩空间=每个弹性项目的宽度的总和
  1
  2
  3

  • 压缩空间：（超出容器的值）
  • 压缩空间（超出容器的值）=弹性项目的总宽度 - 弹性容器的宽度
  • 压缩因子的总数：设置压缩份数的总和。（默认是1）

练习：如果容器为500px，项目为120px，共有5个项目？

如果第一个项目设置flex-shrink为2，第二个设置为3， 第四个设置为3，请计算每个弹性项目最终压缩后的宽度？

压缩因子总数：2+3+1+3+1=10

压缩空间=120*5-500=100

每一份的取值宽度：100/10= 10px

box1：10*2=20px 120-20=100px

box2：10*3=30px 120-30=90px

box3、box5：10*1=10px 120-10=110px

box4：10*3=30px 120-30=90px

• flex-basis（给子元素设置）

  设置弹性项目的 默认宽度，其优先级大于width

  语法：

  flex-basis:300px;
  width:400px;
  优先级：flex-basis > width  > 由内容撑开的宽度
  1
  2
  3

4：10*3=30px 120-30=90px

• flex-basis（给子元素设置）

  设置弹性项目的 默认宽度，其优先级大于width

  语法：

  flex-basis:300px;
  width:400px;
  优先级：flex-basis > width  > 由内容撑开的宽度
  1
  2
  3