程序员经验分享-hwhale

Flex布局实战详解

2023-11-18

Flex布局详解

1. 父项属性

  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素排列方式（多行）
  • align-items：设置侧宙上的子元素排列方式（单行）
  • flex-flow： 复核属性，相当于同时设置了flex-direction和flex-wrap

1.1 flex-direction 设置主轴的方向

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的 子元素都是跟着主轴来排列的

属性值 说明
row 默认从左到右
row-reverse 从右到左
column 从上到下
column 从下到上 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		div{
			width: 800px;
			height: 300px;
			background-color: pink;
			display: flex ;
			/* 默认的按照行排列的，元素是按照主轴排列的 */
			/* flex-direction: row; */
			/* flex-direction: row-reverse; */
			flex-direction: column;
		}
		div span{
			width: 200px;
			height: 200px;
			background-color: green;
		}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
</html>

1.2 justify-content设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是那个

属性值 说明
flex-start 默认值从头部开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间（重要）

1.2.1 flex-start(默认)

在这里插入图片描述

1.2.2 flex-end

在这里插入图片描述

1.2.3 center

在这里插入图片描述

1.2.4 space-around

在这里插入图片描述

1.2.5 space-between

在这里插入图片描述

<style>
div{
    width: 800px;
    height: 300px;
    background-color: pink;
    display: flex ;
    /* 默认沿着主轴从左到右排列 */
    justify-content: flex-start;
    /* 如果主轴是x，则从右到左排列 */
    justify-content: flex-end;
    /* 居中排列 */
    justify-content: center;
    /* 平分剩余空间 */
    justify-content: space-around;
    /* 先两边贴边再平分剩余空间 */
    justify-content: space-between;

}
div span{
    width: 200px;
    height: 200px;
    background-color: green;
}
</style>

1.3 flex-wrap设置元素是否换行

flex默认让子元素在一行显示，项目都排在一条线上（又称“轴线”）,如果装不开会缩小子元素的宽度。

属性值 说明
nowrap 默认值，不换行
wrap 换行

在这里插入图片描述
设置flex-wrap:wrap之后
在这里插入图片描述

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

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

属性值 说明
flex-start 默认值 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
streth 拉伸

1.4.1 flex-start(默认)

在这里插入图片描述

1.4.2 flex-end

从下到上
在这里插入图片描述

1.4.3 center

垂直居中
在这里插入图片描述

1.4.4 streth

去掉height
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width: 800px;
				height: 400px;
				background-color: pink;
				display: flex ;
				justify-content: center;
				align-items: flex-start;
				align-items: flex-end;
				align-items: center;
				align-items: stretch;
			}
			div span{
				width: 150px;
				height: 100px;
				background-color: green;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
</html>

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

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），单行的情况下是无效的

属性值 说明
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度

1.5.1 flex-start（默认）

在这里插入图片描述

1.5.2 flex-end

在侧轴的尾部开始排列
在这里插入图片描述

1.5.3 center

在这里插入图片描述

1.5.4 space-around

在这里插入图片描述

1.5.5 space-between

在这里插入图片描述

1.5.6 stretch

去掉子元素的hight
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width: 800px;
				height: 400px;
				background-color: pink;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				align-content: flex-end;
				align-content: center;
				align-content: space-around;
				align-content: space-between;
				align-content: stretch;
			}
			div span{
				width: 150px;
				background-color: green;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
		</div>
	</body>
</html>

1.6 align-content和align-items的区别

  • align-items 适用于单行情况下，只有上对齐、下对其、居中和拉伸
  • align-content 适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
  • 总结就是单行找align-items多行找align-content

1.7 flex-flow

flex-flow属性是flex-direction和flex-wrap的复核属性
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width: 800px;
				height: 400px;
				background-color: pink;
				display: flex;
				/* flex-direction: column; */
				/* flex-wrap: wrap; */
				flex-flow: column wrap;
				
			}
			div span{
				width: 150px;
				height: 100px;
				background-color: green;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
		</div>
	</body>
</html>

2. 子项属性

  • flex 子项目占的份数
  • align-self 控制子项自己在侧轴的排列方式
  • order 属性定义子项的排列顺序（前后顺序）

2.1 flex 属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0

例子1： 两端固定，中间自适应布局
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			section{
				display: flex;
				margin: 0 auto;
				width: 800px;
				height: 150px;
				background-color: pink;
			}
			section div:nth-child(1){
				width: 100px;
				height: 150px;
				background-color: red;
			}
			section div:nth-child(3){
				width: 100px;
				height: 150px;
				background-color: blue;
			}
			section div:nth-child(2){
				width: 100px;
				height: 150px;
				flex: 1;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</body>
</html>

例子2：等分份数
在这里插入图片描述

<style>
section{
display: flex;
margin: 0 auto;
width: 800px;
height: 150px;
background-color: pink;
}
section div:nth-child(1){
width: 100px;
height: 150px;
flex: 1;
background-color: red;
}
section div:nth-child(3){
width: 100px;
height: 150px;
flex: 1;
background-color: blue;
}
section div:nth-child(2){
width: 100px;
height: 150px;
flex: 1;
background-color: green;
}
</style>

2.2 align-self控制子项自己在侧轴上的排列方式

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			section{
				display: flex;
				margin: 0 auto;
				width: 800px;
				height: 450px;
				background-color: pink;
			}
			section div:nth-child(1){
				width: 150px;
				height: 150px;
				background-color: red;
			}
			section div:nth-child(3){
				width: 150px;
				height: 150px;
				align-self: flex-end;
				background-color: blue;
			}
			section div:nth-child(2){
				width: 150px;
				height: 150px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</body>
</html>

2.3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不一样

在这里插入图片描述

section div:nth-child(1){
    width: 150px;
    height: 150px;
    background-color: red;
}
section div:nth-child(3){
    width: 150px;
    height: 150px;
    order: -1;
    background-color: blue;
}
section div:nth-child(2){
    width: 150px;
    height: 150px;
    background-color: green;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

学习笔记

css

CSS3

html

Flex

Flex布局实战详解 的相关文章

  • 如何使用ajax从服务器接收返回的数据？

    基本上我有一个带有用户名文本框和提交按钮的表单 现在我想要的是 当用户在文本框中输入文本时 它应该获取文本框值并将用户名发送到服务器 以便服务器可以检查该用户名是否被任何其他用户占用 我可以将文本值发送到服务器 但我不知道如何接收回一些数据

  • 如何从 Backbone 集合中提取多个属性？

    我试图从 Backbone 集合中提取多个属性 但它返回undefined 收藏 id 1 name raju age 23 sex male hobbies id 2 name ramesh age 43 sex male hobbies

  • Javascript-CSS 显示和隐藏表单元素

    通过使用 Javascript 如何显示和隐藏表格的某些部分 例如 TR 或 TD 这应该取决于从数据库获取的数据 我在我的应用程序中使用 CakePHP 框架 并使用单个视图文件进行添加和编辑 在编辑模式下 根据获取的数据 我需要显示和隐

  • 调整浏览器大小时CSS边框影响宽度

    我使用以下方法制作了两个简单的导航菜单ul and li 一种是无边框的 另一种是有边框的 两个菜单的宽度固定为 400px 在第一个菜单中我给了每个li固定宽度为 100px 在第二个菜单中 根据宽度计算 我给出了固定宽度 98px 左右

  • 如何让图片在div中居中？

    我的 HTML 代码如下所示 div class ctn img src some img jpg div The ctn应该是固定大小 例如 150 150 但 IMG 的尺寸可能更大或更小 200 50 50 200 50 50 等 如

  • 如何在SVG中实现橡皮擦功能？

    我认为 SVG 在某些功能上比 HTML5 canvas 更好 但我无法想象一种简单的方法来实现橡皮擦功能 我有什么方法或例子吗 这是一种非常笨拙的方法 但您可以简单地用白色描边模仿标准钢笔工具

  • 为了让 Pelican 生成的 html 链接到图像，表达路径的正确方法是什么？

    我刚刚开始使用 Pelican 创建博客 并想要链接到图像 我通过在 Markdown 文件中包含以下行来做到这一点 img src myImg1a png alt style width 100 height 800px 此行已成功复制到

  • 定义 CSS @Font-Face 粗体斜体

    我正在开展一个项目 其中我正在使用的字体有六种粗细 样式 这些包括 常规 斜体 半粗体 半粗斜体 粗体和粗体斜体 我有 font face 标签设置 理论上 它们应该显示的方式 然而 现实中发生的情况是粗体始终是斜体 是否有办法声明这些粗体

  • CSS：滚动条从窗口下方几个像素开始

    我想修复我的标题 标题始终位于页面顶部 并且我的整个内容 包括页脚在内的所有内容 都可以滚动 标题高度为 60 px 如下所示 将其固定在顶部不是问题 我想解决的问题 仅使用CSS 是让滚动条从距顶部 60 像素以下的位置开始 正如您所看到

  • 在图像加载之前显示替代文本来代替图像

    在图像加载之前 如何显示文本代替图像 因为在 HTML 网站上我有一个图像作为页面的标题 所以页面完全加载 标题图像稍后出现 h1 img src heading png alt Some nice heading here width 6

  • 将 div 的内容垂直居中（不是按行高）

    我有一个 div 我需要将其内容垂直居中 div Free coffee for all the people who visit my restaurant div coffee line height 235px width 300px

  • 如何将日期格式设置为 (dd/mm/yyyy hh:mm:ss)

    如何将下面的日期转换为此模板 dd mm yyyy hh mm ss 05 04 2021 14 52 我尝试这样做 但我只得到时间 而不是日期和时间 var data new Date 05 04 2021 14 52 var time

  • 带有路径连接器的 jQuery 可拖动小部件

    参考该图像 Block1 和Block2 都是可拖动的 我的问题是 如何在两个块之间制作红色链状连接器 要求是链条应该延伸到块被拖动的地方 请提供任何教程 学习材料的指示 谢谢 有许多 Jquery 插件可用于创建数据库可视化或流程图的连接

  • CSS：变换：翻译（-50％，-50％）使文本模糊[重复]

    这个问题在这里已经有答案了 我想将我的div我使用这种方法 但它使我的文本在div blurry div top 50 left 50 webkit transform translate 50 50 transform translate

  • 使用 html 属性的 DOM 惩罚

    我正在考虑使用 HTML5 数据属性来更轻松地编写我的应用程序的第三方脚本 因此 考虑两种情况 页面上有 10 000 个 HTML 元素 例如 div Sticker div 还有其他 10 000 个 HTML 元素 例如 div St

  • 垂直对齐 li 内的图像和文本

    我试图将列表元素中的图像和一些文本垂直对齐到中间 但没有运气 eg ul li img src somepath sometext li li img src somepath2 sometext2 li ul 我该怎么做 谢谢 假设您的列

  • 为什么 Firefox 对“select”标签上的“click”事件的反应与 Webkit 和 IE 不同？

    我意识到 Firefox 对待click事件于

  • 在 JavaScript onClick 事件处理程序中转义双引号

    下面的简单代码块可以在静态 HTML 页面中提供 但会导致 JavaScript 错误 您应该如何转义中嵌入的双引号onClick处理程序 即 xyz 请注意 HTML 是通过从数据库中提取数据动态生成的 其中的数据是其他可能带有单引号或双

  • 避免使用 Grunt cssmin 任务来删除重复条目

    在我的 Gruntfile 中 我使用 cssmin grunt contrib cssmin 任务 就像是 cssmin css src dist styles css dest dist styles min css 问题是 style

  • iframe可以弹出Lightbox风格的盒子吗？

    这个问题不是关于在 Lightbox 中弹出 iframe 的问题 而是关于在 Lightbox 中弹出 iframe 的问题 相反 它是关于页面上的 iframe 它可以在页面中启动自己的 Lightbox 样式框contains那个 i

随机推荐

  • java学习03-程序执行三大结构

    一 顺序执行语句 程序运行时 按顺序从上往下执行 二 分支语句 分支运算 if else if 条件 if 条件 else 虽然多个语句块 但是只有一个执行 if 条件 else if 条件 else switch case 不能嵌套 sw

  • 报错Attribute "path" is required and must be specified for element type

    Attribute path is required and must be specified for element type 最近搞一个项目总遇到这个或者类似的问题 其实问题很简单 其实就是batis和MyBatis之间有区别 就是在

  • java8 stream findfirst().get()空指针

    java8 stream findfirst get 空指针 List

  • 【STM32CUBE+IAR+IAP升级】

    STM32CUBE IAR IAP升级 案例应用 利用IAR 串口调试助手对STM32F411VET6进行简单的IAP实现 代码分为两部分 BootLoader APP翻转LED 1 工具 IAR STM32CUBEMX 串口调试助手 IA

  • ResultSet的getDate()、getTime()和getTimestamp()比较

    最近在做一个项目 发现个知识点 记录一下 数据库中存储时间格式为2021 8 11 16 09 28 现在要从ResultSet中取出时间 当然是要包含年月日时分秒的 发现 rs getDate 只是返回日期部分 只精确到天 java sq

  • el-image因src路径问题加载失败

    载入图片目录路径如下 起初 我将路径这样写

  • CDH多租户配置过程中遇到的问题

    多租户是CDH里面非常重要的一部分 从一开始配置KDC到集成KDC 服务使用过程中都有可能会遇到各种各样的问题 下面我举例说下我当时遇过的问题 希望能帮助到大家 服务启动错误 KDC服务配置完成安装完成 CDH集成过程中也没问题 CDH启动

  • WebSocket断开原因分析，再也不怕为什么又断开了

    阅读原文 https wdd js org websocket 1 把错误打印出来 WebSocket断开的原因有很多 最好在WebSocket断开时 将错误打印出来 在线demo地址 https wdd js org websocket

  • 【IP协议(一）】——IP数据报格式及其含义，IP数据报的切分

    个人主页 努力学习的少年 版权 本文由 努力学习的少年 原创 在CSDN首发 需要转载请联系博主 如果文章对你有帮助 欢迎关注 点赞 收藏 一键三连 和订阅专栏哦 IP数据报格式 版本 占4位 指ip协议的版本 首部长度 表示IP数据报中报

  • 短视频矩阵源码

    随着短视频平台的快速发展 越来越多的企业开始关注短视频营销 而矩阵号运营逐渐成为了企业进行短视频营销的常规玩法 那么 矩阵账号如何运作 如何进行短视频矩阵号运营 一 矩阵号怎么搭建 1 选择短视频平台 首先 根据自己企业的特点和目标用户群体

  • 【C语言】结构体

    目录 结构体 结构体类型的声明 结构体的自引用 结构体变量的定义和初始化 结构体内存对齐 计算结构体大小 结构体内存对齐的意义 修改默认对齐数 结构体传参 结构体实现位段 什么是位段 位段的内存分配 位段的应用 结构体 结构体类型的声明 1

  • javascript 字符串判断是否为空

    var a document getElementById notValid if a a为null 或者 或者0 alert javascript 字符串为null 或者是0

  • 安卓Android和Java语言的异同、关系和区别

    安卓Android和Java语言的异同 关系和区别 安卓Android是一种以Linux为基础的开放源码操作系统 主要使用于便携设备 2011年第一季度 安卓在全球的市场份额首次超过塞班系统 跃居全球第一 2012年2月数据 安卓占据全球智

  • Linux Ctrl+ 所有的快捷键

    Ctrl a 光标移到行首 Ctrl b 光标向前移一格 Ctrl c 结束命令 Ctrl d 删除光标所在字符 Ctrl e 光标移到行尾 Ctrl f 光标向后移一格 Ctrl g Ctrl h 删除光标前一格 Ctrl i Ctrl

  • SoC性能指标&ARM内核运算能力

    自动驾驶芯片常用的性能评价指标 TOPS DMIPS GFLOPS分别说的是啥 TOPS Tera Operation Per Second 表示每秒钟可以进行的操作数量 用于衡量自动驾驶的算力 众所周知 汽车上最常用的传感器是摄像头 而与

  • URP——后期处理特效

    通用渲染管道 URP 包括一个后处理效果的集成实现 如果使用URP 则不需要为后期处理效果安装额外的包 URP与Post Processing Stack v2包不兼容 URP使用体积框架进行后期处理效果 下面的图片显示了一个URP场景有没

  • 解决qt中cmake单独存放 .ui, .cpp, .h文件

    创建时间 2023 02 18 17 58 04 设想 项目文件较多 全部放在一个目录下就像依托答辩 希望能将头文件放入include ui文件放入ui 源文件放入src 为了将Qt代码和一般非Qt代码分离开 进一步地 将Qt源文件放入qt

  • 【Java】关于你不知道的Java大整数运算之BigInteger类超级好用！！！

    目录 一 BigInteger类简单介绍 二 BigInteger构造方式 1 构造方式 2 输入方式 三 BigInteger常见的成员方法 1 方法介绍 2 方法使用演示 1 加减乘除余 2 比较 3 绝对值和幂 4 转换成对应进制字符

  • java学习笔记——第八章 类和方法（二）

    8 4使用方法 java中的方法不能独立存在 他必须属于一个类或者一个对象 因此方法也不能像函数那样被独立执行 因此必须使用类或对象来调用 总结 方法不能独立定义 方法只能在类体中定义 逻辑上讲 方法要么属于该类本身 要么属于该类的一个对象

  • Flex布局实战详解

    Flex布局详解 1 父项属性 flex direction 设置主轴的方向 justify content 设置主轴上的子元素排列方式 flex wrap 设置子元素是否换行 align content 设置侧轴上的子元素排列方式 多行

热门标签