flex布局（弹性布局）
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题 (flex布局不会脱标)
- 注意：如果子盒子没有设置高度，子盒子将会拉伸填满父盒子高度
flex布局模型盒子构成
- 目标：能够使用Flex布局模型灵活、快速的开发网页
- 作用：
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
- 设置方式：父元素添加
display:flex子元素自动挤压或拉伸。
- 添加
display:flex后的视觉效果：子级一行排列/水平排列- 水平排列：默认主轴在水平，弹性盒子默认沿着主轴排列
- 组成部分：
- 弹性容器（父级）
- 弹性盒子（子级）
- 主轴
- 侧轴/交叉轴
主轴对齐方式
修改主轴对齐方式属性:
justify-content/* 居中 */ justify-content: center; /* 间距在弹性盒子(子级)之间 */ justify-content: space-between; /* 所有地方间距相等 */ justify-content: space-evenly; /* 间距加载子级两侧 */ /* 视觉效果：子级之间的距离是父级两头距离的2倍 */ justify-content: space-around;
侧轴（交叉轴）对齐方式
目标：使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性:
align-items（添加到弹性容器）align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）- /* 拉伸，默认值 */ align-items: stretch; /* 居中 */ align-items: center;
- ==注意：==测试`stretch`时要注意子级盒子高度 **单独设置某个弹性盒子的侧轴对齐方式** - `align-self: center;`
.box div:nth-child(2) { align-self: center; }
改变主轴的方向（重要）
flex-direction: ;
- 改变主轴的方向，从水平改垂直
- column从水平改为垂直
flex-direction: column;
- flex布局就有两个方向，主轴和侧轴，只要改变主轴方向侧轴也跟着改变
- 注意：
- 一旦修改轴向
- 1.要先确定主轴方向
- 2.再选择对应的属性实现主轴或侧轴的对齐方式
- 比如：主轴从水平改为垂直方向，
justify-content: center;的视觉效果：就是垂直居中，align-items: center;的视觉效果：就是实现水平居中
伸缩比
目标：使用flex属性修改弹性盒子伸缩比
属性 flex ：值;
取值分类 ：数值(整数)
注意 : 只占用父盒子剩余尺寸
弹性盒子换行
- 目标：使用
flex-wrap实现弹性盒子多行排列效果- 弹性盒子换行显示：
flex-wrap: wrap;- 调整对齐方式：
align-content
- 取值与
justify-content基本相同
文字省略号与flex布局配合小技巧
注意：
- 盒子要有宽度或者父盒子要有宽度
- 如果不想设置具体宽度可以设置
flex:1; width:0 ;- 前提条件是 父盒子要设置flex
.dingdan_content .goods .txt { flex: 1; /* 溢出时显示省略号 */ /* 因为弹性盒子的尺寸可以被内容撑开，width: 0; 不换行的文字可以撑开这个盒子的尺寸，所以溢出的部分显示为省略号 */ width: 0; } .dingdan_content .goods .txt h5 { text-overflow: ellipsis; /* 不换行 */ white-space: nowrap; /* overflow: hidden;是给width: 0;用的 */ overflow: hidden; }
flex布局拓展
- 当给a标签设置宽高时，父级盒子添加了display：flex；属性，则a标签宽高生效
- 在flex布局下父级设置flex 子级若为行内元素则设置宽高生效
- 让文字在一个盒子里实现水平垂直居中
- <div class="status"><i>待付款</i></div>
- .dingdan_content .status { /* 让文字在一个盒子里实现水平垂直居中 */ display: flex; justify-content: center; align-items: center; width: 120px; color: #e05e30; }
