css3中彈性盒修改主軸方向


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 500px;
				height: 500px;
				border: 2px solid black;
				margin: 0 auto;
				display: flex;
				flex-direction: row-reverse;
				/**
				 * flex-direction: row; 主軸是行(默認)
				 * flex-direction: column; 主軸是列
				 * flex-direction: row-reverse; 從右向左排
				 * flex-direction: column-reverse; 從下向上排
				 */
			}
			.box div{
				width: 100px;
				height: 100px;
				border: 1px dashed red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>111</div>
			<div>222</div>
			<div>333</div>
			<div>444</div>
		</div>
	</body>
</html>

  上一篇:[css3中新增彈性盒]

       下一篇:[css3中彈性盒主軸側軸對齊方式]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM