首页 > 网站 > WEB开发 > 正文

伸缩布局的主轴布局方向详解+注释

2024-04-27 15:07:20

字体：大中小

来源：转载

供稿：网友

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	body{
	background-color: #eee;
	}
	*{
	margin:0;
	padding: 0;
	list-style: none;
	}

	section{
	width: 1000px;
	margin:10px auto;
	}
	ul{
	background-color: #fff;
	border: 1px solid red;
	}
	li{
	width: 150px;
	height: 150px;
	background-color: pink;
	margin:10px;
	}
	section:nth-child(1) ul{
	overflow: hidden;
	}
	section:nth-child(1) ul li{
	float: left;

	}

	section:nth-child(2) ul{
	/设置伸缩布局/
	display:flex;
	}

	section:nth-child(3) ul{
	display: flex;
	/主轴方向 row 水平向右/
	flex-direction: row;
	}

	section:nth-child(4) ul{
	display: flex;
	/主轴方向 row 水平向左/
	flex-direction: row-reverse;
	}

	section:nth-child(5) ul{
	display: flex;
	/主轴方向 column/
	flex-direction: column;
	}

	section:nth-child(6) ul{
	display: flex;
	/主轴方向 column/
	flex-direction: column-reverse;
	}

	</style>
	</head>
	<body>
	<section>
	<h4>传统网页布局</h4>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ul>
	</section>

	<section>
	<h4>伸缩布局 display:flex</h4>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ul>
	</section>
	<section>
	<h4>伸缩布局主轴方向：row</h4>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ul>
	</section>

	<section>
	<h4>伸缩布局主轴方向：row-reverse</h4>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ul>
	</section>

	<section>
	<h4>伸缩布局主轴方向：column 竖直从上向下</h4>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ul>
	</section>

	<section>
	<h4>伸缩布局主轴方向：column-reverse 竖直从下向上</h4>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ul>
	</section>
	</body>
	</html>

上一篇：&lt;meta&gt;标签中name和http-equiv的区别

下一篇：如何学习前端知识？

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿创2023年5月以来最大单周涨幅

2024-04-27 13:35:46

雷军：小米正在申请3万件专利，以提升自身的竞争力

2024-04-27 13:33:47

人参泡酒15年后竟“复活”？网友：这酒还能喝不？

2024-04-24 22:53:44

芯片股普涨！英伟达市值一夜大涨6000亿元

2024-04-23 19:32:50

面馆老板1天卖100碗刚够交房租要卖到150碗才能实现盈利

2024-04-23 19:25:50

跌近30%！茶百道上市一小时跌没3年净利润

2024-04-23 19:13:19

疑难解答

图片精选

网友关注