伸缩盒模型，flex布局

一+一加1

已于 2024-06-25 21:40:44 修改

阅读量320

点赞数 4

文章标签： css css3 前端 flex

于 2024-06-25 21:39:50 首次发布

本文链接：https://blog.csdn.net/m0_71534259/article/details/139938708

版权

1、伸缩容器、伸缩项目

2、主轴方向(flex-direction)

3、主轴换行方式(flex-wrap)

4、flex-flow

5、主轴对齐方式(justify-content)

6、侧轴对齐方式_一行(align-items)

7、侧轴对齐方式_多行(align-content)

8、元素水平垂直居中

9、项目在主轴的基准长度(flex-basis)

1、伸缩容器、伸缩项目

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>01_伸缩容器_伸缩项目</title>
  <style>
    .outer {
      width: 1000px;
      height: 600px;
      background-color: #888;
      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
    }

    .inner {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      border: 1px solid black;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </div>
  </div>
</body>

</html>

2、主轴方向(flex-direction)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_主轴方向</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器（开启了flex布局） */
            display: flex;

            /* 调整主轴方向，水平从左到右，默认 */
            /* flex-direction: row; */

            /* 调整主轴方向，水平从右到左 */
            flex-direction: row-reverse;

            /* 调整主轴方向，垂直从上到下 */
            /* flex-direction: column; */

            /* 调整主轴方向，垂直从下到上 */
            /* flex-direction: column-reverse; */
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>
</html>

3、主轴换行方式(flex-wrap)

.outer {
    width: 1000px;
    height: 600px;
    background-color: #888;
    margin: 0 auto;

    /* 伸缩盒模型相关属性-start */

    /* 将该元素变为了伸缩容器（开启了flex布局） */
    display: flex;

    /* 调整主轴方向，水平从左到右，默认 */
    flex-direction: row;

    /* 主轴换行方式，不换行，默认值 */
    /* flex-wrap: nowrap; */

    /* 主轴换行方式，换行 */
    flex-wrap: wrap;

    /* 主轴换行方式，反向换行 */
    /* flex-wrap: wrap-reverse; */
}

4、flex-flow

不推荐使用

5、主轴对齐方式(justify-content)

.outer {
    width: 1000px;
    height: 600px;
    background-color: #888;
    margin: 0 auto;

    /* 伸缩盒模型相关属性-start */

    /* 将该元素变为了伸缩容器（开启了flex布局） */
    display: flex;

    /* 调整主轴方向，水平从左到右，默认 */
    flex-direction: row;

    /* 主轴换行方式，换行 */
    flex-wrap: wrap;

    /* 主轴的对齐方式，主轴的起始位置 */
    /* justify-content: flex-start; */

      /* 主轴的对齐方式，主轴的结束位置 */
      /* justify-content: flex-end; */

      /* 主轴的对齐方式，中间对齐 */
      /* justify-content: center; */

      /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */
    /* justify-content: space-around; */

      /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离 */
    justify-content: space-between;

    /* 主轴的对齐方式，项目均匀的分布在一行中 */
    /* justify-content: space-evenly; */
}

6、侧轴对齐方式_一行(align-items)

7、侧轴对齐方式_多行(align-content)

8、元素水平垂直居中

9、项目在主轴的基准长度(flex-basis)

10、flex-grow(伸)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>10_伸缩项目_伸</title>
  <style>
    .outer {
      width: 1000px;
      height: 900px;
      background-color: #888;
      margin: 0 auto;

      /* 伸缩盒模型相关属性-start */

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;

      /* 调整主轴方向，水平从左到右，默认 */
      flex-direction: row;

      /* 主轴换行方式，换行 */
      flex-wrap: wrap;

      /* 主轴的对齐方式，主轴的起始位置 */
      justify-content: flex-start;
    }

    .inner {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      border: 1px solid black;
      box-sizing: border-box;
      flex-grow: 0;
    }

    /* .inner1 {
            flex-grow: 1;
        } */
    .inner2 {
      /* flex-grow: 2; */
      width: 300px;
    }

    /* .inner3 {
            flex-grow: 3;
        } */
  </style>
</head>

<body>
  <div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
  </div>
</body>

</html>