Flex布局干货（重点）

最新推荐文章于 2022-09-02 16:04:51 发布

Brryant_24

最新推荐文章于 2022-09-02 16:04:51 发布

阅读量474

点赞数 1

分类专栏： Flex

本文链接：https://blog.csdn.net/weixin_45872868/article/details/110518709

版权

Flex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Flex布局（重点）

1. Flex布局的好处：操作简单，布局极为简单，移动端应用方便。但是兼容性比较大，ie11以下基本用不了。

2. 布局原理：弹性布局任何一个元素都可以设置flex布局设置了flex，那么浮动 clear vertical-align 也会失效

 <div>
    <span>1</span>
    <span>2</span>flex-direction:设置主轴的方向
    <span>3</span>
  </div>

在上面的体验中div就是flex容器，span就是子容器，子容器可以横向排列也可以纵向排列大的叫容器，小的叫项目。
总结：通过给父盒子添加flex，来控制子盒子的排列方式

3. 给父亲添加的属性有6个

flex-direction:设置主轴的方向
属性说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

<!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>
    div {
      /* 给父亲添加flex属性 */
      display: flex;
      width: 80%;
      height: 300px;
      background-color: pink;
      /* 设置主轴排列方向  横向排列 */
      /* 默认的主轴是x轴，那么其他的就是y轴   我们的元素是跟着主轴来排列的*/
      /* 设置主轴子元素排列模式   横向 */
      flex-direction: row;
      /* 主轴元素平分剩余空间 */
      justify-content: space-around;
    }

    div span {
      /* flex: 1; */
      width: 150px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- 好处 -->
  <!-- 操作简单，布局极为简单，移动端应用方便。但是兼容性比较大，ie11以下基本用不了 -->
  <!--小demo -->
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

在这里插入图片描述

justify-content:设置主轴上的子元素排列方式

flex-start 默认值，从头部开始如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间（重要）

<style>
    div {
      display: flex;
      width: 80%;
      height: 300px;
      background-color: pink;
      flex-direction: row;
      /* justify-content:设置主轴上的子元素排列方式  这里相当于隐藏了一句话在下面*/
      /* justify-content: flex-start; */
      /* 从尾部开始排列    层叠掉上面的*/
      /* justify-content: flex-end; */
      /* 盒子居中对齐    要是把主轴设置为y轴，利用这个属性可以设置元素垂直居中 */
      /* justify-content: center; */
      /* 平分父盒子空间  也就是平分减去三个盒子大小的其他空间 */
      /* justify-content: space-around; */
      /* 让左右盒子贴在两侧，其他盒子平分剩余空间 */
      justify-content: space-between;

    }
    div span {
      width: 100px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</body>

在这里插入图片描述

flex-wrap 设置子元素是否换行
属性说明
nowrap 默认值不换行
wrap 换行

  <style>
    div {
      /* 第一步：先给设置弹性盒子 */
      display: flex;
      /* 让子盒子水平排列 */
      flex-direction: row;
      /* 大盒子放不下小盒子，flex会强制让他们放在一起，那么就会改变小盒子的宽度  */
      /* 这里隐藏了这样一句话 */
      /* flex-wrap: nowrap; */
      /* 如果设置换行，看一下代码 */
      flex-wrap: wrap;
      width: 600px;
      height: 400px;
      background-color: pink;
    }

    span {
      width: 150px;
      height: 100px;
      background-color: red;
      margin: 10px;
    }
  </style>

在这里插入图片描述

align-items 设置侧轴子元素排列只适合于单行来使用
属性说明
flex-start 从上而下
flex-end 从下到上
center 挤在一起居中显示
stretch 拉伸（设置拉伸这个属性的时候，不能给子元素设置高度）

  <style>
    div {
      display: flex;
      width: 600px;
      height: 800px;
      flex-direction: row;
      background-color: pink;
      /* 设置子元素在侧轴水平局中*/
      align-items: center;
      /* 设置盒子在主轴居中 */
      /* justify-content: center; */
      /* align-stretch   拉伸   不能给高度，他就会直接拉伸到大盒子底部*/
      align-items: center;
    }

    span {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-left: 10px;
    }
  </style>
</head>

<body>

  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>

在这里插入图片描述

algin-content 设置侧轴上的子元素的排列方式（多行）并且适用于子元素换行的情况，在单行中没有效果

属性值说明
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-between 子项在侧轴先分布在两头，在平分剩余空间
space-around 子项在侧轴平分剩余空间
stretch 设置子项元素高度平分父元素高度

  <style>
    div {
      display: flex;
      /* 先换行 */
      flex-wrap: wrap;
      /* 因为有了换行，此时我们在侧轴上控制子元素的对齐方式我们用 align-content */
      /* 默认值在侧轴头部开始排列 */
      /* align-content: flex-start; */
      /* 在侧轴中间显示 */
      /* align-content: center; */
      /* align-end  默认值在尾部开始排列*/
      /* align-content: flex-end; */
      /* 上面一排盒子顶住上面，下面一排盒子顶住下面 */
      /* align-content: space-between; */
      /* 平分高度空间 */
      align-content: space-around;

      width: 800px;
      height: 400px;
      background-color: pink;
    }

    span {
      width: 150px;
      height: 100px;
      background-color: purple;
      color: #ffffff;
      margin: 10px;
    }
  </style>

在这里插入图片描述

flex-flow 是flex-direction和flex-wrap的复合型写法设置主轴方向和换行

  <style>
    div {
      display: flex;
      width: 600px;
      height: 300px;
      background-color: pink;
      /* 先设置y轴 */
      /* flex-direction: column; */
      /* 在设置换行 */
      /* flex-wrap: wrap; */
      /* 复合型写法 */
      flex-flow: column wrap;
    }

    span {
      width: 150px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>

  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>

在这里插入图片描述
3.给儿子添加的属性有3个

flex属性：定义子项目分配剩余空间，用flex来表示占多少份数。

  section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
  }

  section div:nth-child(1) {
    width: 100px;
    height: 150px;
    background-color: red;
  }

  section div:nth-child(2) {
    flex: 1;
    background-color: green;
  }

  section :nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: blue;
  }
 <section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </section>

在这里插入图片描述

  p {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 100px auto;
    /* 让3个孩子各占一份 */
  }

  p span {
    /*给span先不能给宽度，所以剩余空间就是整个大盒子的宽度，分为3份各占一份 */
    flex: 1;
    margin-left: 2px;
  }

  p span:nth-child(2) {
    flex: 2;
    background-color: skyblue;
  }
  <p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </p>

在这里插入图片描述

align-self属性允许单个项目有与其他有不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch
order属性：定义项目的排列顺
数值越小，排列越靠前，默认为0
注意：和z-index不一样

（两个属性放一起来演示）

  <style>
    div {
      display: flex;
      width: 60%;
      background-color: skyblue;
      height: 300px;
      /* align-items: flex-end; */
    }

    div span {
      width: 150px;
      height: 100px;
      background-color: red;
      /* 让三个子盒子沿着侧轴底侧对齐 */
      margin-right: 5px;

    }

    /* 我们想只让3号盒子下来底侧 */
    div span:nth-child(3) {
      align-self: flex-end;
    }

    /* 我们把2号盒子放到最前面 */
    div span:nth-child(2) {
      /* 数值越小越靠前   默认是0，-1比0小，所以排列在前面 */
      order: -1;
    }
  </style>
</head>

<body>

  <div class="div">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

在这里插入图片描述

恭喜你，你学会了Flex布局，一定多练，眼看三遍，不如手敲一遍，键盘敲烂，月薪过万，加油，肝就完了。。。

Brryant_24

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Flex布局干货（重点）

Flex布局（重点）1. Flex布局的好处：操作简单，布局极为简单，移动端应用方便。但是兼容性比较大，ie11以下基本用不了。2. 布局原理：弹性布局任何一个元素都可以设置flex布局设置了flex，那么浮动 clear vertical-align 也会失效 <div> <span>1</span> <span>2</span>flex-direction:设置主轴的方向 <span&g
复制链接

扫一扫