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