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

Flex 布局

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

文章标签：
容器
关键词：
flex布局
不苒
目录
相关文章
明月何时照我还呀
|
2月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些？
flex 布局属性在实际项目中的应用场景有哪些？
明月何时照我还呀
69 1
那年春天
|
1月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
那年春天
130 57
我是快乐的嘟嘟
|
25天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
102 34
游客g5tp3lgf24cqc
|
12天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中，还可以用table元素来实现双行夹批效果，但比flex布局代码更复杂，效果也不见得更理想。
游客g5tp3lgf24cqc
36 10
lqj_本人
|
14天前
|
开发者 UED 容器
鸿蒙next版开发：ArkTS组件通用属性（Flex布局）
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，支持水平或垂直方向排列元素，并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap，适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
lqj_本人
48 10
dufadayang
|
25天前
|
容器
在 Flex 布局中，如何设置元素在侧轴上的初始对齐方式？
【10月更文挑战第22天】同时，还可以进一步探索其他 Flex 布局相关的属性和技巧，以更好地掌握 Flex 布局的强大功能，创造出更具创意和适应性的页面布局。
dufadayang
27 2
那年春天
|
1月前
|
前端开发 容器
flex布局
【10月更文挑战第7天】
那年春天
29 1
我是快乐的嘟嘟
|
3月前
flex布局属性简介
flex布局属性简介
我是快乐的嘟嘟
151 57
明月何时照我还呀
|
2月前
flex布局属性
flex布局属性
明月何时照我还呀
30 1
小徐在进步
|
2月前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式，通过给父元素设置`display: flex`，其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子，主轴默认为水平方向，侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制，侧轴对齐方式包括`align-items`（针对所有子元素）和`align-self`（针对单个子元素）。修改主轴方向使用`flex-direction`属性，`flex`属性用于控制子元素在主轴上的伸缩比例。此外，`flex-wrap`属性允许子元素换行，而`align-content`属性则定义多行对齐方式。
小徐在进步
69 9