flex弹性布局教程-09-容器属性flex-flow

最新推荐文章于 2023-05-19 22:48:02 发布

晴空闲雲

最新推荐文章于 2023-05-19 22:48:02 发布

阅读量2.6k

点赞数 3

分类专栏：快乐编程-flex实践教程文章标签： css flex flexbox

本文链接：https://blog.csdn.net/chenjiebin/article/details/120462775

版权

快乐编程-flex实践教程专栏收录该内容

13 篇文章 34 订阅

订阅专栏

本节目标

掌握flex-flow的使用，flex-flow是flex-direction和flex-wrap的合集。
掌握上左右下的布局编写技巧。

内容摘要

本篇介绍了容器属性 flex-flow，是flex-direction和flex-wrap的合集，前面有讲解过相关属性了。这边就来做个应用。

阅读时间大约10~15分钟。

flex-flow基础

flex-flow属性flex-flow是flex-direction和flex-wrap的合集。语法格式如下：

.container {
	flex-flow: flex-direction flex-wrap;
}

其中：

默认值为：row nowrap，意思就是主轴方向水平向右，不换行。

这边两个属性前面两章都讲解过了，就不再赘述。下面来个实务中常用的例子。

flex-flow应用

实例1，实现如下上左右下布局，要求屏幕宽度变化时能够自动适应：
在这里插入图片描述
我们可以看出这个是一个移动端的页面，如果按照之前使用 div+css，样式使用float的方式来做，左边和右边要固定尺寸，要自适应就没有办法了。

这边我们用 flex 来试试，非常简单，总共步骤分为7步，4~6步是flex相关的设置。

1）写出html代码：

<div class="container">
	<div class="header">头部</div>
	<div class="left">左边</div>
	<div class="right">右边</div>
	<div class="footer">尾部</div>
</div>

html代码很简单，就是一个container容器，包含4个div。现在页面显示就是这样4个div：
在这里插入图片描述
2）设置 * 的 margin 和 padding 为0：

* {
	margin: 0;
	padding: 0;
}

这个是为了移除所有元素的默认边距和内边距，方便精确计算和设置。

3）设置 div 的背景色：

.header,
.left,
.right,
.footer {
	background-color: lightblue;
}

运行效果如下：
在这里插入图片描述
上面铺垫了一些步骤，下面就是 flex 布局的关键步骤了。

4）设置容器为 flex 弹性布局，根据页面布局大小来看header和footer宽度为100%：

.container {
	display: flex;
}

.header,
.footer {
	flex-basis: 100%;
}

运行效果如下：
在这里插入图片描述
但是这样并没有效果，我们知道如果项目总宽度超过容器，那么项目会自己压缩，如果能自己换行就好了。

5）设置容器内项目自动换行：

.container {
	display: flex;
	/* 设置容器内项目自动换行 */
	flex-flow: wrap;
}

可以直接用 flex-wrap，用flex-flow也是可以的。

运行效果：
在这里插入图片描述
按照预想的显示，下面再对left和right处理一下即可。

6）设置left和right的宽度，这边用flex-grow来占用剩余空间。

.left {
	flex-grow: 1;
}
.right {
	flex-grow: 3;
}

运行效果：
在这里插入图片描述
至此 flex 布局的关键代码就完了。后面我们再设置一下项目的高度和间距就好了。

7）设置项目的高度和间距：

.header,
.footer {
	height: 6.25rem;
}

.header {
	margin-bottom: 0.625rem;
}

.left {
	height: 18.75rem;
}

.right {
	height: 18.75rem;
	margin-left: 0.625rem;
}

.footer {
	margin-top: 0.625rem;
}

运行效果：
在这里插入图片描述
最后来一个完整代码，flex相关的代码都加了标注：

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8">
		<title>上左右下弹性布局</title>
	</head>
	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.header,
			.left,
			.right,
			.footer {
				background-color: lightblue;
			}

			.container {
				/* 设置容器为flex布局 */
				display: flex;
				/* 设置容器内项目自动换行 */
				flex-flow: wrap;
			}

			.header,
			.footer {
				/* 设置header和footer宽为100% */
				flex-basis: 100%;
				height: 6.25rem;
			}

			.header {
				margin-bottom: 0.625rem;
			}
			
			.left {
				/* 设置left的放大系数 */
				flex-grow: 1;
				height: 18.75rem;
			}
			
			.right {
				/* 设置right的放大系数 */
				flex-grow: 3;
				height: 18.75rem;
				margin-left: 0.625rem;
			}
			
			.footer {
				margin-top: 0.625rem;
			}
		</style>
		<div class="container">
			<div class="header">头部</div>
			<div class="left">左边</div>
			<div class="right">右边</div>
			<div class="footer">尾部</div>
		</div>
	</body>
</html>

本节总结

flex-flow是flex-direction和flex-wrap的合集。
通过宽度和换行属性的结合可以巧妙的实现不同的布局。

晴空闲雲

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
flex弹性布局教程-09-容器属性flex-flow

本篇介绍了容器属性 flex-flow，是flex-direction和flex-wrap的合集，前面有讲解过相关属性了。这边就来做个应用。阅读时间大约10~15分钟。
复制链接

扫一扫