CSS属性之 Flex介绍

最新推荐文章于 2023-04-28 09:54:05 发布

mm jiao

最新推荐文章于 2023-04-28 09:54:05 发布

阅读量193

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qiao_xi/article/details/102487702

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

flex 属性

用于设置或检索弹性盒模型对象的子元素如何分配空间

flex-flow: flex-direcation flex-wrap;
flex-direcation
row: 水平显示;
row-reserve: 水平反方向显示;
column: 垂直显示;
column-reserve: 垂直反方向显示;
flex-wrap:
nowrap: 不拆行(列)；
wrap: 必要时进行拆行(列);
wrap-reserve: 必要时进行拆行(列),且以相反方向;
flex-basis: 第二个弹性盒子的长度
flex-grow:规定项目相对其他灵活的项目进行扩展的量(实例类似 flex-shrink)
flex-shrink: flex-shrink 属性指定了 flex 元素的收缩规则。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}

.box { 
  flex-shrink: 1;
}

.box1 { 
  flex-shrink: 2; 
}
</style>
</head>
<body>

<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

</body>
</html>

解析
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2

我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化通过收缩因子，所以加权综合可得 1001+1001+1001+1002+100*2=700px。

于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：

A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。

三栏布局

<html style = "height: 100%">
	<head>
		<meta charset="utf-8">
		<title>flex</title>
		<style type="text/css">
			.container{
				height: 100%;
				width: 100%;
				display: flex;
			} 
			.container div{
				flex-grow: 0;
				flex-shrink: 1;
				flex-basis: 100%;
				flex-direction: row;//排列方式
			}
			.left{
				height: 100%;
				width: 200px;
				background-color: aquamarine;
				border: 1px solid aquamarine;
				/* float: left; */
			}
			.main{
				height: 100%;
				background-color: rosybrown;
				border: 1px solid rosybrown;
				/* margin-left: 200px;
				margin-right: 200px; */
			}
			.right{
				height: 100%;
				width: 200px;
				background-color: greenyellow;
				border: 1px solid greenyellow;
				/* float: right; */
			}
		</style>
	</head>
	<body style="height: 100%;">
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
			<div class="main"></div>
		</div>
	</body>
</html>