flex的布局：

最新推荐文章于 2024-09-30 14:01:51 发布

浅沫......

最新推荐文章于 2024-09-30 14:01:51 发布

阅读量77

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/luoyuanye2003110/article/details/128081713

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           .bigbox{
               width: 1200px;
               height: 800px;
               border: 1px solid green;
               margin: auto;

               display: flex;/* 设置父盒子为flex容器 */
               /* 决定主轴的方向:flex-direction
                   row:默认以行为主轴(从左往右);
                   row-reverse:行反转(从右往左);
                   column: 以列为主轴(从上到下);
                   column-reverse:列反转(从下往上); */
               /* flex-direction: column; *//* 决定主轴的方向 */
               flex-direction: row;
               /* 决定换行:flex-wrap
               nowrap:不换行,默认值
               wrap:换行
               wrap-reverse: ; */
               flex-wrap: wrap-reverse;
               /* 决定主轴方向的排序:justify-content;
               flex-start:主轴方向的开始位置、默认值;
               flex-end:主轴的结束位置；
               center:居中；
               space-betweent:两端对齐；
               space-around:环绕对齐、拉手对齐*/
               justify-content: space-around;
               /* 交叉轴的对齐方式:align-items
               flex-start:交叉轴的开始位置对齐;
               flex-end:交叉轴的结束位置对齐；
               center:交叉轴居中对齐; */
               align-items: center;
           }
           .bigbox div{
               width: 200px;
               height: 200px;
               border: 1px solid aqua;
               font-size: 36px;
               text-align: center;

           }
       </style>
   </head>
   <body>
       <div class="bigbox">
           <div>1</div>
           <div>2</div>
           <div>3</div>
           <div>4</div>
           
       </div>
   </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bigbox{
				width: 1200px;
				height: 800px;
				border: 1px solid green;
				margin: auto;
				
				display: flex;/* 设置父盒子为flex容器 */
				/* 决定主轴的方向:flex-direction
					row:默认以行为主轴(从左往右);
					row-reverse:行反转(从右往左);
					column: 以列为主轴(从上到下);
					column-reverse:列反转(从下往上); */
				/* flex-direction: column; *//* 决定主轴的方向 */
				flex-direction: row;
				/* 决定换行:flex-wrap
				nowrap:不换行,默认值
				wrap:换行
				wrap-reverse: ; */
				flex-wrap: wrap-reverse;
				/* 决定主轴方向的排序:justify-content;
				flex-start:主轴方向的开始位置、默认值;
				 flex-end:主轴的结束位置；
				 center:居中；
				 space-betweent:两端对齐；
				 space-around:环绕对齐、拉手对齐*/
				justify-content: space-around;
				/* 交叉轴的对齐方式:align-items
				flex-start:交叉轴的开始位置对齐;
				flex-end:交叉轴的结束位置对齐；
				center:交叉轴居中对齐; */
				align-items: center;
			}
			.bigbox div{
				width: 200px;
				height: 200px;
				border: 1px solid aqua;
				font-size: 36px;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<!-- <div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div> -->
		</div>
	</body>
</html>