CSS Flex布局

前言

Flex布局（弹性盒子布局） 是一种用于在容器中进行灵活和自适应布局的CSS布局模型。通过使用Flex布局，可以更方便地实现各种不同尺寸和比例的布局，使元素在容器内自动调整空间分配。

目录

容器属性

🍁display属性

🍁flex-direction属性

🍁flex-wrap属性

🍁flex-flow属性

🍁justify-content属性

🍁align-items属性

🍁align-content属性

项目属性

🍀order属性

🍀flex-basis属性

🍀flex-grow属性

🍀flex-shrink属性

🍀flex属性

🍀align-self属性

Flex-组成

Flex布局由以下几个主要组成部分组成：

  1. 容器（Container）：采用Flex布局的父元素即为容器。
  2. 项目（Item）：容器内的子元素即为Flex项目，也称为Flex项。
  3. 主轴（Main Axis）：Flex容器的主要方向被称为主轴。默认情况下，主轴的方向是从左到右（水平方向）。
  4. 侧轴/交叉轴（Cross Axis）：与主轴垂直的方向被称为侧轴。默认情况下，它是从上到下（垂直方向）。

我对Flexbox布局模式的理解 - 知乎

Flex布局的相关属性：

容器属性
display指定元素作为Flex容器，并定义其内部项目的布局方式。
flex-direction指定Flex容器内项目的排列方向。
flex-wrap定义Flex容器内的项目超出一行时是否换行。
flex-flowflex-direction和flex-wrap的合并简写属性。
justify-content沿主轴方向对齐Flex容器内的项目。
align-items沿侧轴方向对齐Flex容器内的项目。
align-content在存在多行的情况下，沿侧轴方向对齐Flex容器内的行。
项目属性
order定义项目的显示顺序。数值越小，排列越靠前。
flex-basis定义项目在分配多余空间之前的基准值，默认为auto。
flex-grow定义项目在剩余空间中的放大比例。
flex-shrink定义项目在空间不足时的缩小比例。
flexflex-grow、flex-shrink、flex-basis的合并简写属性。
align-self单独设置某个项目在侧轴上的对齐方式，覆盖父容器的align-items属性。

容器属性

🍁display属性

在Flex布局中，display属性用于定义容器元素的布局类型。只有在容器元素上设置display属性并取值为flex或inline-flex才能启用flex布局。

  • display: flex; ：将容器元素设置为块级的Flex容器，使其内部子元素按照Flex布局规则排列。容器元素将占据一行，并根据主轴和侧轴来对齐、伸缩和分配空间
  • display: inline-flex; ：将容器元素设置为行内的Flex容器，使其内部子元素按照Flex布局规则排列。容器元素将与其他行内元素在同一行内，并根据主轴和侧轴来对齐、伸缩和分配空间。

img

示例：

HTML代码：

<div class="box"><div>Item 1</div><div>Item 2</div><div>Item 3</div>
</div>

CSS代码：

/* Flex容器 */
.box {display: flex;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 200px;height: 100px;background-color: orange;margin: 0 15px;
}

上述代码中，创建了一个Flex容器.box，里面包含三个Flex项目，并设置了其他属性方便展示效果。

预览：

🍁flex-direction属性

flex-direction属性用于修改Flex容器的主轴方向，若主轴方向修改了，那么侧轴就会相应旋转90度，Flex项目的排列方向就可能会发生改变，因为Flex项目一般沿主轴方向排列。

flex-direction属性取值：

  • row（默认值）：Flex项目水平排列，从左到右。主轴为水平方向。

img

  • row-reverse：Flex项目水平排列，从右到左。主轴为水平方向，但方向与row相反。

img

  • column：Flex项目垂直排列，从上到下。主轴为垂直方向。

img

  • column-reverse：Flex项目垂直排列，从下到上。主轴为垂直方向，但方向与column相反。

img

示例：

/* Flex容器 */
.box {display: flex;flex-direction: column;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 200px;height: 50px;background-color: orange;margin: 5px 0;
}

上述代码中，将主轴修改为垂直方向。

预览：

🍁flex-wrap属性

Flex项目会自动挤压或拉伸，默认情况下，所有Flex项目会在一行显示。flex-wrap属性用于控制Flex项目在容器内空间不足时是否换行。

img

 flex-wrap属性取值：

  • nowrap（默认值）：Flex项目不换行，会尽量在一行内排列。
  • wrap：Flex项目根据需要进行换行排列，如果项目在一行内无法容纳，就会移到下一行。
  • wrap-reverse：与wrap类似，但是换行方式相反，从下往上排列。

示例：

在默认情况下，设置5个项目，将容器和项目的宽度固定，令项目总宽度超过容器宽度。

HTML代码：

<div class="box"><div>Item 1</div><div>Item 2</div><div>Item 3</div><div>Item 4</div><div>Item 5</div>
</div>

CSS代码：

/* Flex容器 */
.box {display: flex;width: 782px;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 200px;height: 100px;background-color: orange;margin: 0 1px;
}

预览：

查看项目的实际尺寸：

可见项目实际宽度变为了154.4px，项目发生了收缩。

我们设置flex-wrap属性并取值为wrap：

/* Flex容器 */
.box {display: flex;flex-wrap: wrap;width: 782px;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 200px;height: 100px;background-color: orange;margin: 1px 1px;
}

预览：

项目超出容器宽度时发生了换行。

查看项目实际尺寸：

 项目的尺寸并没有发生改变。

🍁flex-flow属性

flex-flow属性时flex-direction和flex-wrap两个属性的缩写，用于同时设置Flex容器的主轴方向和换行方式。

语法：

flex-flow: [flex-direction] [flex-wrap];

🍁justify-content属性

justify-content属性用于设置Flex容器中Flex项目沿主轴方向的对齐方式。它会影响项目在容器内的水平位置分布。

justify-content属性取值：

  • flex-start：默认值，项目靠近容器起始边界对齐。
  • flex-end：项目靠近容器末尾边界对齐。
  • center：项目在容器中居中对齐。
  • space-between：项目均匀分布在容器内，首个项目靠近容器起始边界，最后一个项目靠近容器末尾边界，项目之间的间隔相等。
  • space-around：项目均匀分布在容器内，项目两侧的间隔相等，并且项目与容器边界之间的间隔是项目之间间隔的一半。
  • space-evenly：项目均匀分布在容器内，包括项目与容器边界之间的间隔均等。

img

示例：

/* Flex容器 */
.box {display: flex;justify-content: space-evenly;width: 782px;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 200px;height: 100px;background-color: orange;margin: 1px 1px;
}

我设置了三个项目，并让它们沿主轴均匀排列，项目与容器之间间距相等。

预览：

通过调整justify-content属性的值，可以实现不同的项目对齐效果，使布局更加灵活和多样化。 

🍁align-items属性

align-items属性用于设置Flex容器中Flex项目沿侧轴（交叉轴）方向的对齐方式。它会影响项目在容器内的垂直位置分布。

align-items属性取值：

  • stretch：默认值，项目被拉伸以填满容器的整个交叉轴空间。

img

  • flex-start：项目靠近交叉轴起始边界对齐。

img

  • flex-end：项目靠近交叉轴末尾边界对齐。

img

  •  center：项目在交叉轴中居中对齐。

img

  •  baseline：项目基线与容器的基线对齐。

img

示例：

/* Flex容器 */
.box {display: flex;align-items: center;width: 782px;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 200px;height: 100px;background-color: orange;margin: 1px 1px;
}

 我设置了三个项目，它们将在交叉轴中居中对齐。

预览：

🍁align-content属性

align-content属性用于设置Flex容器中多行项目在交叉轴方向的对齐方式。它适用于具有多行项目的布局情况，并且只在容器存在多行时才会生效。

align-content属性取值：

  • stretch：默认值，项目被拉伸以填满容器的整个交叉轴空间。
  • flex-start：多行项目靠近交叉轴起始边界对齐。
  • flex-end：多行项目靠近交叉轴末尾边界对齐。
  • center：多行项目在交叉轴中居中对齐。
  • space-between：多行项目均匀分布在容器内，首行项目靠近交叉轴起始边界，末行项目靠近交叉轴末尾边界，行之间的间隔相等。
  • space-around：多行项目均匀分布在容器内，行与行之间以及首行和末行与容器边界之间的间隔都相等。
  • space-evenly：多行项目均匀分布在容器内，行之间的间隔和首行与容器起始边界以及末行与容器末尾边界之间的间隔均相等。

与align-items属性不同的是，align-content属性是以行为单位进行对齐。

示例：

/* Flex容器 */
.box {display: flex;flex-wrap: wrap;align-content: space-evenly;width: 782px;height: 400px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 200px;height: 100px;background-color: orange;margin: 1px 1px;
}

为了更好展现效果，我设置了多个盒子，并让它们换行排列，在上述代码中，多行项目将沿交叉轴均匀分布在容器内。

预览：

项目属性

🍀order属性

order属性用于设置Flex容器内项目的排列顺序。它可以改变项目的默认显示顺序，使其按照指定的顺序布局。

默认情况下，Flex容器内的项目会按照它们在源代码中出现的顺序布局，即order的默认值为0。通过设置order属性，可以改变项目的显示顺序。

order属性的说明：

  • order: <integer>：用整数值表示项目的显示顺序，值越小的项目会优先显示。默认值为0。

示例：

HTML代码：

<div class="box"><div>Item 1</div><div>Item 2</div><div>Item 3</div><div>Item 4</div><div>Item 5</div><div>Item 6</div>
</div>

CSS代码：

/* Flex容器 */
.box {display: flex;width: 782px;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 100px;height: 100px;background-color: orange;margin: 1px 1px;
}

预览：

默认情况下，项目按照它们在源代码中出现的顺序进行布局。

将第2个项目的order属性值设为1：

.box div:nth-child(2) {order: 1;
}

预览：

因为项目2比其他项目具有更高的order值，所以它将在其他项目之后显示。

 请注意以下几点：

  • order只影响项目的显示顺序，并不改变布局结构，即实际的占位位置仍然按照源代码中的顺序。
  • order可以接受负值和小数值，但大部分情况下使用整数即可满足需求。
  • 对于具有相同order值的项目，它们将按照源代码中的顺序来确定显示顺序。

🍀flex-basis属性

flex-basis属性用于设置Flex项目的初始主轴尺寸（主轴方向上的宽度或高度）。它确定了在分配多余空间之前，项目占据的空间大小。

flex-basis属性取值：

  • auto：默认值。项目将根据其内容自动决定初始尺寸。
  • <length>：可以使用具体的长度值（如像素、百分比等）来定义项目的初始尺寸。
  • content：项目的初始尺寸将根据内容来决定，适用于项目希望自适应内容而不指定固定尺寸的情况。

示例：

/* Flex容器 */
.box {display: flex;width: 782px;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {flex-basis: 120px;background-color: orange;margin: 1px 1px;
}

上述代码中，将项目的初始主轴尺寸（宽度）设为120px，高度未设置（默认伸展）。

预览：

对于flex-basis属性值与宽度（或高度） ，width属性用于设置元素的具体宽度（直接确定的宽度，不受其他flex属性影响），其区别本文不再深究。

🍀flex-grow属性

flex-grow属性用于控制Flex项目在主轴方向上的伸展能力。它接受一个非负数值作为参数，表示项目在分配多余空间时所占的比例。

flex-grow属性取值：

  • 0（默认值）：项目不进行伸展，即使有可用空间。

img

  •  正数（大于0）：项目将根据其值相对于其他项目进行伸展。

img

元素伸展的计算方法：

上图中，容器宽度为200px，容器剩余宽度为50px，按照flex-grow值的比例分配剩余宽度，元素1分配到的宽度=50*3/(3+2)=30px，所以伸展后宽度为80px。

🍀flex-shrink属性

flex-shrink属性用于设置Flex项目在空间不足时的收缩能力。它接受一个非负数值作为参数，表示项目在可用空间不足时相对于其他项目收缩的比例。

默认情况下，所有项目的flex-shrink值为1，即可以等比例收缩。flex-shrink的值越大，项目收缩时所占比例越大。如果某个项目的flex-shrink值为0，则该项目不会在空间不足时进行收缩，保持其原始大小。

示例：

img

上图中，所有项目的flex-shrink值为1，即它们按比例均匀地收缩。

元素收缩的计算方法：

容器宽度-项目总宽度=-70px，记作容器剩余宽度为-70px，

缩小因子的分母：1*50 + 1*100 + 1*120 = 270 (1为各元素flex-shrink的值)

元素1的缩小因子：1*50/270

元素1的缩小宽度为缩小因子乘于容器剩余宽度：1*50/270 * (-70)

元素1最后则缩小为：50px + (1*50/270 *(-70)) = 37.03px

🍀flex属性

flex属性是一个复合属性，用于设置FLex项目的三个相关属性：flex-grow、flex-shrink和flex-basis（放大、收缩和初始主轴尺寸）。

语法：

flex: [flex-grow] [flex-shrink] [flex-basis];

🍀align-self属性

align-self属性用于在flex容器中单独设置某个flex项目的对齐方式，它可以覆盖父容器的align-items属性。

align-self属性取值：

  • auto：默认值，继承父容器的align-items属性。
  • flex-start：项目对齐在交叉轴的起始位置。
  • flex-end：项目对齐在交叉轴的终点位置。
  • center：项目在交叉轴上居中对齐。
  • baseline：项目在交叉轴上以基线对齐。
  • stretch：默认值，如果项目未设置高度或设为auto，则会拉伸以填满容器的高度。

示例：

/* Flex容器 */
.box {display: flex;align-items: center;width: 782px;height: 200px;border: 1px solid black;
}
/* Flex项目 */
.box div {width: 100px;height: 50px;background-color: orange;margin: 1px 1px;
}.box div:nth-child(1) {align-self: flex-start;
}.box div:nth-child(3) {align-self: flex-end;
}

我设置了5个项目，项目1将对齐在交叉轴的初始位置，项目3将对齐在交叉轴的终点位置，其他项目将对齐在交叉轴的中点位置。 

预览：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/121913.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构与算法复杂度介绍

数据结构与算法复杂度介绍

目录 一、基本概念 二、时间复杂度 【2.1】时间复杂度概念 【2.2】大O的渐进表示法 【2.3】举例时间复杂度计算 三、空间复杂度 一、基本概念 数据结构&#xff1a;相互之间存在一种或者多种特定关系的数据元素的集合。在逻辑上可以分为线性结构&#xff0c;散列结构、树…
阅读更多...
单片机电子元器件-按键

单片机电子元器件-按键

电子元器件 按键上有 四个引脚 1 2 、 3 4 按下之后 导通 1 3 、 2 4 初始导通 通常按键开关为机械弹性开关&#xff0c;开关在闭合不会马上稳定的接通&#xff0c;会有一连串的抖动 抖动时间的长短有机械特性来决定的&#xff0c;一般为5ms 到10 ms 。 消抖的分类 硬件消…
阅读更多...
【大数据Hive】hive 加载数据常用方案使用详解

【大数据Hive】hive 加载数据常用方案使用详解

目录 一、前言 二、load 命令使用 2.1 load 概述 2.1.1 load 语法规则 2.1.2 load语法规则重要参数说明 2.2 load 数据加载操作演示 2.2.1 前置准备 2.2.2 加载本地数据 2.2.3 HDFS加载数据 2.2.4 从HDFS加载数据到分区表中并指定分区 2.3 hive3.0 load 命令新特性 …
阅读更多...
vue项目配置MongoDB的增删改查操作

vue项目配置MongoDB的增删改查操作

在Vue中配置MongoDB的增删改查操作&#xff0c;需要先安装mongoose模块来连接MongoDB数据库。 1. 在Vue项目的根目录中&#xff0c;使用命令行安装mongoose模块&#xff1a; npm install mongoose --save 2. 找到启动node的app.js文件&#xff08;我这里是在server文件中&…
阅读更多...
Java开发之Redis（面试篇 持续更新）

Java开发之Redis（面试篇 持续更新）

文章目录 前言一、redis使用场景1. 知识分布2. 缓存穿透① 问题引入② 举例说明③ 解决方案④ 实战面试 3. 缓存击穿① 问题引入② 举例说明③ 解决方案④ 实战面试 4. 缓存雪崩① 问题引入② 举例说明③ 解决方案④ 实战面试 5. 缓存-双写一致性① 问题引入② 举例说明③ 解决…
阅读更多...
Linux执行命令

Linux执行命令

命令格式 主命令 选项 参数&#xff08;操作对象&#xff09;例如&#xff1a; 修改主机名 hostname set-hostname 新名称显示/目录下的文件的详细信息 ls -l /命令 内置命令&#xff08;builtin&#xff09;&#xff1a;shell程序自带的命令。 外部命令&#xff1a;有独立…
阅读更多...
多通道振弦数据记录仪应用桥梁安全监测的关键要点

多通道振弦数据记录仪应用桥梁安全监测的关键要点

多通道振弦数据记录仪应用桥梁安全监测的关键要点 随着近年来桥梁建设和维护的不断推进&#xff0c;桥梁安全监测越来越成为公共关注的焦点。多通道振弦数据记录仪因其高效、准确的数据采集和处理能力&#xff0c;已经成为桥梁安全监测中不可或缺的设备。本文将从以下几个方面…
阅读更多...
【JavaEE】_HTML

【JavaEE】_HTML

目录 1.HTML结构 2. HTML常用标签 2.1 注释标签 2.2 标题标签&#xff1a;h1~h6 2.3 段落标签&#xff1a;p 2.4 换行标签&#xff1a;br 2.5 格式化标签 2.6 图片标签&#xff1a;img 2.7 超链接标签&#xff1a;a 2.8 表格标签 2.9 列表标签 2.10 表单标签 2.10…
阅读更多...
PPO算法

PPO算法

PPO算法 全称Proximal Policy Optimization&#xff0c;是TRPO(Trust Region Policy Optimization)算法的继承与简化&#xff0c;大大降低了实现难度。原论文 算法大致流程 首先&#xff0c;使用已有的策略采样 N N N条轨迹&#xff0c;使用这些轨迹上的数据估计优势函数 A ^ …
阅读更多...
TCP 和 UDP 的区别、TCP 是如何保证可靠传输的？

TCP 和 UDP 的区别、TCP 是如何保证可靠传输的？

先来介绍一些osi七层模型 分为应用层、表示层、会话层、运输层、网络层、链路层、物理层。 应用层(数据)&#xff1a;确定进程之间通信的性质以及满足用户需要以及提供网络和用户应用&#xff0c;为应用程序提供服务&#xff0c;DNS&#xff0c;HTTP&#xff0c;HTTPS&#xf…
阅读更多...
【LeetCode】剑指 Offer ＜二刷＞（7）

【LeetCode】剑指 Offer ＜二刷＞（7）

目录 题目&#xff1a;剑指 Offer 14- I. 剪绳子 - 力扣&#xff08;LeetCode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 14- II. 剪绳子 II - 力扣&#xff08;…
阅读更多...
Java“牵手”唯品会商品详情数据，唯品会商品详情API接口，唯品会API接口申请指南

Java“牵手”唯品会商品详情数据，唯品会商品详情API接口，唯品会API接口申请指南

唯品会平台商品详情接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取唯品会商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片等详细信息 。 获取商品详情接口API是一种用于获取电商平台上商品详情数据的接口&#xff0c;…
阅读更多...
Rhinoceros（犀牛）使用技巧：有关曲线和曲面的分析

Rhinoceros（犀牛）使用技巧：有关曲线和曲面的分析

Rhinoceros&#xff08;犀牛&#xff09; for Mac破解版是一款功能强大的高级建模软件&#xff0c;可以创建、编辑、分析、提供、渲染、动画与转换 NURBS 线条、曲面、实体与多边形网格。不受精度、复杂、阶数或是尺寸的限制&#xff0c;在本篇文章中&#xff0c;为您介绍的是有…
阅读更多...
CUDA 问题 ，一直头大。。。。

CUDA 问题 ，一直头大。。。。

1.卸载cuda ubuntu系统安装/卸载cuda和cudnn_怎么删除cudnn_Zhijun.liStudio的博客-CSDN博客ubuntu系统安装/卸载cuda和cudnn_怎么删除cudnnhttps://blog.csdn.net/weixin_45921929/article/details/128849198?ops_request_misc%257B%2522request%255Fid%2522%253A%252216939…
阅读更多...
复现XSS漏洞及分析

复现XSS漏洞及分析

XSS漏洞概述&#xff1a; 类型一&#xff1a;反射型 类型二&#xff1a;存储型 类型三&#xff1a;DOM型 复现20字符短域名绕过 一、安装BEEF 1、在Kali中运行apt install beef-xss 2、运行beef 3、在浏览器访问 二、安装galleryCMS *遇到一点小问题 提示"last…
阅读更多...
ping: www.baidu.com: Name or service not known 写了DNS还是不行

ping: www.baidu.com: Name or service not known 写了DNS还是不行

环境描述&#xff1a;ESXI平台上&#xff0c;一台Centos7虚拟主机。 问题描述&#xff1a;平台上的其他的虚拟机可以正常ping通&#xff0c;就这台ping IP地址可以通&#xff0c;ping域名解析失败。 排查过程&#xff1a; 1、检查网卡配置文件和/etc/resolv.conf配置文件是否…
阅读更多...
postgis数据库导出csv表再导入postgis

postgis数据库导出csv表再导入postgis

1、导出csv表 from settings_Address import * from sqlalchemy import create_engine, MetaData import pandas as pd def create_conn(Postgis_user,Postgis_password,Postgis_host,Postgis_port,dbname_PG):# return create_engine(PostgispyPostgis://{}:{}{}:{}/{}.forma…
阅读更多...
FOXBORO FBM232 P0926GW 自动化控制模块

FOXBORO FBM232 P0926GW 自动化控制模块

Foxboro FBM232 P0926GW 是 Foxboro&#xff08;福克斯博罗&#xff09;自动化控制系统的一部分&#xff0c;通常用于监测和控制工业过程。以下是关于这种类型的自动化控制模块可能具有的一些常见功能&#xff1a; 数字输入通道&#xff1a; FBM232 P0926GW 控制模块通常具有多…
阅读更多...
HTML 标签讲解

HTML 标签讲解

HTML 标签讲解 HTML 语言结构根元素元数据元素主体根元素大纲元素文本内容语义化内联文本图像与多媒体编辑标识table表格内容表单内容table表单 HTML 语言结构 Markup &#xff08;标记、标签&#xff09;用来容纳和描述内容 严格意义上&#xff0c;标签是指开始标签&#xf…
阅读更多...
Spring-Cloud-Openfeign如何传递用户信息？

Spring-Cloud-Openfeign如何传递用户信息？

用户信息传递 微服务系统中&#xff0c;前端会携带登录生成的token访问后端接口&#xff0c;请求会首先到达网关&#xff0c;网关一般会做token解析&#xff0c;然后把解析出来的用户ID放到http的请求头中继续传递给后端的微服务&#xff0c;微服务中会有拦截器来做用户信息的…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023