如何讲清楚Flex弹性盒模型？(上)

原创

用户8639654

修改于 2021-07-13 18:08:58

30900

代码可运行

文章被收录于专栏：云计算运维云计算运维

运行总次数：0

代码可运行

一、什么是Flex弹性盒？

Flex弹性盒，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

当一个元素 display:flex 的时候，内部元素float会失效，vertical-align也会失效

因此我们至少能确定一点，flex替代了浮动的解决方案。

我们来看一下它的基本特点。

在flex容器当中，div这样的块元素不再独占一行

而是自动排成一行。

这个效果虽然和浮动很像, 但是请记住, 在flex的容器里, 不存在浮动的概念, 我将代码贴出来, 大家可以自行尝试.

<style type="text/css">
	html, body {
		padding: 0; margin: 15px;
	}
	.container {
		display: flex;
		height: 300px; width: 700px;
		box-shadow: 0 0 0 1px black;
	}
	div {
		width: 200px; height: 200px;
	}
	div:nth-child(1) {
		background-color: pink;
	}
	div:nth-child(2) {
		background-color: lightseagreen;
	}
	div:nth-child(3) {
		background-color: powderblue;
	}
</style>
<body>
	<section class="container">
		<div>
			<p>div容器</p>
			<p>width: 100px</p>
			<p>height: 100px</p>
		</div>
		<div>
			<p>div容器</p>
			<p>width: 100px</p>
			<p>height: 100px</p>
		</div>
		<div>
			<p>div容器</p>
			<p>width: 100px</p>
			<p>height: 100px</p>
		</div>
	</section>
</body>

dispplay: flex的元素，称为Flex容器（flex container），它的所有子元素称为Flex项目（flex item）。

在flex容器当中, 项目的排列方式默认是row(水平的). 可以使用flex-direction属性进行更改

.container {
    display: flex;
    flex-direction: row;  /*这是默认值, 按照row(水平方向)排列*/
}

如果将这个属性进行更改column

.container {
    display: flex;
    flex-direction: column;  /* 按照列column(垂直方向)排列*/
}
效果如下:

你看, flex容器里的项目, 变成了垂直方向, 由上至下排列

对于一个flex容器来说, 子项目的排列方向, 只有row和column这两种

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

容器

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

容器

登录后参与评论

0 条评论

热度