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布局配合小技巧

注意：

0. 盒子要有宽度或者父盒子要有宽度
1. 如果不想设置具体宽度可以设置flex:1; width:0 ;
2. 前提条件是 父盒子要设置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;
    }