flex布局随笔

不苒
150 阅读4分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

flex布局

1.flex布局原理

flex布局是 flexible Box 的缩写，意为：”弹性布局“，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex 布局。

  • 当我们为盒子设为flex 布局以后，子元素的 float、 clear 和 vertical-align 属性将失效。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。

采用 flex 布局的元素，称为 flex 容器（flex container），简称 “容器” 。它的所有子元素自动成容器成员，称为 flex 项目（flex item），简称 “项目”。

总结：

就是通过给父级盒子添加 flex属性，来控制盒子的位置和排列方式。

2.常见父项属性

flex-direction设置主轴的方向（默认为x轴）
justify-content设置主轴上的子元素排列方式
flex-warp设置子元素是否换行
align-content设置侧轴上的子元素排列方式（多行）
align-items设置侧轴上的子元素排列方式（单行）
flex-flow复合属性，相当于同时设置了flex-direction和flex-warp

（1）flex-direction 设置主轴的方向

注意：将X轴或Y轴设置为主轴后，另一个轴将默认为侧轴。

属性值：

row默认值 从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上
<!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>flex_direction</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      justify-content: center;
      /* flex-direction设置主轴的方向 默认为x轴 
        * row ：默认值 X轴
        * row-reverse: 从右到左
        * column：从上到下 （Y轴）
        * column-reverse：从下到上
      */
      flex-direction: column;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 10px;
    }
  </style>
</head>

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

</html>

本例展示了将容器的主轴设置为 Y轴。效果图如下所示：

image-20210426160310670

（2）justify-content属性 —— 设置主轴上子元素的排列方式

属性值：

flex-start默认值 从头部开始 如果主轴是X轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐（如果主轴是X轴则水平居中）
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间（重点）
<!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>justify-content属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
        justify-content 设置主轴上子元素的排列方式
          * flex-start：默认值 从头部开始
          * flex-end：从尾部开始
          * center：在主轴居中对齐（如果主轴是X轴则水平居中）
          * space-around：平分剩余空间
          * space-between：先两边贴边，再平分剩余空间
       */
      justify-content: space-between;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>

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

</html>

上述代码示例展示的是：space-between属性值的效果，如下图所示：

image-20210426162125600

（3）flex-wrap —— 设置子元素是否换行

属性值：

nowrap默认值 不换行
wrap换行

如下示例代码所示：

<title>flex-warp属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
        flex-wrap 设置子元素是否换行
          * nowrap：默认值 不换行
          * wrap：换行
       */
      flex-wrap: wrap;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 5px;
    }
  </style>
</head>

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

如下图所示：第一张为换行效果，第二张为不换行效果。

image-20210426172956410 image-20210426173107343

（4）align-items 设置侧轴上的子元素排列方式（单行）

属性值：

flex-start默认值 从上到下
flex-end从下到上
center挤在一起居中（垂直居中）
stretch拉伸
<title>align-items属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
        align-items 设置侧轴上子元素排列方式（单行内容时）
          * flex-start：默认值 从上到下
          * flex-end：从下到上
          * center：挤在一起居中（垂直居中）
          * stretch：拉伸
       */
      align-items: center;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 5px;
    }
  </style>
</head>

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

如下图展示了align-items 为center时的效果。

image-20210426174901229

（5）align-content —— 设置侧轴上的子元素排列方式（多行）

属性值：

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

注意：此属性只在多行情况下生效，或者就是添加了flex-wrap属性为wrap值的情况下生效。

示例代码如下：

<!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>align-content属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
        align-content 设置侧轴上子元素排列方式（多行）
          * flex-start：默认值 在侧轴的头部开始排列 
          * flex-end：在侧轴的尾部开始排列
          * center：在侧轴中间显示
          * space-around：子项在侧轴平分剩余空间
          * space-between：子项在侧轴先分布在两头，再平分剩余空间
          * stretch：设置子项元素高度平分父元素高度
       */
      flex-wrap: wrap;
      align-content: space-around
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>

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

</html>

如下图所示展示了align-content属性值为：space-around 时的效果：

image-20210426193328072

（6）flex-flow 属性

flex-flow 属性是flex-direction 和 flex-wrap 属相的复合属性。

示例代码如下：

<!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>flex-flow属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
          flex-flow属性 等同于 同时使用 flex-direction属性和 flex-wrap属性
       */
      flex-flow: wrap column;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 5px;
    }
  </style>
</head>

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

</html>

效果图如下所示：

image-20210426194035314

3.常见的子项属性

  • flex 子项目占的份数
  • align-self 控制子项自己在侧抽的排列方式
  • order 属性定义子项的排列顺序（前后顺序）

（1）flex 子项目占的份数

flex 属性定义子项目分配剩余空间，用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>lex子项flex份数</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 150px;
      margin: 0 auto;
      background-color: pink;
    }

    /* 
      将父元素的宽度分为6份
      第一个div占3份，第二个占1份，第三个占2份
    */
    .container div:nth-child(1) {
      height: 150px;
      width: 100px;
      background-color: purple;
      flex: 3;
    }

    .container div:nth-child(2) {
      background-color: orange;
      flex: 1;
    }

    .container div:nth-child(3) {
      height: 150px;
      width: 100px;
      background-color: greenyellow;
      flex: 2;
    }
  </style>
</head>

<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

效果图如下所示：

image-20210426201014538

（2）algin-self 属性 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items属性、默认为 auto，表示继承父元素的 align-items属性，如果没有父元素，则等同于 stretch。

auto设置为父元素的 align-items值，如果该元素没有父元素的话，就设置为 stretch
flex-start在自己的侧轴上 头部对齐
flex-end在自己的侧轴上 尾部对齐
centerflex 元素会对齐到 侧轴的中间，如果该元素的宽大于容器将在两个方向均等溢出
baseline所有的 flex 元素会沿着基线对齐
stretchflex 元素将会基于容器的宽和高进行拉伸
<!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>align-self属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      align-items: flex-start;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
    }

    /* 
        align-self 控制子项自己在侧轴上的排列方式
          * auto: 跟随父级的 algin-items属性的样式，如果该元素没有父元素的话，就设置为 stretch
          * flex-start：默认值 从头部开始
          * flex-end：从尾部开始
          * center：在侧轴居中对齐（
          * baseline：基线对齐
          * stretch：拉伸
       */
    .container span:nth-child(3) {
      align-self: flex-end;
    }
  </style>
</head>

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

</html>

image-20210426210053653

（3） order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.

注意：该属性和 z-index不一样

<!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>子项目order属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 10px;
    }

    .container span:nth-child(2) {
      /* order属性：
        默认值为0 ，数值越小，元素余额靠前
      */
      order: -1;
    }
  </style>
</head>

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

</html>

image-20210426205436486

avatar
文章
阅读
粉丝