Flex布局学习

最新推荐文章于 2022-09-29 10:52:22 发布

淘淘是只狗

最新推荐文章于 2022-09-29 10:52:22 发布

阅读量450

点赞数

分类专栏： 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>

淘淘是只狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex布局学习

Flex布局1. flex 布局的概念 flexible box: 弹性盒状布局容器控制内部元素的布局定位 CSS3引入的新布局模型伸缩元素，自由填充，自适应2.flex布局的优势可在不同方向排列元素控制元素排列的方向控制元素的对齐方式控制元素之间的等距控制单个元素放大与缩放比例，占比，对齐...
复制链接

扫一扫