【CSS】CSS之flex布局详解

Pixel0216

已于 2022-05-25 19:54:55 修改

阅读量1.9k

点赞数 3

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

于 2022-05-25 18:06:46 首次发布

本文链接：https://blog.csdn.net/weixin_43797577/article/details/124971095

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

flex布局

flex布局极大的提高了我们布局的效率，更简单、灵活。

display: flex; 一定要给父盒子加。

flex主轴

flex主轴是水平方向来布局的一个参考线常用的属性为

 /* 默认对齐方式 左侧对齐 */
      justify-content: flex-start;
      /* 右侧对齐 */
      justify-content: flex-end;
      /* 中间对齐  经常用于让一个盒子水平居中*/
      justify-content: center;
      /* 中间的间隙是两侧的两倍 相当于每一个盒子有一个左右边距 记住2倍*/
      justify-content: space-around;
      /* 将盒子均匀分布在父盒子 显示效果：两侧没缝隙 */
      justify-content: space-between; 
      /* 子盒子间隙均匀排列在父盒子上  空隙一样大 */
      justify-content: space-evenly;

主轴对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
`center`	沿主轴居中排列
`space-around`	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
`space-between`	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
`space-evenly`	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

记忆：

两侧没缝隙是 between
缝隙一样大是 evenly
2倍缝隙是 around
水平居中是center

flex侧轴

flex侧轴是垂直方向来布局的一个参考线常用属性为

    .box {
      width: 500px;
      height: 400px;
      background-color: pink;
      display: flex;
      /* 起始开始依次排列 */
      align-items: flex-start;
      /* 终点开始依次排列 */
      align-items: flex-end;
      /* 侧轴居中对齐 */
      align-items: center;
      /* 默认效果 没有高度时和父亲一样高 弹性盒子沿着侧轴线被拉伸至铺满容器 */
      align-items: stretch;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: purple;
    }

    .son:nth-child(2) {
      background-color: aqua;
    }

侧轴对齐方式

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
`center`	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

重点记住center 可以让盒子水平垂直居中

flex让子盒子在父盒子中实现水平垂直居中方法

<!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>
    * {
      padding: 0;
      margin: 0;
    }

    .father {
      width: 300px;
      height: 300px;
      background-color: pink;
      display: flex;
      /* 主轴水平水平 */
      justify-content: center;
      /* justify-content: space-around; */
      /* justify-content: space-evenly; */
      /* 侧轴垂直对齐 */
      align-items: center;

    }

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

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

</html>

伸缩比

把父盒子分为若干份，每一个子盒子各占几份。

flex:1;一定给子盒子加

分配父级盒子的剩余空间

语法：

flex:1;

圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

核心思路：

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

.top {
    display: flex;
    justify-content: c;
}

.top div:first-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:last-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:nth-child(2) {
    flex: 1;
    height: 50px;
    background-color: pink;
}

注意：中间flex: 1; 和 width 有冲突。优先执行 flex：1

背景图二倍/三倍做法

核心做法:

利用像素大厨里边选择2X或3X，再利用background-size缩放背景图片
测量坐标

具体缩放大小可以写为:

background-size：图片的宽（一般跟盒子一样大） auto;

改变默认主轴方向

改变主轴方向：flex-direction: column;

 <style>
    .box {
      width: 600px;
      height: 600px;
      background-color: pink;
      /* flex布局 */
      display: flex;
      /* 改变主轴方向 */
      flex-direction: column;
      /* 水平居中 侧轴 */
      align-items: center;
      /* 垂直居中 主轴 */
      justify-content: center;
    }

    .box>div {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    .box div:first-child {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
  </div>
</body>

弹性盒子换行

代码： flex-wrap: wrap;

  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      flex-wrap: wrap;

    }

    .box div {
      width: 150px;
      height: 150px;
      background-color: purple;
    }

    .box div:nth-child(2n) {
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</body>

小结

在flex眼中，标签不再分类。
- 简单说就是没有块级元素，行内元素和行内块元素
- 任何一个元素都可以直接给宽度和高度一行显示
Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex

https://caniuse.com/ 可以查看兼容性

Pixel0216

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】CSS之flex布局详解

flex布局flex布局flex主轴flex侧轴flex让子盒子在父盒子中实现水平垂直居中方法伸缩比圣杯布局小结改变默认主轴方向弹性盒子换行flex布局flex布局极大的提高了我们布局的效率，更简单、灵活。display: flex; 一定要给亲爸爸加。flex主轴flex主轴是水平方向来布局的一个参考线常用的属性为 /* 默认对齐方式左侧对齐 */ justify-content: flex-start; /* 右侧对齐 */ justify-
复制链接

扫一扫