(十四).CSS3中的多列布局和伸缩盒布局

1 多列布局

① 设置给包裹元素的 CSS 属性（共 8 个属性）

CSS 属性名	含义	值
column-count	设置列数	纯数字
column-width	设置列宽	长度
columns	同时设置列数和列宽
column-gap	设置列间距	长度
column-rule-style	列分隔线风格	同 border-style
column-rule-color	列分隔线颜色	颜色
column-rule-width	列分隔线宽度	长度
column-rule	列分隔线复合属性

column-count 和 column-width：

1. 单独设置 column-count 或单独设置 column-width 都可以实现多列布局
2. 同时设置 column-width 和 column-count，哪一个分出来列数少就按照哪一个

② 设置给子元素的 CSS 属性（共 4 个属性）

CSS 属性名	含义	值
column-span	设置元素是否跨列	none：不跨列。 all：跨所有列
-webkit-column-break-before	设置元素前面是否断列	auto：自动，默认值。 always：强制断列。 avoid：不允许断列
-webkit-column-break-after	设置元素后面是否断列	auto：自动，默认值。 always：强制断列。 avoid：不允许断列
-webkit-column-break-inside	设置元素内部是否断列	auto：自动，默认值。 avoid：不允许断列

2 伸缩盒布局

2.1 伸缩容器和伸缩项目

① 概念定义

伸缩容器：给元素设置 display:flex 或者 display:inline-flex，该元素就变为伸缩容器。

伸缩项目： 伸缩容器的子元素就是伸缩项目。

② 伸缩项目的特点

1. 伸缩项目不会脱离文档流，多个伸缩项目默认沿着主轴排列（主轴默认是水平的）
2. 不论原来的显示模式是什么，变为伸缩项目之后，就有伸缩项目的特点。
   伸缩项目优先级高于浮动，不如定位。
3. 伸缩项目是独立的显示模式。
   1、伸缩项目默认宽高被内容撑开，不存在外边距塌陷合并 （区分块级元素）
      如果伸缩项目不设置在侧轴上的长度，默认会拉伸成与伸缩容器在侧轴上的高度一致 （align-items:stretch）
   2、可以完美设置宽高、内外边距（区分行内）
   3、不会被父元素作为文本处理（区分行内块）
4、 伸缩项目具有伸缩性

2.2 设置主轴方向和换行方式

主轴： 伸缩项目会沿着主轴进行排列，第一个伸缩项目默认在主轴起点处。

侧轴： 侧轴永远与主轴保持垂直，修改了主轴方向侧轴跟着变换。

① 设置主轴方向

给伸缩容器设置 flex-direction 可以设置主轴方向,该属性值如下：

row		水平从左到右，默认值
row-reverse		水平从右到左
column		垂直从上到下
column-reverse		垂直从下到上

② 设置换行方式

给伸缩容器设置 flex-wrap 可以设置伸缩项目在主轴上的换行方式，该属性值如下：

nowrap				不换行，默认值
wrap				自动换行
wrap-reverse			换行且反转行排序

③ 同时设置主轴方向和换行方式

给伸缩容器同时设置 flex-flow 可以同时设置主轴方向和换行方式， flex-flow是 flex-direction 和 flex-wrap 的复合属性。

2.3 设置伸缩项目在主轴上的对齐方式

给伸缩容器设置 justify-content，该属性值如下：

flex-start			靠主轴起点对齐
flex-end			靠主轴终点对齐
center				居中对齐
space-between		两端对齐
space-around		两端间距是中间间距的一半
space-evenly		两端间距与中间间距一致

2.4 设置伸缩项目在侧轴上的对齐方式

① 一条主轴线（伸缩项目在主轴上不换行）

给伸缩容器设置 align-items，属性值：

stretch			拉伸，默认值。  如果伸缩项目不设置在侧轴上的长度，会拉伸成与伸缩容器在侧轴上的高度一致。
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中
baseline		基线对齐，不建议使用

② 多条主轴线 （伸缩项目在主轴上发生换行）

给伸缩容器设置 align-content 属性值：

stretch			拉伸，默认值。 如果伸缩项目不设置在侧轴上的长度，会拉伸成与伸缩容器在侧轴上的高度一致。
                             （就算是伸缩项目设置了侧轴上的长度，他也是拉伸的布局，只是会在不能拉伸的部分留着空白）
flex-start		靠侧轴起点对齐
flex-end		靠侧轴终点对齐
center			居中对齐
space-between	两端对齐
space-around	两端间距是中间间距的一半
space-evenly	两端间距与中间间距一致

☆☆☆元素水平垂直居中方案☆☆☆

• 方案1

1.设置父元素为伸缩容器，并设置
body,html {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
	align-items: center;
}

• 方案2

2.
html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
}

.wrapper {
  width: 100px;
  height: 100px;
  border: 1px solid;
  /*
  可以直接设置成功的原因：伸缩容器中 主轴和侧轴方向是可以互换的，也就是同等地位
  另外需要注意：
    margin:auto; 是对剩余的空间进行自动分配
  */
  margin: auto;
}

2.5 伸缩项目的伸缩性

① 伸缩项目在主轴上的基准长度 flex-basis

1. 该属性设置的是伸缩项目在主轴上的长度，优先级高于 width 或 height。
2. 该属性默认值是 auto，表示不设置是伸缩项目在主轴上的长度

② 扩展比率 flex-grow

扩展比率：默认是 0，如果存在富余空间，也不占据

伸缩项目扩展的前提：

1. 伸缩容器在主轴方向上有富余空间
2. 伸缩项目的扩展比率不为0

伸缩项目扩展的规则：

各伸缩项目按照各自的扩展比率，瓜分伸缩容器的富余空间

③ 收缩比率 flex-shrink

伸缩项目收缩的前提：

收缩比率默认值是1

1. 伸缩容器在主轴上长度不够（小于伸缩项目在主轴上的长度和）
2. 收缩比率不能是 0
3. 伸缩项目不能自动换行 flex-wrap:wrap

伸缩项目收缩的规则：

既要考虑伸缩比率 也要考虑伸缩项目本身的长度
亏空 100px
box01 原先100px 伸缩比3
box02 原先200px 伸缩比1
box03 原先300px 伸缩比2

权重：
box01:  100px*3
box02:  200px*1
box03:  300px*2

分母： 100px*3 + 200px*1 + 300px*2 =  1100;

box01 补： 100 * 3/11
box02 补： 100 * 2/11
box03 补： 100 * 6/11

④ flex 复合属性

flex: 扩展比率 收缩比率 基准长度;
flex: grow shrink basis;

flex: 1 1 0;  /* 简写为 flex: 1; */
flex: 0 0 auto;   /* 简写为 flex: none; */

2.6 伸缩项目排序

给伸缩项目设置 order 属性设置排序，属性的值是纯数字，默认为0，可以是负值，值越小排序越靠前

2.7 单独设置伸缩项目在侧轴上的对齐方式

只适用于单行主轴的情况

给伸缩项目设置 align-self ,属性值：

auto			默认值，表示遵守伸缩容器中 align-items 的设置
stretch			拉伸， 如果伸缩项目不设置在侧轴上的长度，会拉伸成与伸缩容器在侧轴上的高度一致。
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中
baseline		基线对齐，不建议使用

2.8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

CSS 属性名	含义	值
display	设置伸缩容器	flex inline-flex
flex-direction	设置主轴方向
flex-wrap	设置主轴上换行方式
flex-flow	同时设置主轴方向和换行方式
justify-content	伸缩项目在主轴上的对齐方式
align-items	伸缩项目在侧轴上的对齐方式（不换行）
align-content	伸缩项目在侧轴上的对齐方式（换行）

② 设置给伸缩项目的属性

CSS 属性名	含义	值
flex-basis	在主轴上的基准长度	长度
flex-shrink	收缩比率	数字，默认值是 1
flex-grow	扩展比率	数字，默认值是 0
flex	复合属性
order	设置排序顺序	数字
align-self	单独设置该伸缩项目侧轴对齐方式	同 align-items

个人总结

• flex属性是给伸缩项目设置在主轴上是否拉伸，收缩，固定大小的
• justify-content是设置各个伸缩项目在主轴上的对齐方式
• align-items是设置单行主轴的伸缩项目在侧轴上对齐方式，默认是（stretch）拉伸到伸缩容器的宽度
• align-content是设置多行主轴的伸缩项目在侧轴上的对齐方式，默认是（stretch）多行都平均拉伸