弹性布局display:flex

弹性布局display:flex

    • 一、弹性布局的特点
    • 二、容器的属性
      • 1、justify-content
        • 1.1 justify-content: center 居中
        • 1.2 justify-content: flex-start（默认值）：左对齐
        • 1.3 justify-content: flex-end 右对齐
        • 1.4 justify-content:space-between 两端对齐，项目之间的间隔都相等。
        • 1.5 justify-content:space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
      • 2、align-items
        • 2.1 align-items: center 交叉轴的中点对齐
        • 2.2 align-items: flex-start 交叉轴的起点对齐
        • 2.3 align-items: flex-end 交叉轴的终点对齐
        • 2.4 align-items:stretch （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度
        • 2.5 align-items:baseline项目的第一行文字的基线对齐
      • 3、flex-direction
        • 3.1 flex-direction:row 主轴为水平方向，起点在左端
        • 3.2 flex-direction:row-reverse 主轴为水平方向，起点在右端
        • 3.3 flex-direction: column 主轴为垂直方向，起点在上沿
        • 3.4 flex-direction: column-reverse 主轴为垂直方向，起点在下沿
      • 4、flex-wrap
        • 4.1 flex-wrap: nowrap（默认）不换行
        • 4.2 flex-wrap: wrap：换行，第一行在上方
        • 4.3 flex-wrap: wrap-reverse 换行，第一行在下方
      • 5、flex-flow以上两种的简写
      • 6、align-content
        • 6.1 align-content: flex-start 与交叉轴的起点对齐
        • 6.2 align-content: flex-end 与交叉轴的终点对齐
        • 6.3 align-content: center 与交叉轴的中点对齐
        • 6.4 align-content: space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
        • 6.5 align-content: space-around 每根轴线两侧的间隔都相等。
        • 6.6 align-content: stretch（默认值）轴线占满整个交叉轴。
      • 7、order
      • 8、flex-grow
      • 9、flex-shrink
      • 10、flex-basis
      • 11、flex
      • 12、align-self

一、弹性布局的特点

弹性布局具有以下特点：
1、主轴与交叉轴
弹性容器具有主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。（）（）
2、弹性容器
通过将父元素的display属性设置为flex或inline-flex来创建弹性容器。
子元素的弹性项目：弹性容器中的每个子元素都成为弹性项目。子元素可以指定各自在主轴和交叉轴上的大小、顺序以及对齐方式等。
3、主轴对齐
弹性项目可以在主轴上按照一定比例分配空间，也可以使用justify-content属性定义主轴的对齐方式。
4、交叉轴对齐
弹性项目可以在交叉轴上进行对齐，包括顶部对齐、底部对齐、居中对齐等，使用align-items属性定义交叉轴对齐方式。
5、换行与自动调整
可控制弹性项目是否换行，并且具备自动调整元素大小的能力。
弹性布局简化了网页布局的开发过程，提供了更灵活、响应式的布局方式。它适用于各种屏幕尺寸和设备类型，并能够快速适应不同的布局需求。

二、容器的属性

下面属性示例用到的测试代码1

<!DOCTYPE html>
<html><head><!-- <mata charset="UTF-8"> --><meta http-equiv="content-Type" content="text/html; charset=UTF-8" /><title></title><style>.content {width: 600px;height: 200px;border: 1px solid black;}.flexDiv {height: 150px;width: 150px;}.bgColorRed {background-color: red}.bgColorBlue {background-color: blue}.bgColorGreen {background-color: green}</style>
</head><body><div class="content"><div class="flexDiv bgColorRed">div1</div><div class="flexDiv bgColorBlue">div2</div><div class="flexDiv bgColorGreen">div2</div></div>
</body><script></script>

给测试代码外侧div加上flex，使其变成弹性布局

    .flex {display: flex;}<div class="content flex">

在这里插入图片描述

1、justify-content

justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around

我们将上述的css样式依次添加给class=content的div标签

    .box1 {/* 主轴对齐方式 *//* justify-content: flex-start | flex-end | center | space-between | space-around; */justify-content: center;}<div class="content flex box1">
1.1 justify-content: center 居中

在这里插入图片描述

1.2 justify-content: flex-start（默认值）：左对齐

在这里插入图片描述

1.3 justify-content: flex-end 右对齐

在这里插入图片描述

1.4 justify-content:space-between 两端对齐，项目之间的间隔都相等。

在这里插入图片描述

1.5 justify-content:space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

在这里插入图片描述

2、align-items

align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch

    .box2 {/* 交叉轴对齐方式 *//* align-items: flex-start | flex-end | center | baseline | stretch; */align-items: center}<div class="content flex box2">
2.1 align-items: center 交叉轴的中点对齐

在这里插入图片描述

2.2 align-items: flex-start 交叉轴的起点对齐

在这里插入图片描述

2.3 align-items: flex-end 交叉轴的终点对齐

在这里插入图片描述

2.4 align-items:stretch （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度

去除项目的高度

    .flexDiv {/* height: 150px; */width: 150px;}

在这里插入图片描述

2.5 align-items:baseline项目的第一行文字的基线对齐
<div class="content flex box2"><div class="flexDiv bgColorRed"><div>div1</div></div><div class="flexDiv bgColorBlue"><div style="margin-top: 20px;">div2</div></div><div class="flexDiv bgColorGreen"><div style="margin-top: 40px;">div3</div></div>
</div>

在这里插入图片描述

3、flex-direction

决定主轴的方向，水平或者垂直
flex-direction: row | row-reverse | column | column-reverse

    .box3 {/* 决定主轴的方向，水平或者垂直 *//* flex-direction: row | row-reverse | column | column-reverse; */flex-direction: row}<div class="content flex box3">
3.1 flex-direction:row 主轴为水平方向，起点在左端

在这里插入图片描述

3.2 flex-direction:row-reverse 主轴为水平方向，起点在右端

在这里插入图片描述

3.3 flex-direction: column 主轴为垂直方向，起点在上沿

在这里插入图片描述

3.4 flex-direction: column-reverse 主轴为垂直方向，起点在下沿

在这里插入图片描述

4、flex-wrap

换行不换行以及换行的方向
flex-wrap: nowrap | wrap | wrap-reverse;

flex-wrap的测试需要改变下页面结构，用测试代码2

<!DOCTYPE html>
<html><head><!-- <mata charset="UTF-8"> --><meta http-equiv="content-Type" content="text/html; charset=UTF-8" /><title></title><style>.content {width: 600px;height: 200px;border: 1px solid black;}.flexDiv2 {height: 100px;width: 150px;}.bgColorRed {background-color: red}.bgColorBlue {background-color: blue}.bgColorGreen {background-color: green}.bgColorPurple {background-color: purple}.bgColorYellow {background-color: yellow}.bgColorPink {background-color: pink}.flex {display: flex;}</style>
</head><body><div class="content flex"><div class="flexDiv2 bgColorRed">div1</div><div class="flexDiv2 bgColorBlue">div2</div><div class="flexDiv2 bgColorGreen">div3</div><div class="flexDiv2 bgColorPurple">div4</div><div class="flexDiv2 bgColorYellow">div5</div><div class="flexDiv2 bgColorPink">div6</div></div>
</body><script></script>

在这里插入图片描述

    .box4 {/* 换行不换行以及换行的方向 *//* flex-wrap: nowrap | wrap | wrap-reverse; */flex-wrap: nowrap}<div class="content flex box4">
4.1 flex-wrap: nowrap（默认）不换行

在这里插入图片描述

4.2 flex-wrap: wrap：换行，第一行在上方

在这里插入图片描述

4.3 flex-wrap: wrap-reverse 换行，第一行在下方

在这里插入图片描述

5、flex-flow以上两种的简写

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

6、align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content:flex-start | flex-end | center | space-between | space-around | stretch;

下面是测试代码3

<!DOCTYPE html>
<html><head><!-- <mata charset="UTF-8"> --><meta http-equiv="content-Type" content="text/html; charset=UTF-8" /><title></title><style>.content {width: 600px;height: 400px;border: 1px solid black;}.flexDiv2 {height: 100px;width: 150px;}.bgColorRed {background-color: red}.bgColorBlue {background-color: blue}.bgColorGreen {background-color: green}.bgColorPurple {background-color: purple}.bgColorYellow {background-color: yellow}.bgColorPink {background-color: pink}.bgColorMaroon {background-color: maroon}.bgColorSilver {background-color: silver}.bgColorOrange {background-color: orange}.flex {display: flex;}.box4 {/* 换行 */flex-wrap: wrap;}</style>
</head><body><div class="content flex box4"><div class="flexDiv2 bgColorRed">div1</div><div class="flexDiv2 bgColorBlue">div2</div><div class="flexDiv2 bgColorGreen">div3</div><div class="flexDiv2 bgColorPurple">div4</div><div class="flexDiv2 bgColorYellow">div5</div><div class="flexDiv2 bgColorPink">div6</div><div class="flexDiv2 bgColorMaroon">div7</div><div class="flexDiv2 bgColorSilver">div8</div><div class="flexDiv2 bgColorOrange">div9</div></div>
</body><script></script>

在这里插入图片描述

    .box5 {/* 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 *//* align-content: flex-start | flex-end | center | space-between | space-around | stretch; */align-content: flex-start;}<div class="content flex box4 box5">
6.1 align-content: flex-start 与交叉轴的起点对齐

在这里插入图片描述

6.2 align-content: flex-end 与交叉轴的终点对齐

在这里插入图片描述

6.3 align-content: center 与交叉轴的中点对齐

在这里插入图片描述

6.4 align-content: space-between 与交叉轴两端对齐，轴线之间的间隔平均分布

在这里插入图片描述

6.5 align-content: space-around 每根轴线两侧的间隔都相等。

所以，轴线之间的间隔比轴线与边框的间隔大一倍。
在这里插入图片描述

6.6 align-content: stretch（默认值）轴线占满整个交叉轴。

在这里插入图片描述

7、order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  <style>.content {width: 600px;height: 400px;border: 1px solid black;}.flexDiv {height: 150px;width: 150px;}.flexDiv2 {height: 100px;width: 150px;}.flexDiv3 {height: 200px;width: 150px;}.order1 {order: 1;}.order2 {order: 2;}.order3 {order: 3;}</style><div class="content flex box5"><div class="flexDiv2 order2 bgColorRed">order2</div><div class="flexDiv3 order1 bgColorBlue">order1</div><div class="flexDiv order3 bgColorGreen">order3</div></div>

在这里插入图片描述

8、flex-grow

flex-grow: ; /* default 0 */

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

9、flex-shrink

flex-shrink: ; /* default 1 */
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效

10、flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-basis: | auto; /* default auto */
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

11、flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

12、align-self

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

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

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

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

相关文章

黑马程序员微服务SpringCloud实用篇02

黑马程序员微服务SpringCloud实用篇02

SpringCloud实用篇02 0.学习目标 1.Nacos配置管理 Nacos除了可以做注册中心&#xff0c;同样可以做配置管理来使用。 1.1.统一配置管理 当微服务部署的实例越来越多&#xff0c;达到数十、数百时&#xff0c;逐个修改微服务配置就会让人抓狂&#xff0c;而且很容易出错。我…
阅读更多...
查找或替换excel换行符ctrl+j和word中的换行符^p,^l

查找或替换excel换行符ctrl+j和word中的换行符^p,^l

一、excel中 直接上图。使用ctrlh调出替换&#xff0c;查找内容里按ctrlj&#xff08;会出现一个闪的小点&#xff09;&#xff0c;即为换行符。 二、word中 在word中&#xff0c;^p和^l分别代表换行符&#xff08;enter&#xff09;和手动换行符&#xff08;使用shiftenter&…
阅读更多...
亚马逊云科技Zero ETL集成全面可用，可运行近乎实时的分析和机器学习

亚马逊云科技Zero ETL集成全面可用，可运行近乎实时的分析和机器学习

亚马逊云科技数据库、数据分析和机器学习全球副总裁Swami Sivasubramanian曾指出&#xff1a;“数据是应用、流程和商业决策的核心。”如今&#xff0c;客户常用的数据传输模式是建立从Amazon Aurora到Amazon Redshift的数据管道。这些解决方案能够帮助客户获得新的见解&#x…
阅读更多...
Win10专业版安装wsl-ubuntu子系统

Win10专业版安装wsl-ubuntu子系统

文章目录 一、查看是否满足安装要求二、管理员权限启动 Windows PowerShell三、启用Windows10子系统功能四、启用虚拟机平台功能五、重启电脑六、下载 Linux 内核更新包&#xff08;适用于 x64 计算机的 WSL2 Linux 内核更新包&#xff09;七、将 WSL 2 设置为默认版本八、打开…
阅读更多...
华为gre带验证key案例

华为gre带验证key案例

配置FW_A。 a.配置接口的IP地址&#xff0c;并将接口加入安全区域。 system-view [sysname] sysname FW_A [FW_A] interface GigabitEthernet 1/0/1 [FW_A-GigabitEthernet1/0/1] ip address 1.1.1.1 24 [FW_A-GigabitEthernet1/0/1] quit [FW_A] interface GigabitEthernet 1/…
阅读更多...
Python数据容器（字符串）

Python数据容器（字符串）

字符串 1.字符串 字符串也是数据容器的一种&#xff0c;字符串是字符的容器&#xff0c;一个字符串可以存放任意数量的字符。 2.字符串的下标索引 从前向后&#xff0c;下标从0开始从后向前&#xff0c;下标从-1开始 # 通过下标索引获取特定位置的字符 name python print(na…
阅读更多...
【技术类-01】doc转PDF程序卡死的解决方案，

【技术类-01】doc转PDF程序卡死的解决方案，

摘要&#xff1a; 1、报错&#xff1a; raise AttributeError("%s.%s" % (self._username_, attr))&#xff09; 2、表现&#xff1a;doc转PDF卡死&#xff08;白条不动或出现以上英文&#xff09; 3、解决&#xff1a;在docx保存代码行后面加上time.sleep(3) 4、…
阅读更多...
计算机是如何进行工作的+进程和线程

计算机是如何进行工作的+进程和线程

一)计算机是如何工作的? 指令是如何执行的?CPU基本工作过程&#xff1f; 假设上面有一些指令表&#xff0c;假设CPU上面有两个寄存器A的编号是00&#xff0c;B的编号是01 1)第一个指令0010 1010&#xff0c;这个指令的意思就是说把1010地址上面的数据给他读取到A寄存器里面 2…
阅读更多...
ubuntu 16.04.5 安装 vivado 2019.1 完整编译AD9361的环境

ubuntu 16.04.5 安装 vivado 2019.1 完整编译AD9361的环境

一、前期安装 1、安装ncurses库&#xff08;已经包含了&#xff0c;其他的os需要安装&#xff09; sudo apt install libncurses5二、安装 sudo ./xsetup使用lic进行激活。 三、安装后 输入指令 sudo gedit ~/.bashrc 末尾添加 source /opt/Xilinx/Vivado/2019.1/setti…
阅读更多...
生态环境领域基于R语言piecewiseSEM结构方程模型

生态环境领域基于R语言piecewiseSEM结构方程模型

结构方程模型&#xff08;Sructural Equation Modeling&#xff0c;SEM&#xff09;可分析系统内变量间的相互关系&#xff0c;并通过图形化方式清晰展示系统中多变量因果关系网&#xff0c;具有强大的数据分析功能和广泛的适用性&#xff0c;是近年来生态、进化、环境、地学、…
阅读更多...
ruoyi前后端分离版本开发框架解读---让你快速入门

ruoyi前后端分离版本开发框架解读---让你快速入门

后端结构 com.ruoyi ├── common // 工具类 │ └── annotation // 自定义注解 │ └── config // 全局配置 │ └── constant // 通用常量 │ └── core …
阅读更多...
10. GPIO中断

10. GPIO中断

10. GPIO中断 回顾stm32中断系统STM32中断向量表中断向量偏移NVIC中断控制器 Cortex_A7 中断系统中断向量表GIC控制器中断IDGIC逻辑分块CP15协处理器c0寄存器c1寄存器c12寄存器c15寄存器 中断使能中断优先级设置优先级数配置 GICC_PMR抢占优先级和子优先级位数设置 GICC_BPR优先…
阅读更多...
Vue中的 配置项 setup

Vue中的 配置项 setup

setup 是 Vue3 中的一个全新的配置项&#xff0c;值为一个函数。 setup 是所有 Composition API&#xff08;组合式API&#xff09;的入口&#xff0c;是 Vue3 语法的基础。 组件中所用到的数据、方法、计算属性等&#xff0c;都需要配置在 setup 中。 setup 会在 beforeCre…
阅读更多...
使用WinDbg分析CPU100%的问题

使用WinDbg分析CPU100%的问题

在我们软件运行的时候&#xff0c;偶尔会出现CPU占比100%的问题&#xff0c;而且极其不容易排查&#xff0c;概率极低&#xff0c;我硬是操作了一个下午&#xff0c;出现了一次&#xff0c;然后找到了dmp文件&#xff0c;也没有任何的规律&#xff0c;那么就可以借助windbg进行…
阅读更多...
好用的vscode插件

好用的vscode插件

一、代码管理 git GitLens — Git supercharged Git History gitignore 项目管理 Project Manager 管理多个项目 Todo Tree 快速定位代码中的todo WakaTime 用于在编程活动中自动统计工作量、代码提交和时间跟踪等 VS Code Counter 该插件用于帮助我们统计项目代码的行数…
阅读更多...
Android ConstraintLayout

Android ConstraintLayout

0dp 充满约束 to左侧是控件本身,to右边是约束条件 例如: app:layout_constraintBottom_toBottomOf"id/image_1" app:layout_constraintTop_toBottomOf"id/image_1" 指定权重: app:layout_constraintHorizontal_weight"" app:layout_constra…
阅读更多...
电容式触摸芯片-多键触摸检测高灵敏度、抗干扰强

电容式触摸芯片-多键触摸检测高灵敏度、抗干扰强

电容式触摸芯片是基于电容感应技术的一种新型触摸芯片&#xff0c;它能够检测人的手指触摸&#xff0c;并将它们转换成电信号&#xff0c;从而实现触摸控制&#xff1b;具有触摸精度高、响应速度快、低功耗等优点&#xff0c;这些优点使它成为家电控制、智能家居控制及医疗等领…
阅读更多...
css呼吸效果实现

css呼吸效果实现

实现一个图片有规律的大小变化&#xff0c;呈现呼吸效果&#xff0c;怎么用CSS实现这个呼吸效果呢 一.实现 CSS实现动态效果可以使用动画( animation)来属性实现&#xff0c;放大缩小效果可以用transform: scale来实现&#xff0c;在这基础上有了动画&#xff0c;就可以设置一个…
阅读更多...
[java进阶]——方法引用改写Lambda表达式

[java进阶]——方法引用改写Lambda表达式

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 &#x1f4d5;概念介绍&#xff1a; ⭐方法引用的前提条件&#xff1a; 1.引用静态方法 2.引用构造方法 ①类的构造&#xff1a; ②数组的构造&#xff1a; 3.引用本类或父类的成员方法 ①本类&#xff1…
阅读更多...
史上最详细的测试用例写作规范

史上最详细的测试用例写作规范

软件测试用例得出软件测试用例的内容&#xff0c;其次&#xff0c;按照软件测试写作方法&#xff0c;落实到文档中&#xff0c;两者是形式和内容的关系&#xff0c;好的测试用例不仅方便自己和别人查看&#xff0c;而且能帮助设计的时候考虑的更周。 一个好的测试用例必须包含…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发