Flex布局

最新推荐文章于 2025-06-04 19:10:40 发布

神奇的undefined

最新推荐文章于 2025-06-04 19:10:40 发布

阅读量196

点赞数 1

分类专栏： CSS权威指南笔记文章标签： css css3

本文链接：https://blog.youkuaiyun.com/weixin_47330762/article/details/115696704

版权

CSS权威指南笔记专栏收录该内容

3 篇文章

订阅专栏

弹性容器中的所有内容都会成为一个弹性元素包括下列特例
1.文本节点

<body>
	<nav>
		<a href="/">Home</a>
		<a href="/">About</a>
		<a href="/">Blog</a>
		<a href="/">Careers</a>
		<a href="/">Contact Us</a>
		wwfwfa
	</nav>
</body>
<style>
	nav{
		display: flex;
		border-bottom: 1px dotted blue;
		justify-content: space-around;
	}
	a{
		margin: 0 5px;
		padding: 5px 15px;
		border-radius: 3px 3px 0 0;
		background-color: #ddaa00;
		text-decoration: none;
		color:#ffffff
	}
	a:hover,a:focus, a:active{
		background-color: #ffcc22;
		color: black;
	}
</style>

在这里插入图片描述
可以看到这个没有任何标签的文本也成为了弹性元素，所以纠正一个误区：弹性盒内的元素需要设置 display:block / inline-block
2.书中有提及：弹性容器中的绝对定位子元素也是弹性元素，不过确定其尺寸和位置时，将其视作弹性容器中唯一的弹性元素
个人理解：其实这个元素还是脱离了文档流，其实没有什么意义，如下图中，可以看到左边和右边的长度，相当于其中这个Blog离开文档的长度
在这里插入图片描述

在这里插入图片描述

Column 到底是横轴还是数轴

在横向书写模式中，指的是纵轴
在竖向书写模式中，指的是横轴

Row 到底是从左往右还是从右往左?
根据设定的书写模式来

writing-mode,direction,text-orientation

Column-reverse 只是外观上的修改，如果使用tab键寻找焦点的话，还是会从下网上的，会根据文档顺序寻找。

换行

如果弹性元素在主轴上放不下，默认情况下弹性元素不会换行，也不会自动调整尺寸。如果通过flex属性设定允许弹性元素缩减尺寸，那就缩减尺寸；否则，弹性元素将从容器框的边界溢出。

属性名：flex-wrap
取值：nowrap(默认) | wrap | wrap-reverse

tips:

正常情况下，换行是放在下一行，而 wrap-reverse 是将换行的显示在上方，也就是第一行被挤下去了
重新换行的 item 如果遇到 justify-content:space-around之类的调整位置的，会根据当前行剩下的空余量调整位置

在这里插入图片描述
简化写法
用 flex-flow 合并flex-direction 和 flex-wrap
例子： flex-flow: row wrap 其中顺序没关系随便写

在flex布局中，我们会说有主轴和垂轴（副轴），主轴在直接排布元素的时候就用上了，从主轴起边一直拍到主轴终边。但是垂轴只在flex-wrap:wrap | wrap-reverse的时候才启用，垂轴的方向和什么相关？第一和文字书写模式相关，第二是wrap还是wrap-reverse。所以其方向和书写模式垂直，满足从左到右|从上到下，如果设置了wrap-reverse则修改后者方向，始终和书写模式垂直。

一行内元素的分布

justify-content 控制一行里的弹性元素在主轴上分布
align-content 控制各弹性元素行在垂轴上分布
align-items 控制各行里的弹性元素在垂轴上分布

justify-content
取值：

flex-start:主轴起边
space-evenly:把剩下的部分均分
注意：如果该行中的元素溢出了，justify-content 还能控制溢出部分的排列

各种溢出的情况：

flex-start 和 flex-end:从各自的起点开始摆放，然后从终点溢出
center: 把一行中的中间位置和该容器的中间对齐，从两边溢出（两边溢出的尺寸一样）
space-between:溢出情况和 flex-start一样
space-around:溢出情况和 center 一样
space-evenly:溢出情况和 center 一样

align-items
解释：在不换行的时候本质上是垂轴的 justify-content 但是多一个 baseline 和 stretch(默认)
取值：

stretch：弹性元素将被拉伸，占据整个垂轴尺寸；但是如果设置了max-height,min-height,max-width,min-width,width,height后，则按设置的为准。
tips：书上写：

所有可拉伸的弹性元素将与所在行中最高或最宽的弹性元素一样高或一样宽

但是下面代码表明：如果设置了stretch的话直接拉的填满这个行

<body>
	<div class="contain">
		<div class="ball" id="a"></div>
		<div class="ball"></div>
		<div class="ball"></div>
		<div class="ball"></div>
	</div>
</body>
<style>
	.contain{
		border: #FF0000 1px solid;
		height: 800px;
		width: 800px;
		display: flex;
		align-items: stretch;
		
	}
	#a{
		height:300px ;
	}
	.ball{
		width: 80px;
		margin: 50px;
		background-color: #0000FF;
	}
	
	
</style>

在这里插入图片描述
align-self
align-self 和 align-items的区别：

align-self的默认值是auto ,align-items的默认值是stretch，如果没有设置align-self，则由align-items控制，设置了就按设置了的来

align-content
解释：定义弹性容器有额外的空间时在垂轴方向上如何对齐各 弹性元素行，以及空间不足放下弹性元素时从哪个溢出（所以它控制的是整行，而align-items控制的是行内）

属性值和 justify-content的第一样

小tips:其实两种content分配的都是余下空间，也就导致了，在数量上是中间那一个的列或行，可能不会居中。

弹性元素
1.特性：

弹性元素的外边距不折叠
float 和 clear属性对弹性元素不起作用 , 同是移除文档流的 position:absolute 却可以其作用，也就是设置了position:absolute 的元素不参与 flex，但是部分可继承的属性仍然可以继承
vertical-align 设置在容器上对弹性元素不起作用，设置在弹性元素上是让其中的文本设置位置

2.min-width:
只在wrap:nowrap的时候才有用
3.使用 flex 简化 flex-grow(0) , flex-shrink(1), flex-basis(auto)

flex-basis 弹性基准：在主轴上的基础尺寸，相当于 width/height, 如果一个弹性元素同时拥有 flex-basis 和 width/height, width/height 将绝对性的被忽略，但是如果有 min/max-height/width的设定，则以该限制为准
- 当其值为auto ( 不管是显示声明还是取默认值 ) 的时候，各元素的基准为内容不换行的宽度 （也就是自己的 width/height），如果width/height也是auto，则弹性基准为content
content 也就是 fit-content 正好包裹内容的尺寸
- 注意 flex-basis:0 那其中的元素完全按照 flex-grow 分配
flex-grow：其控制的是在剩余的空间分配时的比例关系
- tips:
  - 1.如果flex属性没有设定 flex-grow 和 flex-shrink ,则flex-grow 默认为1
  - 2.如果flex 和 flex-grow都没有声明，flex-grow 为0
  - 3.上文有提到 flex-basis:0 的情况，如果在此时 flex-grow又为0，那此时该元素在主轴上的长度将是内容允许的最小长度(content)
  - 4.只要发生了溢出，其中的width/height都会变成content或者声明的width或height，其中较小的一个：
  - 如果一个元素的width不能够将其自己全部显示，但是放入了flex容器中，通过flex对与宽度的忽略，也许就可以正常显示了，但是如果发生了溢出，那Min（content，width）的结果就是width保持不变，还是原来那个不可见的width
- flex-shrink
  - shrink 和 grow 不同 grow缩短的大小只和属性值相关，和元素自己本身的大小无关，但是

gorw	边长的大小只和属性值相关，和元素自己本身的大小无关
shrink	缩小的比例和自身大小和 shrink 的大小均相关: 缩小尺寸 = 自身大小 x (缺少的空间 / (宽度1 x shrink1) + (宽度2 x shrink2)+ … …)