flex弹性盒子布局

最新推荐文章于 2023-09-12 10:23:21 发布

二木成林

最新推荐文章于 2023-09-12 10:23:21 发布

阅读量877

点赞数 1

分类专栏： # CSS 文章标签： CSS flex弹性盒子布局

本文链接：https://blog.csdn.net/cnds123321/article/details/104186933

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

flex弹性布局的简单使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>首页</li>
			<li>公告</li>
			<li>热点</li>
			<li>联系</li>
		</ul>
	</body>
</html>

由于li标签是块级元素，所以浏览器显示如下：

那么如何让它变成一行呢，可以使用浮动进行设置，但是这里使用flex弹性盒子进行布局。

为上面的style标签下添加如下CSS代码如下：

ul {
    /* 让父级容器添加“display: flex;”变成弹性盒子 */
    /* 让行级元素变成块级元素 */
    display: flex;
    /* 让父级容器添加排列方向，默认是水平排列，row表示水平方向排列，column表示垂直方向排列 */
    flex-direction: row;
}

其中“display:flex;"是为要进行布局的元素的父级元素添加的，比如说这里要布局li元素，所以就给ul元素添加flex即可。

而”flex-direction:row"表示让flex布局下的子元素水平排列布局，而“flex-direction:column"表示让子级元素垂直排列，比使用浮动更简单。

等分布局

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

			ul {
				/* 使用flex弹性盒子布局 */
				display: flex;
			}

			li {
				/* 使每个li等分宽度 */
				flex: 1;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
		</ul>
	</body>
</html>

预览效果如下：

为要进行等分布局的父级元素添加”display:flex"，为li元素添加“flex:1"即每个li都占四分之一的宽度，就实现了所谓的等分布局。

不等分布局

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

			ul {
				/* 使用flex弹性盒子布局 */
				display: flex;
			}

			li {
				border: 1px solid red;
			}

			.li1 {
				/* 占十分之一 */
				flex: 1;
			}

			.li2 {
				/* 占十分之二 */
				flex: 2;
			}

			.li3 {
				/* 占十分之三 */
				flex: 3;
			}

			.li4 {
				/* 占十分之四 */
				flex: 4;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
		</ul>
	</body>
</html>

浏览效果：

分别为设置了"display:flex"的子元素设计flex的值，计算比例。

左固定右响应布局

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

			ul {
				/* 使用flex弹性盒子布局 */
				display: flex;
			}

			li {
				border: 1px solid red;
				text-align: center;
			}

			.li1 {
				/* 占300px */
				flex: 300px;
			}

			.li2,
			.li3,
			.li4 {
				/* .li2,.li3,li4平分剩下的宽度 */
				flex: 1;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
		</ul>
	</body>
</html>

浏览效果如下：

设定flex弹性盒子布局，给子级元素li添加”flex“值，设置li1的元素为固定布局，即300px，而其余三个元素li2,li3,li4平分剩下的宽度。

多行拆行布局

给父级元素添加”flex-warp:warp"表示超过宽度拆行（即起新的一行）进行处理。flex-wrap:nowrap表示不拆行，默认是不拆行的。

看如下代码：

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

			ul {
				/* 使用flex弹性盒子布局 */
				display: flex;
				/* 设置一个固定宽度 */
				width: 300px;
			}

			li {
				border: 1px solid red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
		</ul>
	</body>
</html>

浏览效果如下：

发现文字被换行了，宽度被压缩了。

将ul的CSS样式修改为如下：

ul {
    /* 使用flex弹性盒子布局 */
    display: flex;
    /* 给定一个固定宽度 */
    width: 300px;
    /* 子级元素多行进行拆行处理 */
    flex-wrap: wrap;
}

再次运行效果如下：

会发现文字内容没有换行，而多余的子元素被拆行了。

子级元素横向排列

给父级元素添加“justify-content:center"表示使子级元素横向排列居中显示。其他的值如”flex-start"表示默认居左排列；“flex-end"表示居右排列；”center“表示居中排列；”space-between"表示两端对齐；“space-around"表示元素两边间距一样。

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

			ul {
				/* 使用flex弹性盒子布局 */
				display: flex;
				/* 给定一个固定宽度 */
				width: 600px;
				/* 设定一个边界进行观察 */
				border: 1px solid blue;
				/* 子级元素横向排列居中 */
				justify-content: center;
			}

			li {
				border: 1px solid red;
				text-align: center;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
		</ul>
	</body>
</html>

效果如下：

子级元素纵向排列

给父级元素添加”align-items:center"表示子级元素纵向居中排列。其他的值跟justify-content的值用法差不多。

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

			ul {
				/* 使用flex弹性盒子布局 */
				display: flex;
				/* 给定一个固定宽度 */
				width: 600px;
				/* 给定一个固定高度便于观察 */
				height: 200px;
				/* 设定一个边界进行观察 */
				border: 1px solid blue;
				/* 子级纵向排列居中 */
				align-items: center;
			}

			li {
				border: 1px solid red;
				text-align: center;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
		</ul>
	</body>
</html>

浏览效果如下：

还有个align-content，其值和上面两个差不多，只是该属性在有折行的情况才能显示出效果：

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

			ul {
				/* 使用flex弹性盒子布局 */
				display: flex;
				/* 给定一个固定宽度 */
				width: 400px;
				/* 给定一个固定高度便于观察 */
				height: 200px;
				/* 设定一个边界进行观察 */
				border: 1px solid blue;
				/* 子级元素折行处理 */
				flex-wrap: wrap;
				/* 子级元素横向居中布局 */
				justify-content: center;
				/* 在有折行的情况下，纵向居中排列 */
				align-content: center;
			}

			li {
				border: 1px solid red;
				text-align: center;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
			<li class="li1">首页</li>
			<li class="li2">公告</li>
			<li class="li3">热点</li>
			<li class="li4">联系</li>
		</ul>
	</body>
</html>

二木成林

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
flex弹性盒子布局

flex弹性布局的简单使用<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>测试</title> <style type="text/css"> * { margin: 0; padding: 0;...
复制链接

扫一扫