备案控制台
开发者社区 云原生 文章 正文

Flex 布局

2023-01-09 141
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flex 布局

flex布局

1.flex布局原理

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


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

伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。

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


总结：

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


2.常见父项属性

image.png

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

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

属性值：

image.png

<!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属性 —— 设置主轴上子元素的排列方式

属性值：

image.png

<!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属性值的效果，如下图所示：

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

属性值：

image.png

如下示例代码所示：

<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>

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

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

属性值：

image.png

<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时的效果。

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

属性值：

image.png

注意：此属性只在多行情况下生效，或者就是添加了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 时的效果：

（6）flex-flow 属性

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

示例代码如下：


image.pngimage.pngimage.png

<!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>

效果图如下所示：

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>

效果图如下所示：

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

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

image.png

<!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>

（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>

文章标签：
容器
不苒
目录
相关文章
爱你三千遍斯塔克
|
3天前
|
容器
flex布局
flex布局
爱你三千遍斯塔克
6 0
叫我兔兔酱
|
2月前
|
开发者
【干货分享】Grid 布局和 Flex 布局
【干货分享】Grid 布局和 Flex 布局
叫我兔兔酱
20 0
東方幻想鄉
|
2月前
解决flex布局最后一行(左靠齐)
解决flex布局最后一行(左靠齐)
東方幻想鄉
35 0
__爱吃香菜
|
11月前
|
容器
Flex布局是什么？
Flex布局是什么？
__爱吃香菜
45 0
困困的小熊猫
|
11月前
|
开发者 容器
Flex基础布局
Flex基础布局
困困的小熊猫
58 0
RedEric
Flex布局实战详解（上）
Flex布局实战详解（上）
RedEric
111 0
RedEric
Flex布局实战详解（下）
Flex布局实战详解（下）
RedEric
71 0
前端杂货铺
|
容器
Flex 布局
Flex 布局
前端杂货铺
43 0
游客enonjzg2ndlti
|
容器
Flex布局学习
Flex布局学习
游客enonjzg2ndlti
64 0
游客wazjug5ieii4a
|
前端开发 容器
Flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
游客wazjug5ieii4a
103 0
Flex布局