CSS之flex布局详解

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弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
  • 记忆:
  1. 两侧没缝隙是 between
  2. 缝隙一样大是 evenly
  3. 2倍缝隙是 around
  4. 水平居中是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

背景图二倍/三倍做法

核心做法:

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

具体缩放大小可以写为:

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>

小结

  1. 在flex眼中,标签不再分类。

    • 简单说就是没有块级元素,行内元素和行内块元素
    • 任何一个元素都可以直接给宽度和高度一行显示
  2. Flex不存在脱标的情况:也就是基本淘汰了浮动,更不用清除浮动

  3. 当然存在兼容性问题,如果不考虑兼容性可以大量使用,如果是移动端则不用考虑直接flex

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


标题:CSS之flex布局详解
作者:mcwu
地址:http://mcongblog.com/articles/2023/03/30/1680505384737.html

    评论
    0 评论
avatar

取消