flex布局

最新推荐文章于 2022-10-18 16:42:02 发布

原创最新推荐文章于 2022-10-18 16:42:02 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解了使用Flex布局实现元素的水平与垂直排列，通过具体示例展示了如何利用justify-content和align-items属性来控制子元素的分布，以及如何通过改变flex-direction属性实现不同方向上的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex的交叉布局

<div class="wrap">
<div class="menu1">
	<div class="box1">1</div>
	<div class="box1">2</div>
	<div class="box1">3</div>
	<div class="box1">4</div>
</div>
<div class="menu2">
	<div class="box1">5</div>
	<div class="box1">6</div>
	<div class="box1">7</div>
	<div class="box1">8</div>
</div>
</div>

八个左右分布两侧

<style>
*{margin:0;padding:0;}
.wrop{
			width: 100px;height: 100px;background-color: pink;border-radius:15%;
			display: flex;
			align-items: center;/*这一条作用于垂直方向*/
			justify-content: space-between;/*这一条是对列方向起作用*/}
		
		.box1{
			width: 20px;height: 20px;background-color: blue;border-radius: 50%;
			line-height: 20px;text-align: center;
			margin-top:4px;/*让中间留有空隙*/}

在这里插入图片描述

	<div>
	.wrop{flex-direction: row;
			justify-content: space-between;	}
	</div>
	变化为这个时，图片为

在这里插入图片描述
上图小圆上下分布间隙相同
六个小圆分布图

			<div class="wrop">
				<div class="top1">
					<div class="box1">
				1
					</div>
				<div class="box1">2</div>
			</div>	
			<div class="box3">3</div>
			<div class="top2">	
				<div class="box1">4</div>
		
				<div class="box1">5</div>
				<div class="box1">6</div>
			</div>	
		
		
		</div>

*{margin:0;padding:0;} .wrop{ width: 100px;height: 100px;background-color: pink;border-radius:15%; display: flex;flex-direction: column;自上而下 justify-content: space-between;

		}
		
		.top1, .top2 {display: flex;使得小圆分散
		justify-content: space-between;小圆居中，且两侧贴边
			
		}
		.box3{align-self: center;单独对一个元素进行设置，如果这里加入display:flex;的话，数字三将不能居中}
		
		.box1 ,.box3{
			width: 20px;height: 20px;background-color: blue;border-radius: 50%;
			line-height: 20px;text-align: center;}

在这里插入图片描述