HTML-CSS（五十五）Flex弹性盒模型

最新推荐文章于 2023-09-13 08:43:56 发布
最新推荐文章于 2023-09-13 08:43:56 发布
阅读量444 收藏 1
点赞数 1
分类专栏： HTML css3 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44730244/article/details/116477391
版权
HTML 同时被 3 个专栏收录
67 篇文章 2 订阅
订阅专栏
CSS
65 篇文章 3 订阅
订阅专栏
css3
30 篇文章 1 订阅
订阅专栏

Flex：简便完整、响应式的实现各种页面布局。现在各种浏览器支持
属性
在这里插入图片描述
示例：垂直居中
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent{
				width: 400px;
				height: 400px;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px black solid;
			}
			.child{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				
			</div>
		</div>
	</body>
</html>

弹性盒模型的布局前提：父容器必须设置为flex弹性盒模型（display:flex），才能对父容器的子元素进行弹性操作。一旦设置之后，所有的子元素会默认都排在主轴，在以主轴的起始位置对齐。（下文会提及什么是主轴和侧轴）。侧轴：在不设置高度前提下子项会自动沾满一列
在这里插入图片描述
当全部子元素宽度总和超过了父元素的宽度时，子元素会自己调节自己的宽度，让子元素只能占据一行
在这里插入图片描述
但是当子元素的内容宽度超出了最大适配范围之后，子元素的内容就会自己接到父容器的后面。
在这里插入图片描述
作用在父容器上的属性：
**flex-direction:**用来控制整体布局方向，是从右到左，还是从左到右，是从上到下，还是从下到上
在这里插入图片描述
原图：
在这里插入图片描述
flex-direction:row-reverse 效果图：
注意：除了方块的排列顺序是反的外，它的起点还是靠右侧的
在这里插入图片描述
flex-direction:column 效果
在这里插入图片描述
flex-direction:column-reverse 效果图
在这里插入图片描述
flex-wrap:用来控制子项整体单行显示还是换行显示
原图：默认：flex-wrap:nowrap
在这里插入图片描述
flex-wrap:warp 换行 效果图：
在这里插入图片描述
可以看出，上面虽然换行啦，但是行与行之间有很大的空隙。这个与设置了高度有关，下文会提及。
flex-warp:warp 换行并且反向 效果图

在这里插入图片描述
flex-flow属性时flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性一个值表示是方向，第二个值表示换行，中间用逗号隔开
flex-flow:column wrap;
在这里插入图片描述
justify-content:决定主轴方向上子项的对齐和分布方式
在这里插入图片描述

主轴：与flex-direction设置的方向一致的就是主轴（默认就是x轴向右）
原图：默认justify-content：flex-start
在这里插入图片描述
justify-content:flex-end
与flex-direction:row-reverse区别在于顺序没有变更
在这里插入图片描述
justify-content：center 主轴方向元素紧挨着，并且水平居中显示
在这里插入图片描述
justify-content：space-around
在这里插入图片描述
注：边缘两侧的空白只有中间空白的宽度的一半。因为中间空隙相当于左边的元素右空隙+右边元素的左空隙
justify-content:space-between
在这里插入图片描述
justify-content:space-evenly
与space-around的区别在于每个子元素的两侧分到空白区域都是一样的。连边缘也一致
在这里插入图片描述
改变主轴反向之后，justify-content原理也是一样的
多行情况下，每一行排列方式还是不受干扰的。
在这里插入图片描述

针对空白区域的操作，还是按照等比划分。
align-items:items指的是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
侧轴:与主轴垂直的方向
在这里插入图片描述
默认：align-item:stretch：所有元素会自动拉伸，这就是弹性布局的特性
单行效果：
在这里插入图片描述
多行效果：
在这里插入图片描述
设置高度之后的效果：（中间有间隙的原因，因为弹性布局的原因，在这个例子中每行元应该占据父元素的50%，但是设置了高度没有显示出沾满的效果，也就出现了空隙）
在这里插入图片描述
align-item:flex-start（未设置高度，高度全靠内容撑开）
单行效果：
在这里插入图片描述
多行效果：
在这里插入图片描述
注意：给子元素设置高度之后，默认的align-items：stretch与align-item：flex-start效果一样
在这里插入图片描述
align-item:flex-end
单行效果：
在这里插入图片描述
多行效果：
在这里插入图片描述
设置高度之后：
在这里插入图片描述

align-item:center
单行效果
在这里插入图片描述
多行效果：
在这里插入图片描述
别看这个图跟flex-end类似，其实不一样的。先把父容器划分上50%下50%。然后center是在每一部分的中间部分。而flex-end则是每一部分的底部
设置高度之后的效果：
在这里插入图片描述
align-item:baseline 以文字排列对齐
原图：
在这里插入图片描述
效果图：
在这里插入图片描述

align-content:可以看成是和justify-content相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
在这里插入图片描述
align-content:flex-start
在这里插入图片描述
align-content:flex-end
在这里插入图片描述
align-content:space-around
在这里插入图片描述
align-content:strecth
在这里插入图片描述
align-content：center
在这里插入图片描述
align-content: space-between;
在这里插入图片描述
注意：align-content对单行是不起作用的
在这里插入图片描述
作用在子元素的属性

还是一样。记得先给父容器设置display：flex，让容器变成弹性盒模型
在这里插入图片描述
order：（默认值 0）
在这里插入图片描述
flex-grow(当容器有剩余空间才起作用 默认值0)
原图：
在这里插入图片描述
有剩余空间：
在这里插入图片描述
没有剩余空间：没有效果
在这里插入图片描述
当flex-grow值小于1时，说明元素可以占剩余空间的百分之几。flex-grow：1将剩余空间沾满。如果有多个元素都有flex-grow时，将剩余空间按照他们设置flex-grow占比进行分配
flex-shrink(当没有剩余空间才起作用 默认值1)
在这里插入图片描述
当flex-shrink小于1时，表示变化后是比当前更大的。

大于1是是比当前更小的。当你不想让元素收缩时，设置flex-shrink：0即可

注意：当有剩余空间的条件下，一个收缩，一个扩张。那么收缩是不起作用的
在这里插入图片描述
当没有剩余空间的条件下，一个收缩，一个扩张。那么扩张是不起作用的
在这里插入图片描述
反正就记住：有剩余空间，跟flow-shrink没有关系的
flex-basis:就是可以指定某个子项的默认大小。与width差不多

这是设置width的
在这里插入图片描述
这是flex-basis的
在这里插入图片描述
注意：1.flex-basis的值是像素值，带单位的。
2.当width和flex-basis同时设置时，flex-basis的权重值高于width
在这里插入图片描述
3.因为flex-basis和width作用一样。所以设置的值不是一成不变的，该怎么压缩还是怎么压缩。该怎么扩张还是怎么扩张
**flex：**属于flex-grow，flex-shrink，flex-basis复合写法
flex：flex-grow flex-shrink flex-basis

只写一个值：flex-grow

原图：（只在父容器设置了 display:flex）
在这里插入图片描述
flex:1 0 100px;(只改变 flex-basisi：其他都是默认值 不收缩，不扩张，默认宽度100px )
没有剩余空间：
在这里插入图片描述
因为box2的默认宽度比其他的宽度要小，所以收缩程度也会比其他的子项更大些
有剩余空间：

就是除了设置默认宽度之外，其他毫无变化
在这里插入图片描述
flex：0 1（不扩张 不收缩 默认宽度为0）
有剩余空间
在这里插入图片描述
因为之前说过，flex-basis的权重值比width的高，所以设置了flex：0 1 之后相当于该子项的宽度为0，宽度完全靠内容撑起
没有剩余空间：（结局还是一样的 因为没有宽度）
在这里插入图片描述
所以说：只要该子项设置默认宽度为零（flex-basis：0）或者该子项的宽度为0（width：0），所有对该子项的收缩和扩张都无效。

其他的效果变化，都是按照原有的flex-grow 、 flex-shrink和flex-basis变化来的。就不多做解释了
align-self:(只作用垂直方向、与align-item对侧轴的操作一致，唯一的区别在于align-item 对多个子项操作，只有设置align-self的子项才有效果)
在这里插入图片描述
练习（一）骰子的点数
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.tuozi {
				display: flex;

			}

			.public {
				width: 200px;
				height: 200px;
				background-color: gainsboro;
				margin: 20px;
			}
			.tuozi div ul li {
				width: 50px;
				height: 50px;
				background-color: #000000;
				border-radius: 25px;
			}

			/* 一点 */
			.tuozi .one {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			/* 两点 */
			.tuozi .two ul {
				display: flex;
				height: 100%;
				justify-content: space-between;
			}

			.tuozi .two ul li:nth-child(2) {
				align-self: flex-end;
			}

			/* 三点 */
			.tuozi .three ul {
				display: flex;
				height: 100%;
				justify-content: space-between;
			}

			.tuozi .three ul li:nth-child(2) {
				align-self: center;
			}

			.tuozi .three ul li:nth-child(3) {
				align-self: flex-end;
			}

			/* 四点 */
			.tuozi .four {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.touzi .four .line2{
				/* align-items: flex-end; */
			}
			.tuozi .four div ul{
				display: flex;
				justify-content: space-between;
			}
			/* 五点 */
			.tuozi .five{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.tuozi .five .line2 ul{
				display: flex;
				justify-content: center;
				
			}
			.tuozi .five .line ul{
				display: flex;
				justify-content: space-between;
			}
			.tuozi .six{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.tuozi .six .line ul{
				display: flex;
				justify-content: space-between;
			}
		</style>
	</head>
	<body>
		<div class="tuozi">
			<div class="one public">
				<ul>
					<li></li>

				</ul>
			</div>
			<div class="two public">
				<ul>
					<li></li>
					<li></li>

				</ul>
			</div>
			<div class="three public">
				<ul>
					<li></li>
					<li></li>
					<li></li>

				</ul>
			</div>
			<div class="four public">

				<div class="line1">
					<ul>
						<li>1</li>
						<li>2</li>
					</ul>
				</div>
				<div class="line2">
					<ul>
						<li></li>
						<li></li>
					</ul>
				</div>

			</div>
			<div class="five public">
				<div class="line1 line">
					<ul>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="line2">
					<ul>
						<li></li>
					</ul>
				</div>
				<div class="line3 line">
					<ul>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
			<div class="six public">
				<div class="line">
					<ul>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="line">
					<ul>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="line">
					<ul>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>

	</body>
</html>

练习二 两侧固定、中间自适应
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.contain{
				display: flex;
			}
			.fix{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			.center{
				height: 200px;
				flex-grow: 1;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="contain">
			<div class="fix"></div>
			<div class="center"></div>
			<div class="fix"></div>
		</div>
	</body>
</html>
每天进步一大步
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3---弹性盒子模型
qq_45802159的博客
11-23 797
Flex 布局 Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box { display: flex; } 行内元素也可以使用 Flex 布局。 .box { display: inline-flex; } 注意，设为 Flex 布局以后，子元素的float、...
CSS3 中弹性盒模型--容器的属性
weixin_30457881的博客
05-30 133
1、display : flex | inline-flex注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性 将失效。 2、flex-direction属性 决定主轴的方向（即项目的排列方向） flex-direction: row | row-reverse | column | column-reverse; 3、flex-wrap属性，定...
html5 弹性盒子
misma123的博客
02-26 270
弹性盒子
html弹性盒模型,CSS3 Flexbox属性与弹性盒模型
weixin_42551227的博客
06-07 183
简介CSS3新增的Flexible Box Layout(弹性盒模型布局方式)是CSS3规范中提出的一种新的布局方案。该布局方案提供了一种更加高效简单的方式来处理容器中的元素布局、对齐、空间分配等操作，即使容器中的元素尺寸未知(或者尺寸大小是动态的)也能工作得很好。目前CSS3提出的此种布局方式也被各大主流浏览器所支持，可以预见Flexbox Layout在未来将会被广泛使用。本文将详细的介绍该布...
html中的弹性盒子模型,CSS3 - 弹性盒子模型(flexbox)详解3（伸缩项目的属性介绍、及样例）...
weixin_42613501的博客
06-07 213
三、伸缩项目的相关属性说明1，order属性该属性用于定义项目的排列顺序。数值越小、排列越靠前，默认值为：0。比如我们将 item4排到最前面：hangge.com.flex-container{display: flex;border: 1px solid black;width: 300px;height: 120px;}#item4{order: -1;}.flex-item{width: ...
深入剖析CSS弹性盒模型flex
09-24
在深入探讨CSS弹性盒模型flex之前，我们首先要了解CSS3引入的这一新的布局模型——flex布局。弹性盒模型（flexbox）被设计来提供一种更加灵活和有效的方式来布局容器内的项目。它的出现旨在简化垂直居中、项目对齐和...
CSS弹性盒模型flex在布局中的应用详解
09-24
CSS弹性盒模型（Flexbox）是一种现代的布局模式，它为复杂的网页布局提供了一种更为灵活的方法。在传统的CSS布局中，如浮动和定位，往往难以处理多行或多列的动态内容，而Flexbox则可以轻松实现这些需求。本文将深入...
实例讲解CSS3中的box-flex弹性盒属性布局
09-24
CSS3中的`box-flex`是弹性盒模型的一部分，它允许开发者创建动态的、自适应的布局，能够根据可用空间自动调整元素的大小和位置。在Web开发中，flex布局已经成为了构建响应式和灵活界面的标准工具，因为它克服了传统...
几个CSS3的flex弹性盒模型布局的简单例子演示
09-24
`display:flex`属性用于开启弹性盒模型，这在现代浏览器中是标准的语法。然而，为了确保向后兼容，代码还包含了不同浏览器的前缀版本，如`-webkit-`, `-moz-`, `-ms-`, `-o-`。 `flex-direction`属性控制子元素...
HTML5+CSS3-基础08-弹性盒模型
weixin_47402645的博客
04-28 378
HTML5+CSS3-基础08-弹性盒模型弹性盒模型父元素属性子元素属性（flex item） 弹性盒模型 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子...
flex-shrink (适用于弹性盒模型容器子元素)
weixin_34413065的博客
06-01 180
设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。） 语法 flex-shrink: <number> (default 1) flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。 本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可...
css今日学习：弹性盒子
m0_46387864的博客
04-27 1169
弹性盒子（flex） 描述：通过两个轴控制容器内的项目,默认x轴为主轴，y轴为副轴 常用属性： 在容器上的属性 flex-direction 控制主轴方向：默认x轴是主轴 属性： column 纵向，上到下 column-reverse 反纵向，下到上 row 横向，左到右 row-reverse 反横向，右到左 flex-wrap 控制超出的项目进行换行。 属性： nowrap 不换行，项目会等比缩放在一行 wrap 换行，按容器的副轴的宽度等分 wrap-reverse 反wrap换行 flex-flo
CSS-盒子模型
john的博客
07-14 100
box-sizing属性 盒子的width、height数字就表示盒子的实际占有宽度（不含margin）即padding、border变成“内缩”、不再“外扩”
CSS的盒模型
Raccon_的博客
11-23 348
CSS CSS3 怪异盒 box-sizing:border-box; 属性值  content-box 默认 边框及内边距会将盒子撑大  border-box 盒子大小为width 弹性盒 flex是flexible box的缩写 任意一个容器都可以指定为flex布局。 当把父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 父项属性 flex-direction 设置主轴的方向
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1407
Document
flex弹性盒子
qq_31261131的博客
04-21 280
转载自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 任何元素都能被指定为一个flex容器，使用display:flex即可 flex容器下一级子元素都会被看作是flex-item，也叫flex元素； flex容器有一套css...
移动web前端基础知识三(部分) 弹性布局上
qq_53172414的博客
07-20 443
如果父级加了displayflex属性,标签不再分类,不再有块级元素和行内元素包括行内块之分,任何一个元素都可以直接给宽度和高度一行显示Flex不存在脱标的情况也就是基本淘汰了浮动，更不用清除浮动兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接displayflex。............
弹性盒子的缩放机制是怎样的？
最新发布
m0_71955188的博客
09-13 119
flex属性有三个值：flex-grow、flex-shrink和flex-basis。 flex-grow：指定弹性的子项的放大比例，默认值为0，当设置为0的时候，子项不会根据剩余的空间进行伸缩。当设置为正数的时候，子项会按照比例进行分配剩余的空间。 flex-shrink：指定弹性盒子的缩小比例，默认值为1.当可用空间不足时，子项根据，flex-shrink的比例进行缩小，可以设置为0，表示子项不允许缩小。 flex-basis：指定弹性子项在主轴的初始大小，默认值为auto，可以设置为具体长度值(如：
flex 高度或者宽度被拉伸解决方案
明耀的博客
01-09 8732
<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } .a {width: 100px;} 正常两栏布局，但如果b得子元素太宽，会撑开b，导致a的宽度被挤小 将b的宽度设置为width: 0;，就可以解决 总结： flex布局，如果自身高度或者宽度被拉伸了，直接把自己的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值