全部栏目

首页 操作系统 后端开发 数据库 前端开发 移动端开发
您的当前位置：首页正文

Flex布局学习

2024-11-29 来源：个人技术集锦
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>
显示全文