Flex布局学习

最新推荐文章于 2024-08-22 09:47:29 发布

淘淘是只狗

最新推荐文章于 2024-08-22 09:47:29 发布

阅读量595

点赞数

分类专栏： CSS 文章标签： flex css3 html

本文链接：https://blog.csdn.net/qq_43477721/article/details/104128320

版权

CSS 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

1. Flex 布局的概念

flexible box: 弹性盒状布局
容器控制内部元素的布局定位
CSS3引入的新布局模型
伸缩元素，自由填充，自适应

2. Flex布局的优势

可在不同方向排列元素
控制元素排列的方向
控制元素的对齐方式
控制元素之间的等距
控制单个元素放大与缩放比例，占比，对齐方式

3. Flex布局的常用术语

flex container：flex 容器
flex item：flex 项目（元素）
flex direction：布局方向

初始化代码

<!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>
    body {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      display: -webkit-flex;
      height: 500px;
      background-color: wheat;
    }

    .sub {
      background-color: #000;
      color: white;
      font-size: 32px;
      width: 70px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      border: 2px solid aquamarine;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="sub">1</div>
    <div class="sub">2</div>
    <div class="sub">3</div>
    <div class="sub">4</div>
    <div class="sub">5</div>
    <div class="sub">6</div>
  </div>
</body>
</html>

在这里插入图片描述

4. Flex-direction

row 排列方向：从左到右（默认）
row-reverse 排列方向：从右到左
column 排列方向：从上到下
column-reverse 排列方向：从下到上

在这里插入图片描述

5. Flex-wrap

wrap：换行
nowarp：不换行

在这里插入图片描述

6. justify-content

flex-start: (默认)左对齐或向上对齐
flex-end：右对齐或向下对齐
center：居中对齐
space-between：两端对齐，元素之间平均等分剩余空白间隙部分
space-around：元素两边平均等分剩余空白间隙部分，最左或最右和元素之间的距离是1:2

在这里插入图片描述

7. align-items(设置元素在纵轴上的对齐方式)

flex-start：在纵轴上向起点位置（向上 / 向左）对齐
flex-end：在纵轴上向起点位置（向下 / 向右）对齐
center：居中对齐
baseline：保证元素中的文字在同一条基准线（保证每一个文字都在同一条线上）
stretch ( 默认 )：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致

在这里插入图片描述

8. align-content（当轴线超过1条的时候，flex容器可以把更多条轴线视为元素对待，可以进行对齐）高度设定，元素换行时，会将剩下的空白区域进行平分，这时会出现换行元素之间出现空白

（演示时，要给外框的加上 flex-wrap: wrap; 这个属性一起使用，同时将盒子的宽高均调到 200px）

flex-start：向左对齐
flex-end：向右对齐
center：居中（轴线居中）
space-between：两端对齐，元素之间的空白等比切分
space-around：轴线两边的空白等比切分
stretch：当宽度width没有设置的时候，轴线可以被拉伸

在这里插入图片描述

9. order（用于设置flex容器内部的每个元素的排列顺序，默认是0，排列规则，从小到大）

在这里插入图片描述

10. Flex-grow（用于设置元素的放大比例，默认为0，如果为0，则不放大）

在这里插入图片描述

11. Flex-shrink（用于定义属性的缩放比例，默认为1，设置为0的时候，不进行缩放，会去挤压其他元素）

13. align-self（重写align-items父属性）

重写容器中元素在纵轴上的对齐方式
auto：默认，继承父元素属性
flex-start：在纵轴上向起点位置（向上 / 向左）对齐
flex-end：在纵轴上向起点位置（向下 / 向右）对齐
center：居中对齐
baseline：保证元素中的文字在同一条基准线（保证每一个文字都在同一条线上）
stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致

在这里插入图片描述

实际案例

1. 水平居中

<!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>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
      display: flex;
      justify-content: center;
    }

    .son {
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div class="father">
    <span class="son">son</span>
  </div>
</body>

</html>

2. 垂直居中

<!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>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
      display: flex;
      align-items: center;
    }

    .son {
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div class="father">
    <span class="son">son</span>
  </div>
</body>

</html>

3. 水平垂直居中

<!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>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .son {
      width: 100px;
      height: 100px;
      background: yellow;
    }
  </style>
</head>

<body>
  <div class="father">
    <span class="son">son</span>
  </div>
</body>

</html>

4. 左列定宽, 右列自适应

<!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>Document</title>
  <style>
    .box {
      height: 200px;
      display: flex;
    }

    .box-left {
      width: 200px;
      background-color: aquamarine;
    }

    .box-right {
      flex-grow: 1;
      overflow: hidden;
      background-color: blueviolet;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box-left"></div>
    <div class="box-right"></div>
  </div>
</body>

</html>

5. 三栏布局

<!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>Document</title>
  <style>
    .layout.flexbox .left-center-right {
      display: flex;
    }

    .layout.flexbox .left {
      width: 300px;
      background: red;
    }

    .layout.flexbox .center {
      flex: 1;
      background: yellow;
    }

    .layout.flexbox .right {
      width: 300px;
      background: blue;
    }
  </style>
</head>

<body>
  <section class="layout flexbox">
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h1>flexbox的解决方案</h1>
        <p>1.这是布局的中间部分</p>
        <p>2.这是布局的中间部分</p>
      </div>
      <div class="right"></div>
    </article>
  </section>
</body>

</html>