Web前端学习—基础篇(34)_CSS3弹性盒子：弹性盒子特点、如何设置弹性盒子
6.6、弹性盒子
6.6.1、弹性盒子简介
1、特点
flex布局 简单、快速、高效页面布局
2、flex布局与传统布局对比
传统布局:
1、兼容性好
2、PC端页面更多使用传统布局
3、布局繁琐
4、有局限性，不能在移动端有很好的布局
flex布局：
1、 IE11及更早版本的不支持或部分支持
2、 移动端兼容性要比PC端要好
3、 在盒模型中较为灵活
4、 操作方便，布局简单，移动端使用广泛
5、 css3新增布局方式，一种当页面需要使用不同屏幕大小，不同的设备类型时，能够确保元素拥有恰当的行为
3、弹性盒模型的内容包含：弹性容器、弹性子元素
4、引入弹性盒子的目的
用一种更加有效的方式对容器的子元素进行排列、对齐、分配空白空间，即使弹性子元素尺寸发生改变，弹性容器也能正常工作
5、原理
为父元素设置display:flex属性，控制子元素的排列方式及位置
6.6.2、设置弹性盒子——display属性,在父元素上设置
- display: flex; 将盒子设置为弹性容器
- display: inline-flex;
6.6.3、基本概念
-
flex容器、项目
-
默认在容器中有两根轴线
默认主轴：水平方向，左侧为主轴起点，右侧为主轴终点
默认交叉轴：垂直方向，上方为交叉轴起点，下方交叉轴的终点
将容器设置为flex布局之后，子元素中的float|clear|vertical-align属性都无效
6.6.4、容器属性——在父元素上设置
- flex-direction属性 设置主轴方向，子元素的排列方向
flex-direction: row;/*默认值，主轴方向为水平方向，起点在左侧，排列次序与文档顺序一致 */
flex-direction: row-reverse;/* 主轴方向水平方向，排列次序与文档顺序相反 */
flex-direction: column;/* 主轴方向为垂直方向，起点在上方，排列次序与文档顺序一致 */
flex-direction: column-reverse;/* 主轴方向为垂直方向，排列次序与文档顺序相反 */
- justify-content属性 弹性子元素在主轴方向的对齐方式
justify-content: flex-start;/* 默认值，子元素位于弹性容器的开头 */
justify-content: flex-end;/* 子元素位于弹性容器的结尾 */
justify-content: center;/* 子元素位于弹性容器的中部 */
justify-content: space-around;/* 子元素的之前、之间、之后都有空白空间 */
justify-content: space-between;/* 子元素之间有空白空间 */
- align-items属性 弹性子元素在交叉轴上的对齐方式
align-items: stretch;/* 默认值，如果弹性子元素没有设置高度或高度为auto，将占满整个父元素高度 */
align-items: flex-start;/* 子元素位于交叉轴起点 */
align-items: flex-end;/* 子元素位于交叉轴终点 */
align-items: center;/* 子元素位于交叉轴中点 */
align-items: baseline;/* 子元素在第一行文字的基线对齐 */
- flex-wrap属性 弹性子元素在一根轴线上放不下时的换行方式
flex-wrap: wrap;/* 换行，第一行在上方显示 */
flex-wrap: wrap-reverse;/* 换行，第一行在下方显示 */
flex-wrap: nowrap;/* 默认值，不换行 */
- align-content属性 多根轴线的对齐方式，如果只有一根轴线，属性失效
align-content: stretch;/* 默认值，轴线占满整个交叉轴 */
align-content: flex-start;/* 交叉轴起点对齐 */
align-content: flex-end;/* 交叉轴终点对齐 */
align-content: center;/* 交叉轴中点对齐 */
align-content: space-around;/* 轴线两侧都有空白空间 */
align-content: space-between;/* 轴线之间有空白空间 */
6.6.5、项目属性——写在子盒上
- order属性 子元素的排列次序
属性值没有单位，是数值，默认数值为0，数值越小，排列越靠前
- flex-grow属性 子元素的放大比例
属性值没有单位，是数值，默认为0，表示不放大
- flex-shrink属性 子元素的缩小比例
属性值没有单位，是数值
默认值为1，表示当空间不足时，等比例缩小
属性值为0，表示当空间不足时，不缩小
- align-self属性 弹性容器中被选中子项的对齐方式
align-self: auto; 默认值，元素继承了父元素的align-items属性，如果父元素没有属性则属性值为stretch
align-self: stretch; 占满整个容器高度
align-self: flex-start; 交叉轴起点对齐
align-self: flex-end; 交叉轴终点对齐
align-self: center; 交叉轴中点对齐
align-self: baseline; 子元素的第一行文字基线对齐
