移动Web实训DAY-2

3. Flex布局

3.1 组成部分

1. 作用：
   • 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
   • Flex布局非常适合结构化布局
2. 设置方式：
   • 父元素添加 display: flex
   • 提示：这里的父元素必须是 亲爸爸
3. 组成部分：
   1. 弹性容器：父元素，亲爸爸
   2. 弹性盒子：子元素
   3. 主轴：默认是水平方向，所以flex布局默认就是沿着主轴水平排列的
   4. 侧轴：默认是垂直方向

3.2 主轴对齐方式：justify-content

作用：调节弹性盒子主轴方向之间的间距

/* flex布局 */
display: flex;

/* 调整水平方向的间距 */
/* 默认值，从左往右依次排列，没有间距 */
/* justify-content: flex-start; */
/* 默认值，从右向左依次排列，没有间距 */
/* justify-content: flex-end; */
/* 沿着主轴方向居中排列，没有间距 */
/* justify-content: center; */
/* 沿着主轴方向，每个盒子都有相同的左右间距 */
/* justify-content: space-around; */
/* 沿着主轴方向，最左和最右的盒子紧贴着父级的左右，间距平局分配给其他合资 */
/* justify-content: space-between; */
/* 沿着主轴方向，每个弹性盒子间距相同的 */
justify-content: space-evenly;

3.3 侧轴对齐方式：align-items

作用：调节弹性盒子侧轴方向的位置

重点是垂直居中：center

.box {
  /* 水平排列 */
  display: flex;
  /* 侧轴对齐方式: 垂直居中排列（重要） */
  /* align-items: center; */

  /* 默认值，弹性盒子会沿着侧轴 拉伸至铺满弹性容器的高度 */
  align-items: stretch;

  height: 300px;
  margin: auto;
  border: 1px solid #000;
}

/* 弹性盒子大小说明：
弹性布局时，弹性盒子如果没有设置固定的大小，默认就是内容大小 
弹性布局的盒子，类似于行内块显示模式，既能设置大小，默认盒子大小也可以由内容决定
*/

3.4 伸缩比

作用：调节弹性盒子占据弹性容器剩余部分的宽度

代码：

/* 
  表示把弹性容器剩余的部分分成2分
  2号弹性盒子占2份
*/

/* 第二个弹性盒子 */
.box div:nth-child(2) {
  /* 设置弹性盒子伸缩比 */
  flex: 2;
}

效果：

代码：

/* 
  表示把弹性容器剩余的部分分成6分
  2号弹性盒子占2份
  3号弹性盒子占4份
*/

/* 第二个弹性盒子 */
.box div:nth-child(2) {
  /* 设置弹性盒子伸缩比 */
  flex: 2;
}

/* 第三个弹性盒子 */
.box div:nth-child(3) {
  flex: 4;
}

效果：