flex布局快速牢记的方法

最新推荐文章于 2022-11-25 11:48:41 发布

myazwj

最新推荐文章于 2022-11-25 11:48:41 发布

阅读量202

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/myazwj/article/details/120773287

版权

1.听说像这样写一遍flex布局效果会很好~

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		ul {
			list-style: none;
			width: 90px;
			height: 90px;
			background-color: #ccc;
			border-radius: 5px;
			margin: 10px;
			padding: 0;
			float: left;
			display: flex;
		}

		ul li {
			width: 20px;
			height: 20px;
			background-color: red;
			border-radius: 50%;
		}

		.yi {
			/* 表示的是决定子元素在主轴上的对齐方式 */
			justify-content: center;
			/* 决定子元素在交叉轴的对其方式 */
			align-items: center;
		}

		.er {
			/* 让子元素两端对齐 */
			justify-content: space-around;
			align-items: center;
			/* 主轴为竖直方向。排列为从上至下。 */
			flex-direction: column;
		}

		.san {
			justify-content: space-around;

		}

		.san li {
			margin: 5px;
		}
		/* .four li {
			margin: 5px;
		} */

		.san li:nth-child(2) {
			/* 居中对齐弹性对象元素内的某个项： */
			align-self: center;
		}

		.san li:nth-child(3) {
			/* 元素位于容器的结尾 */
			align-self: flex-end;
		}
		
		/* 现在实现的是三饼的右边对齐 */
		.san1{
			justify-content: space-around;
		}
		.san1 li{
			margin: 5px;
		}
		.san1 li:nth-child(2){
     align-self: center;
		}
		.san1 li:nth-child(1){
     align-self: flex-end;
		}
		.four {
			flex-wrap: wrap;
		}

		.four li {
			/* 居中对齐弹性对象元素内的某个项： */
			margin: 12.5px;
		}

		.five {
			flex-wrap: wrap;
		}
		.five li:nth-child(3){
			margin: 0 35px;
		}
		.five li {
			margin: 8px 12.5px;
		}
	</style>
</head>

<body>
	<p>我们现在想的是怎么实现flex布局达到我们想的那样</p>
	<!-- 一饼实现 -->
	<ul class="yi">
		<li></li>
	</ul>
	<!-- 二饼 -->
	<ul class="er">
		<li></li>
		<li></li>
	</ul>
	<!-- 三饼 -->
	<ul class="san">
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<!-- 三饼 -->
	<ul class="san1">
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<!-- 四饼 -->
	<ul class="four">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<!-- 五饼 -->
	<ul class="five">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>

</html>

myazwj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局快速牢记的方法

1.听说像这样写一遍flex布局效果会很好~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
复制链接

扫一扫