1. IT分享知识网首页
  2. 未分类

Flex布局常见属性图解

老牧童 • • 未分类

Flex布局常见属性图解Flex 属性详解 flex 属性

大家好，欢迎来到IT知识分享网。

目录

一、简介

二、父元素属性

2.1、flex-direction

  flex-direction 顺序指定了弹性子元素在父容器中的位置，flex-direction的值有:

flex-direction: row | row-reverse | column | column-reverse
  • row：横向从左到右排列（左对齐），默认的排列方式。
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  • column：纵向排列。
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      width: 400px; height: 300px; background-color: lightblue; margin: 0 auto; /* 水平居中 */ padding: 10px; /* 内边距容易观察 */ display: flex; /* 启用 Flex 布局 */ /* flex-direction的取值可以为: row | row-reverse | column | column-reverse */ flex-direction: row; /* flex-direction: row-reverse; */ /* flex-direction: column; */ /* flex-direction: column-reverse; */ } .flex-item { 
      width: 60px; height: 60px; border: 1px solid black; /* 加个边框 */ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item">item 4</div> </div> </body> </html>

结果图如下：

在这里插入图片描述

2.2、justify-content

  属性用于控制 Flex 容器内部 Flex 子项沿着主轴的对齐方式。这个属性适用于控制 Flex 容器中的内容在主轴上的排列位置。justify-content的值有:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  • flex-start：默认值。Flex 子项在主轴上与 Flex 容器的起始位置对齐
  • flex-end：Flex 子项在主轴上与 Flex 容器的末尾位置对齐
  • center：Flex 子项在主轴上居中对齐
  • space-between：Flex 子项沿主轴均匀分布，首尾两端不留间隙
  • space-around：Flex 子项沿主轴均匀分布，两侧留有相等的间隙
  • space-evenly: Flex 子项沿主轴均匀分布，包括首尾两端和子项之间都留有相等的间隙

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      margin: 0 auto; /* 水平居中 */ width: 400px; height: 300px; background-color: lightblue; display: flex; flex-direction: row; /* justify-content的取值可以为：flex-start | flex-end | center | space-between | space-around |space-evenly */ /* 默认值 flex-start*/ justify-content: flex-start; /* justify-content: flex-end; */ /* justify-content: center; */ /* justify-content: space-between; */ /* justify-content: space-around; */ /* justify-content: space-evenly; */ } .flex-item { 
      width: 60px; height: 60px; border: 1px solid black; /* 加个边框 */ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item">item 4</div> </div> </body> </html>

  当 flex-direction: row 结果图如下：

在这里插入图片描述
  在上面的源码基础上，设置 flex-direction: column 结果图如下：

在这里插入图片描述

2.3、align-items

  属性用于控制 Flex 容器内部 Flex 子项在交叉轴上的对齐方式。align-items 可以设置的属性值：

align-items: stretch | flex-start | flex-end | center | baseline
  • stretch（默认值）：拉伸子项以填满整个交叉轴的空间
  • flex-start：子项在交叉轴的起点对齐
  • flex-end：子项在交叉轴的末端对齐
  • center：子项在交叉轴上居中对齐
  • baseline：子项根据它们的基线（如果有）对齐

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      margin: 0 auto; /* 水平居中 */ width: 400px; height: 300px; background-color: lightblue; display: flex; flex-direction: row; /* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline */ align-items: flex-start; /* align-items: flex-end; */ /* align-items: center; */ /* align-items: baseline; */ /* 默认值 stretch */ /* align-items: stretch; */ /* 子元素不能有高度 */ } .flex-item { 
      width: 60px; height: 60px; border: 1px solid black; /* 加个边框 */ background-color: orange; } .special-item{ 
      height: 120px; /* 会覆盖上面的高度 */ } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item special-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item special-item">item 4</div> </div> </body> </html> 
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      width: 400px; height: 300px; background-color: lightblue; margin: 0 auto; /* 水平居中 */ display: flex; flex-direction: row; /* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline */ /* 默认值 stretch */ align-items: stretch; /* 子元素不能有高度 */ /* align-items: flex-start; */ /* align-items: flex-end; */ /* align-items: center; */ /* align-items: baseline; */ } .flex-item { 
      width: 60px; /* height: 60px; */ /* 当为stretch时去除掉高度 */ border: 1px solid black; /* 加个边框 */ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item">item 4</div> </div> </body> </html> 
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      width: 400px; height: 300px; background-color: lightblue; margin: 0 auto; /* 水平居中 */ display: flex; flex-direction: row; /* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline */ /* 默认值 stretch */ /* align-items: stretch; */ /* 子元素不能有高度 */ /* align-items: flex-start; */ /* align-items: flex-end; */ /* align-items: center; */ align-items: baseline; /* 按照项目内的文字对齐 */ } .flex-item { 
      width: 60px; height: 60px; border: 1px solid black; /* 加个边框 */ background-color: orange; } .special-item{ 
      height: 120px; /* 会覆盖上面的高度 */ } </style> </head> <body> <div class="flex-container"> <div class="flex-item" style="padding-top: 20px;">item 1</div> <!-- 加了内边距演示 --> <div class="flex-item special-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item special-item">item 4</div> </div> </body> </html>

结果图如下：

在这里插入图片描述

2.4、flex-wrap

  在 Flex 布局中，flex-wrap 属性用于控制 Flex 容器中的 Flex 子项是否换行。flex-wrap的值有:

flex-wrap: nowrap | wrap | wrap-reverse
  • nowrap（默认值）：不换行，所有 Flex 子项会尽量排在一行内
  • wrap：允许 Flex 子项在需要时换行，第一行在上方，紧接着的行在下方
  • wrap-reverse：允许 Flex 子项在需要时换行，第一行在下方，紧接着的行在上方

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      width: 500px; height: 400px; background-color: lightblue; margin: 0 auto; /* 水平居中 */ display: flex; flex-direction: row; /* flex-wrap的取值可以为：nowrap | wrap | wrap-reverse */ /* 默认值 nowrap */ flex-wrap: nowrap; /* flex-wrap: wrap; */ /* flex-wrap: wrap-reverse; */ } .flex-item { 
      width: 100px; height: 60px; border: 1px solid black; /* 加个边框 */ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item">item 4</div> <div class="flex-item">item 5</div> <div class="flex-item">item 6</div> <div class="flex-item">item 7</div> </div> </body> </html>

结果图如下：

在这里插入图片描述

2.5、flex-flow

  flex-flow 是一个缩写属性，结合了 flex-direction 和 flex-wrap 两个属性，用于同时设置 Flex 容器的主轴方向和子项的换行方式，flex-flow 属性的语法格式如下：

flex-flow: <flex-direction> <flex-wrap>;

这里 flex-direction、flex-wrap就是我们上面提到的取值，随意组合。

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      width: 500px; height: 400px; margin: 0 auto; /* 水平居中 */ background-color: lightblue; display: flex; /* flex-flow的取值可以为：flex-direction 和 flex-wrap 的组合属性 */ flex-flow: row wrap; /* flex-flow: column wrap; */ } .flex-item { 
      width: 100px; height: 100px; border: 1px solid black; /*加个边框*/ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item">item 4</div> <div class="flex-item">item 5</div> <div class="flex-item">item 6</div> <div class="flex-item">item 7</div> <div class="flex-item">item 8</div> <div class="flex-item">item 9</div> <div class="flex-item">item 10</div> </div> </body> </html>

结果图如下：

在这里插入图片描述

2.6、align-content

  align-content 属性用于控制多根轴线（Flex 容器内部的行或列）在交叉轴上的对齐方式，当有多根轴线时才会生效。它可以设置的属性值有：

align-content：stretch | flex-start | flex-end | center | space-between | space-around | space-evenly
  • stretch：默认值。轴线占满整个交叉轴，如果子项没有设置高度，将被拉伸至与容器相同的高度
  • flex-start：多根轴线在交叉轴的起始位置对齐
  • flex-end：多根轴线在交叉轴的末端位置对齐
  • center：多根轴线在交叉轴上居中对齐
  • space-between：轴线均匀分布在交叉轴上，首尾两根轴线与容器边框对齐，轴线之间间隔相等
  • space-around：轴线均匀分布在交叉轴上，轴线两侧的间隔是轴线之间间隔的一半
  • space-evenly：轴线均匀分布在交叉轴上，包括轴线两侧和轴线之间的间隔均相等

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      margin: 0 auto; /* 水平居中 */ width: 500px; height: 500px; background-color: lightblue; display: flex; flex-direction: row; flex-wrap: wrap; /* align-content得多行还有效果，所以设置换行 */ /* align-content的取值可以为：stretch | center | flex-start | flex-end | space-between | space-around | space-evenly */ /* 默认值 */ /* align-content: stretch; */ align-content: flex-start; /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-between; */ /* align-content: space-around; */ /* align-content: space-evenly; */ } .flex-item { 
      width: 100px; height: 100px; border: 1px solid black; /* 加个边框 */ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item">item 4</div> <div class="flex-item">item 5</div> <div class="flex-item">item 6</div> <div class="flex-item">item 7</div> <div class="flex-item">item 8</div> <div class="flex-item">item 9</div> <div class="flex-item">item 10</div> </div> </body> </html>

结果图如下：

在这里插入图片描述
  当 align-content: stretch 时示例代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      width: 500px; height: 500px; background-color: lightblue; margin: 0 auto; /* 水平居中 */ display: flex; flex-direction: row; flex-wrap: wrap; /* align-content得多行还有效果，所以设置换行 */ /* align-content的取值可以为：stretch|center|flex-start|flex-end|space-between|space-around|space-evenly */ /* 默认值 stretch*/ align-content: stretch; /* align-content: flex-start; */ /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-between; */ /* align-content: space-around; */ /* align-content: space-evenly; */ } .flex-item { 
      width: 100px; /* height: 100px; */ /* stretch使用时子元素不能有高度 */ border: 1px solid black; /*加个边框*/ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item">item 4</div> <div class="flex-item">item 5</div> <div class="flex-item">item 6</div> <div class="flex-item">item 7</div> <div class="flex-item">item 8</div> <div class="flex-item">item 9</div> <div class="flex-item">item 10</div> </div> </body> </html>

结果图如下：

在这里插入图片描述

三、子元素属性

3.1、flex

  在 CSS 的 Flex 布局中，flex 属性是一个复合属性，用于设置 Flex 容器内 Flex 项目的伸缩能力、伸缩基准以及伸缩项目占据的空间比例。flex 属性可以设置三个值，分别是：

flex：flex-grow | flex-shrink | flex-basis
  • flex-grow：定义 Flex 项目的放大比例，默认值为 0。它决定了 Flex 项目在有剩余空间时的放大比例，如果为 0，则不放大。
  • flex-shrink：定义 Flex 项目的收缩比例，默认值为 1。它决定了 Flex 项目在空间不足时的收缩比例，如果为 0，则不收缩。
  • flex-basis：定义了 Flex 项目在分配多余空间之前，所占据的空间大小，默认值为 auto。可以设置为具体的长度值或百分比，也可以设置为 content、auto 等。

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      width: 500px; height: 500px; background-color: lightblue; margin: 0 auto; /* 水平居中 */ display: flex; flex-direction: row; } .flex-item { 
      width: 80px; height: 80px; border: 1px solid black; /* 加个边框 */ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item">item 4</div> </div> </body> </html>

3.2、align-self

  align-self 属性用于覆盖 Flex 容器的 align-items 属性，单独为 Flex 项目设置在交叉轴上的对齐方式。它可以用于单个 Flex 项目，控制该项目在交叉轴上的对齐方式。

align-self：stretch | center | flex-start | flex-end | baseline | auto
  • auto：使用父元素（即 Flex 容器）的 align-items 值。
  • flex-start：项目向交叉轴起始位置对齐。
  • flex-end：项目向交叉轴末端位置对齐。
  • center：项目在交叉轴上居中对齐。
  • baseline：项目根据它们的基线对齐。
  • stretch：项目被拉伸以适应交叉轴。

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      display: -webkit-flex; /*webkit内核的浏览器*/ margin: 0 auto; /* 水平居中 */ width: 500px; height: 500px; background-color: lightblue; display: flex; flex-direction: row; align-items: flex-start; /* align-self的取值可以为：stretch | center | flex-start | flex-end | baseline | auto */ /* 默认值 */ /* align-self: stretch; */ align-self: flex-start; /* align-self: flex-end; */ /* align-self: center; */ /* align-self: stretch; */ /* align-self: baseline; */ } .flex-item { 
      width: 80px; height: 80px; border: 1px solid black; /*加个边框*/ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item" style="align-self: center;">item 2</div> <div class="flex-item" style="align-self: flex-end;">item 3</div> <div class="flex-item">item 4</div> </div> </body> </html>

3.3、order

  在 Flex 布局中，order 属性用于控制 Flex 项目的排列顺序。它指定了 Flex 容器内各个项目的排列顺序，值为整数，可以是正数、负数或零。

  默认情况下，Flex 项目的 order 属性值为 0，表示它们按照其在源代码中的顺序依次排列。当给定了不同的 order 值时，数值小的项目将优先排在前面，数值大的项目排在后面。

示例代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .flex-container { 
      width: 500px; height: 500px; background-color: lightblue; margin: 0 auto; /* 水平居中 */ display: flex; flex-direction: row; } .flex-item { 
      width: 80px; height: 80px; border: 1px solid black; /* 加个边框 */ background-color: orange; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">item 1</div> <div class="flex-item" style="order: 3;">item 2</div> <div class="flex-item">item 3</div> <div class="flex-item" style="order: -1;">item 4</div> </div> </body> </html>

事例图：

在这里插入图片描述

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/114211.html

赞 (0)
老牧童老牧童
0
上一篇 2025-12-10 09:10
下一篇 2025-12-10 09:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信