【前端web入门第六天】02 flex布局

时间：2024-02-16 14:19:11

文章目录

  • Flex布局
    • 1.Flex组成
    • 2.主轴与侧轴对齐方式
      • 2.1 主轴对齐方式(横轴)
      • 2.2 侧轴对齐方式 (纵轴)
      • 2.3 修改主轴方向
    • 3.弹性伸缩比
    • 4.弹性换行与行对齐方式
      • 4.1 弹性换行
      • 4.2 行对齐方式

Flex布局

1.Flex组成

设置方式:给父元素设置display: flex，子元素可以自动挤压或拉伸
组成部分:

  • 弹性容器
  • 弹性盒子
  • 主轴:默认在水平方向
  • 侧轴/交叉轴:默认在垂直方向

在这里插入图片描述
分析:

自动设置,由代码实现.

2.主轴与侧轴对齐方式

2.1 主轴对齐方式(横轴)

属性名: justify-content

属性值 效果
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
sapce-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
sapce-aroud 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
sapce-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

分析:

前两个不常用,后四个是重点.

2.2 侧轴对齐方式 (纵轴)

属性名

  • align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置).
  • align-self:单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置)
属性值 效果
stretch 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸)
center 弹性盒子沿侧轴居中排列
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
分析:
前两个重点,后两个基本不用.

2.3 修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向
属性名:flex-direction
属性值

属性值 效果
row 水平方向,从左到右(默认)
column 垂直方向,从上到下
row-reverse 水平方向，从右向左
column-reverse 垂直方向，从下向上

分析:

只记colum.
修改主轴方向垂直方向;侧轴自动变换到水平方向

3.弹性伸缩比

作用︰控制弹性盒子的主轴方向的尺寸。
属性名: flex
属性值:整数数字，表示占用父级剩余尺寸的份数。
分析:

默认情况下，主轴方向尺寸是靠内容撑开:侧轴默认拉伸

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-弹性伸缩比</title>
  <style>
    /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
    .box {
      display: flex;
      flex-direction: column;

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

    .box div {
      /* height: 100px; */
      background-color: pink;
    }

    .box div:nth-child(1) {
      width: 200px;
    }

    .box div:nth-child(2) {
      flex: 1;
    }

    .box div:nth-child(3) {
      flex: 2;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

在这里插入图片描述

4.弹性换行与行对齐方式

4.1 弹性换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名: flex-wrap

属性值

  • wrap:换行
  • nowrap:不换行（默认)

4.2 行对齐方式

属性名: align-content
属性值

属性值 效果
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
sapce-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
sapce-aroud 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
sapce-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

分析:

跟主轴对齐方式是一样的
行对齐方式:对单行弹性盒子不生效

相关文章