CSS flex布局（详解）

最新推荐文章于 2024-04-21 07:10:13 发布

screamn

最新推荐文章于 2024-04-21 07:10:13 发布

阅读量150

点赞数 2

分类专栏： CSS 前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/screamn/article/details/134477759

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

前面我们学了很多基本的布局，现在我们将学习一种新的布局方式，这种布局方式更为常用，并且可以缩减很多不必要的代码。

我们来看一个实际中的布局。

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .head {
      width: 400px;
      height: 400px;
      display: flex;
      flex-direction: column;
    }

    .head .top {
      display: flex;
      flex: 1;
      background-color: red;
    }

    .top-Top {
      flex: 1;
      background-color: yellow;
    }

    .top-Bottom {
      flex: 1;
    }

    .head .bottom {
      background-color: pink;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .bottom-Top{
      flex: 1;
      background-color: blue;
    }
    .bottom-Bottom{
      flex: 1;
    }
  </style>
</head>

<body>
  <div class="head">
    <div class="top">
      <div class="top-Top">
        上边的左面
      </div>
      <div class="top-Bottom">
        上边的右面
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-Top">
        下边的上面
      </div>
      <div class="bottom-Bottom">
        下边的下面
      </div>
    </div>
  </div>
</body>

</html>

是不是发现比传统写法定位这种方便并且当你调整大的盒子的大小时，其他的小盒子跟着一起变化

flex布局

我们来复习一下css中的坐标轴方向：注意这个坐标轴的方向是不用于数学中的直角坐标，他是以页面左上角为原点的坐标轴。其中主轴默认的是x轴

属性：

flex-direction：指定 flex 容器内项目的排列方向。
- 可选值：
  - row：水平方向，从左到右排列（默认值）。
  - row-reverse：水平方向，从右到左排列。
  - column：垂直方向，从上到下排列。
  - column-reverse：垂直方向，从下到上排列。
justify-content：定义 flex 容器内项目沿主轴的对齐方式。
- 可选值：
  - flex-start：靠近主轴起点对齐（默认值）。
  - flex-end：靠近主轴末尾对齐。
  - center：居中对齐。
  - space-between：两端对齐，项目之间的间隔相等。
  - space-around：每个项目两侧的间隔相等，项目之间的间隔是它们的两倍。
align-items：定义 flex 容器内项目沿交叉轴的对齐方式。
- 可选值：
  - flex-start：靠近交叉轴起点对齐。
  - flex-end：靠近交叉轴末尾对齐。
  - center：居中对齐（默认值）。
  - baseline：基线对齐。
  - stretch：拉伸以填充容器。
flex-wrap：定义 flex 容器内项目是否换行。
- 可选值：
  - nowrap：不换行，所有项目在一行内排列（默认值）。
  - wrap：换行，超出容器宽度时进行换行。
  - wrap-reverse：反向换行，超出容器宽度时从底部开始换行。
align-content：定义多行或多列的 flex 容器内项目的对齐方式，只有在存在多行或多列时才生效。
- 可选值：
  - flex-start：靠近交叉轴起点对齐。
  - flex-end：靠近交叉轴末尾对齐。
  - center：居中对齐。
  - space-between：两端对齐，项目之间的间隔相等。
  - space-around：每个项目两侧的间隔相等，项目之间的间隔是它们的两倍。
  - stretch：拉伸以填充容器。

flex-direction

flex-direction设置主轴方向，默认按照水平布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    .contains{
      width: 300px;
      height: 300px;
      background-color: pink;
      display: flex;
    }
    .left{
      flex:1;
      background-color: yellow;
    }
    .right{
      flex:1;
    }
  </style>
</head>
<body>
  <div class="contains">
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
  </div>
</body>
</html>

当我改变flex-direction：column此时显示得是按照垂直排列

reserve主要是写排列顺序的。正常时先写得先排，但是加上revser的时候会颠倒顺序。如

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    .contains{
      width: 300px;
      height: 300px;
      background-color: pink;
      display: flex;
      flex-direction:column-reverse;
    }
    .left{
      flex:1;
      background-color: yellow;
    }
    .right{
      flex:1;
    }
  </style>
</head>
<body>
  <div class="contains">
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
  </div>
</body>
</html>

`justify-content`：定义 `flex` 容器内项目沿主轴的对齐方式。

justify-content：:center水平居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    body{
      display: flex;
      justify-content: center;
    }
    .contains{
      width: 300px;
      height: 300px;
      background-color: pink;
      display: flex;
      flex-direction:column-reverse;
    }
    .left{
      flex:1;
      background-color: yellow;
    }
    .right{
      flex:1;
    }
  </style>
</head>
<body>
  <div class="contains">
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
  </div>
</body>
</html>

justify-content: start；水平最左边，初始位置

justify-content: end；水平最右端

justify-content: space-between；按照默认的鹅direction排列，保证间隔相同，左右贴近边框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    .contains{
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: space-between;
    }
    .left{
      width: 50px;
      background-color: yellow;
    }
    .right{
      width: 50px;
      background-color: pink;
    }
  .right1{
      width: 50px;
      background-color: blue;
    }

  </style>
</head>
<body>
  <div class="contains">
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
    <div class="right1">
      右边
    </div>
  </div>
</body>
</html>

align-`items`指的时垂直方向上的排列，使用和justify-content一样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .head{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .top{
      justify-content: center;
      align-items: center ;
      display: flex;
      width: 1200px;
      height: 500px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="head">
    
    </div>
  </div>
</body>
</html>

`flex-wrap`：定义 `flex` 容器内项目是否换行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .head{
      width: 100px;
      height: 100px;
      background-color: pink;
      display: flex;
      flex-wrap: wrap;
    }
    .l{
      width: 10px;
      height: 10px;
      background-color: red;
      margin:3px;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="head">
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
    </div>
  </div>
</body>
</html>

`align-content`：定义多行或多列的 `flex` 容器内项目的对齐方式，只有在存在多行或多列时才生效。

align-content 和 align-items 是 Flexbox 布局中用于控制项目在交叉轴上对齐的两个属性，它们之间有一些区别：

align-content：
- 只在 flex 容器有多行时生效，用来定义多行的对齐方式。
- 如果容器内只有一行，align-content 不会生效。
- 适用于多行的情况，可以控制多行之间的对齐方式，比如居中对齐、沿着交叉轴均匀分布等。
align-items：
- 用来定义单行内项目在交叉轴上的对齐方式。
- 如果 flex 容器是单行的，align-items 控制整个项目集合在交叉轴上的对齐方式。
- 适用于单行的情况，可以控制项目在交叉轴上的对齐方式，比如居中对齐、顶部对齐、底部对齐等。