flex 布局介绍和常用的属性

shijialeya.

已于 2022-12-05 10:42:19 修改

阅读量3.8k

点赞数 5

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

于 2021-12-17 00:18:37 首次发布

shijialeya

本文链接：https://blog.csdn.net/weixin_44496396/article/details/121986687

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

flex 布局介绍

flex 是 Flexble Box 的简写，翻译为：弹性布局。这种方式给盒子布局带来了很大的灵活性。

使用这种布局需要先给父标签属性添加 display: flex; 。此时父标签就称为容器，而子标签就称为项目。

父标签指定 flex 布局之后，子标签的 float、clear、vertical-align 属性都会失效，并且子标签的行内元素可以直接设置宽高。

学习 flex 布局之前必须要理清主轴和测轴，主轴默认方向是水平向右，侧轴方向是垂直向下，如下图：
在这里插入图片描述

因为主轴和侧轴方向总是保持在直角，所以当修改主轴的方向侧轴也会跟着改变。

创建一个 html 文件 body 内部代码如下：

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</div>

下面页面案例代码使用的都是这个，只是修改 style 样式。

使用在父盒子的属性

父盒子的常用属性有 6 个，当理解完这 6 个属性的之后也就学会 flex 布局了。

注意：使用 flex 布局的时候，第一件事就是给父盒子添加 display: flex; 。

flex-direction 属性

在上文 flex 布局介绍中讲到了主轴，flex-direction 属性就是修改主轴方向。在页面中默认是以从左到右、从上到下编排页面元素，我们可以通过该属性修改页面编排方式。

属性的值有以下四个：

属性值：row

将主轴方向设置为从左往右（默认值）。

案例关键代码：

div {
  display: flex;
  /* 主轴默认方向：从左往右 */
  flex-direction: row;
}
div span {
  /* 子元素添加边框、边距、背景颜色 */
  border: 1px solid #000000;
  margin: 1px;
  background-color: skyblue;
  /* 父元素指定 flex 布局之后，子元素的行级标签可以直接设置宽高 */
  width: 50px;
  height: 50px;
}

效果如下：
在这里插入图片描述

属性值：row-reverse

将主轴方向设置为从右往左。

将上面的案例样式代码 flex-direction 属性值修改成 row-reverse，效果如下：
在这里插入图片描述

属性值：column

将主轴方向设置为从上往下。

将上面的案例样式代码 flex-direction 属性值修改成 column，效果如下：
在这里插入图片描述

属性值：column-reverse

将主轴方向设置为从下往上。

将上面的案例样式代码 flex-direction 属性值修改成 column-reverse，效果如下：
在这里插入图片描述

justify-content 属性

使用该属性前一定要理清主轴方向，也就是 flex-direction 属性指定的方向，主轴方向默认是水平向右。justify-content 属性就是设置主轴方向上子元素的排列方式。当主轴为水平向右时，默认是以从左往右并排排列；当主轴为垂直向下时，默认是从上往下排列的。可以通过该属性去指定子元素的排列方式，属性的值有以下五个（以下演示主轴都设置成水平向右，主轴的其它方向的效果自行演示和理解）：

属性值：flex-start

子元素从主轴头部依次紧密排列。

如果主轴方向为水平向右，则子元素从左到右紧密排列；
如果主轴方向为水平向左，则子元素从右到左紧密排列；
如果主轴方向为垂直向下，则子元素从右往左紧密排列；
如果主轴方向为垂直向上，则子元素从上往下紧密排列；

关键案例代码如下：

div {
  display: flex;
  /* 主轴方向 */
  flex-direction: row;
  /* 主轴方向子元素的排列方式 */
  justify-content: flex-start;
}

div span {
  /* 子元素添加边框、边距、背景颜色 */
  border: 1px solid #000000;
  margin: 1px;
  background-color: skyblue;
  /* 父元素指定 flex 布局之后，子元素的行级标签可以直接设置宽高 */
  width: 50px;
  height: 50px;
}

效果如下：
在这里插入图片描述

属性值：flex-end

子元素从主轴尾部依次紧密排列。

将上面的案例样式代码 justify-content 属性值修改成 flex-end，效果如下：
在这里插入图片描述

属性值：center

子元素在主轴中居中对齐并紧密排列。

将上面的案例样式代码 justify-content 属性值修改成 center，效果如下：
在这里插入图片描述

属性值：space-around

主轴方向上，父盒子的宽度减去直接子盒子的宽度之和，然后将剩余的宽度平均分给直接子盒子，效果像是给直接子盒子添加了外边距（但并不是外边距）。

将上面的案例样式代码 justify-content 属性值修改成 space-around，效果如下：
在这里插入图片描述

属性值：space-between

第一个直接子元素放在主轴头部，最后一个直接子元素放在主轴的尾部，其余直接子元素平分剩余空间。

将上面的案例样式代码 justify-content 属性值修改成 space-between，效果如下：
在这里插入图片描述

flex-wrap 属性

设置子元素是否换行显示。

flex 布局中，子盒子中默认是不会换行的，如果子盒子的宽度之和大于父盒子的宽度，那么会缩小子盒子的宽度（这时子盒子设置的 width 失效），保证所有直接子盒子在主轴的方向一行排列。

flex-wrap 属性值有以下两个：

属性值：nowrap

直接子盒子在一行显示，不换行。

div {
    display: flex;
    /* 主轴方向 */
    flex-direction: row;
    /* 子元素是否换行 */
    flex-wrap: nowrap;
}

div span {
    /* 子元素添加边框、边距、背景颜色 */
    border: 1px solid #000000;
    margin: 1px;
    background-color: skyblue;
    /* 父元素指定 flex 布局之后，子元素的行级标签可以直接设置宽高 */
    width: 100px;
    height: 100px;
}

效果如下：
在这里插入图片描述

属性值：wrap

当父盒子不能装下直接子盒子时，将换行显示。

将上面的案例样式代码 flex-wrap 属性值修改成 wrap，效果如下：
在这里插入图片描述

align-items 属性

直接子盒子在单行显示的时候，设置侧轴上直接子元素的排列方式。（注意是单行）

需要配合 flex-wrap: nowrap; 使用，因为 flex-wrap 的默认值就是 nowrap，所以这里可以不添加 flex-wrap 属性。

这里也需要理清主轴和侧轴的关系，通过 flex-direction 属性设置主轴的方向，侧轴也会跟着变化。

当主轴方向为水平方向，侧轴方向是垂直向下。
当主轴方向为垂直方向，侧轴方向是水平向左。

属性值：flex-start

直接子盒子在侧轴上从头到尾方向排列。

案例代码如下：

div {
  /* 给父盒子添加宽高 */
  width: 600px;
  height: 200px;
  background-color: pink;
  display: flex;
  /* 主轴方向 */
  flex-direction: row;
  /* 子元素是否换行 */
  flex-wrap: nowrap;
  /* 设置侧轴的排列方式（单行） */
  align-items: flex-start;
}

div span {
  /* 子元素添加边框、边距、背景颜色 */
  border: 1px solid #000000;
  margin: 1px;
  background-color: skyblue;
  /* 父元素指定 flex 布局之后，子元素的行级标签可以直接设置宽高 */
  width: 50px;
  height: 50px;
}

效果如下：
在这里插入图片描述

属性值：flex-end

直接子盒子在侧轴上从尾到头方向排列。

将上面的案例样式代码 align-items 属性值修改成 flex-end，效果如下：
在这里插入图片描述

属性值：center

直接子盒子在侧轴上居中显示。

将上面的案例样式代码 align-items 属性值修改成 center，效果如下：
在这里插入图片描述

在单行显示时，通过 align-items: center; 实现侧轴居中，通过 justify-content: center; 实现主轴居中，通过两个属性叠加的效果就能实现盒子水平垂直居中了。

属性值：stretch

将直接子盒子的高度与父盒子一样高。需要注意的是，如果子盒子添加了 height 那么这个子盒子就不会被拉伸。

将上面的案例样式代码 align-items 属性值修改成 stretch，再将 span 样式中 height: 50px; 注释掉，效果如下：
在这里插入图片描述

align-content 属性

直接子盒子在多行显示的时候，设置侧轴上直接子元素的排列方式。（注意是多行）

这个属性需要配合 flex-wrap: wrap; 一起使用，声明子元素可以换行显示，否则 align-content 属性不生效。

这里也需要理清主轴和侧轴的关系，通过 flex-direction 属性设置主轴的方向，侧轴也会跟着变化。

当主轴方向为水平方向，侧轴方向是垂直向下。
当主轴方向为垂直方向，侧轴方向是水平向左。

属性值：flex-start

直接子盒子在侧轴上从头到尾方向排列（默认）。

案例代码如下：

div {
  /* 给父盒子添加宽高 */
  width: 600px;
  height: 200px;
  background-color: pink;
  display: flex;
  /* 主轴方向 */
  flex-direction: row;
  /* 子元素是否换行 */
  flex-wrap: wrap;
  /* 设置侧轴的排列方式（多行） */
  align-content: flex-start;
}

div span {
  /* 子元素添加边框、边距、背景颜色 */
  border: 1px solid #000000;
  margin: 1px;
  background-color: skyblue;
  /* 父元素指定 flex 布局之后，子元素的行级标签可以直接设置宽高 */
  width: 100px;
  height: 50px;
}

在这里插入图片描述

属性值：flex-end

直接子盒子在侧轴上从尾到头方向排列。

将上面的案例样式代码 align-content 属性值修改成 flex-end，效果如下：
在这里插入图片描述

属性值：center

直接子盒子在侧轴上居中显示。

将上面的案例样式代码 align-content 属性值修改成 center，效果如下：
在这里插入图片描述

属性值：space-around

侧轴方向上，子盒子平分剩余空间。

将上面的案例样式代码 align-content 属性值修改成 space-around，效果如下：
在这里插入图片描述

属性值：space-between

侧轴方向上，头尾贴边排列，其余子盒子平分剩余空间。

将上面的案例样式代码 align-content 属性值修改成 space-between，效果如下：
在这里插入图片描述

属性值：stretch

子盒子元素高度平分父元素的高度。

将上面的案例样式代码 align-content 属性值修改成 stretch，效果如下：
在这里插入图片描述

flex-flow 属性

这是一个复合属性，是 flex-direction 和 flex-wrap 的组合。

如，设置子元素主轴垂直向下，且子元素换行显示，只需要以下配置：

flex-flow: column wrap;

使用在子盒子的属性

使用在子盒子的属性有三个，一定要注意，使用下面三个属性之前，父盒子需要添加 display: flex;，指定这是一个 flex 布局。

flex 属性

主轴上平分剩余空间，主轴方向上优先级会大于 width 或 height。

案例代码如下：

<head>
  <style>
    div {
      /* 给父盒子添加宽高 */
      width: 600px;
      height: 200px;
      background-color: pink;
      display: flex;
    }

    div span {
      /* 子元素添加边框、边距、背景颜色 */
      border: 1px solid #000000;
      margin: 1px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div>
    <!-- 没有添加 flex，主轴方向长度可以设置  -->
    <span style="width: 50px;">0</span>
    <!-- 没有添加 flex，主轴方向长度不能设置  -->
    <span style="flex: 1; width: 1000px;">1</span>
    <span style="flex: 2;">2</span>
    <span style="flex: 3;">3</span>
  </div>
</body>

效果如下：
在这里插入图片描述

align-self 属性

控制子盒子在侧轴的排列方式，这个属性优先级比 align-items 要高。

属性值和作用与align-items 一致。

order 属性

定义子盒子的前后顺序，不设置该属性默认值为 0，值可以是负数，值小的排在前面。

案例代码如下：

<head>
  <style>
    div {
      /* 给父盒子添加宽高 */
      width: 600px;
      height: 200px;
      background-color: pink;
      display: flex;
    }

    div span {
      /* 子元素添加边框、边距、背景颜色 */
      border: 1px solid #000000;
      margin: 1px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div>
    <span style="order: 2;">1：order = 1</span>
    <span style="order: -2;">2：order = -2</span>
    <span style="order: -1;">3：order = -1</span>
    <span style="order: 5;">4：order = 5</span>
  </div>
</body>

效果如下：
在这里插入图片描述

常见的布局方式

移动端搜索栏

如京东的搜索栏，如下：
在这里插入图片描述

搜索栏左边是一个菜单栏，大小固定。右边是一个登录按钮，大小固定。而中间是一个搜索框，大小是根据屏幕总宽度减去菜单栏和登录按钮的宽度。

实现方法就可以通过弹性布局来实现，左边和右边设置一个固定的宽度属性，中间盒子通过 flex: 1; 来实现。

代码如下：

<div style="display: flex; height: 120px;">
  <span style="width: 120px; background-color: skyblue;"></span>
  <span style="flex: 1; background-color: chocolate;"></span>
  <span style="width: 120px; background-color: pink;"></span>
</div>

效果如下：
在这里插入图片描述
左边和右边盒子宽度固定大小，而中间盒子会随着总宽度同时增大或减小。

shijialeya.

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
4
评论
flex 布局介绍和常用的属性

flex 布局介绍flex 是 Flexble Box 的简写，翻译为：弹性布局。这种方式给盒子布局带来了很大的灵活性。使用这种布局需要先给父标签属性添加 display: flex; 。此时父标签就称为容器，而子标签就称为项目。父标签指定 flex 布局之后，子标签的 float、clear、vertical-align 属性都会失效，并且子标签的行内元素可以直接设置宽高。学习 flex 布局之前必须要理清主轴和测轴，主轴默认方向是水平向右，侧轴方向是垂直向下，如下图：因为主轴和侧轴方向总是保
复制链接

扫一扫

专栏目录