使用flex实现简单布局指南-优快云博客

本文链接：https://blog.youkuaiyun.com/NUT_YT/article/details/119390210

本文介绍了如何将传统布局转换为flex弹性布局，详细讲解了justify-content和flex-direction属性的用法，并通过三步操作展示了如何创建一个flex布局，包括排版初样设定、字体设置和实际排版实现。

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

文章目录

前言
一、思路以涉及的知识点
二、操作步骤

前言

制作一个简单布局：先定义一个大的div，在里面插入两个小的div，div中再插入span

在这里插入图片描述
总体代码布局代码：

*{
				margin:0px;
				padding:0px;
			}
			.box{
				width:480px;
				height:300px;
				border:1px dashed;
				background-color: lightgray;
				margin:100px;
			}
			.left{
				width:150px;
				height:250px;
				border:1px dashed;
				float:left;
				margin:20px;
				margin-right:10px;
				background-color: lightgoldenrodyellow;
			}
			.right{
				width:250px;
				height:250px;
				border:1px dashed;
				float:left;
				margin:20px;
				background-color: lightsteelblue;
			}
			span{
				display:block;
			}
			.left span:nth-of-type(1){
				font-size:30px;
				text-align:center;
				font-weight:bold;
				margin-top:70px;
			}
			.left span:nth-of-type(2){
				font-size:30px;
				text-align:center;
				font-weight:bold;
			}
			.right span:nth-of-type(1){
				font-size:20px;
				font-weight:bold;
				margin-top:15px;
			}
			.right span:nth-of-type(2){
				font-size:20px;
				margin-top:15px;
				margin-top:150px;
			}

<div class="box">
			<div class="left">
				<span>31</span>
				<span>八月</span>
			</div>
			<div class="right">
				<span>社群大事件</span>
				<span>今天群主拒绝了穿女装的要求，这个仇我记下了</span>
			</div>
		</div>

一、思路以涉及的知识点

针对以上布局，将其转换为flex弹性布局

1、justify-content:
flex-start; 开始布局 (默认)
flex-end; 结尾对齐
center; 中心对齐
space-between; 两端对齐
space-around; 自动分配间隔
2、flex-direction:
row; 主轴水平
column; 主轴垂直

二、操作步骤

1.写入排版初样

代码如下（示例）：

*{
				margin:0px;
				padding:0px;
			}
			.box{
				width:480px;
				height:300px;
				border:1px dashed;
				background-color: lightgray;
				margin:100px;
			}
			.left{
				width:150px;
				height:250px;
				border:1px dashed;
				float:left;
				margin:20px;
				margin-right:10px;
				background-color: lightgoldenrodyellow;
				
			}
			.right{
				width:250px;
				height:250px;
				border:1px dashed;
				float:left;
				margin:20px;
				background-color: lightsteelblue;
			}

<div class="box">
			<div class="left">
				<span>31</span>
				<span>八月</span>
			</div>
			<div class="right">
				<span>社群大事件</span>
				<span>今天群主拒绝了穿女装的要求，这个仇我记下了</span>
			</div>
		</div>

效果展示：
在这里插入图片描述

2.运用伪类选择器选择字体进行设置

代码如下（示例）：

.left span:nth-of-type(1){
				font-size:30px;
				text-align:center;
				font-weight:bold;
			}
			.left span:nth-of-type(2){
				font-size:30px;
				text-align:center;
				font-weight:bold;
			}
			.right span:nth-of-type(1){
				font-size:20px;
				font-weight:bold;
			}
			.right span:nth-of-type(2){
				font-size:20px;
				margin-top:15px;
			}

效果展示：
在这里插入图片描述

3.运用flex布局进行排版

代码如下（示例）：

div{
				display:flex;
				/*将div设置为flex类型*/
			}
			.box{
				width:480px;
				height:300px;
				border:1px dashed;
				background-color: lightgray;
				margin:100px;
				display:flex;
			}
			.left{
				width:150px;
				height:250px;
				border:1px dashed;
				float:left;
				margin:20px;
				margin-right:10px;
				background-color: lightgoldenrodyellow;
				flex-direction:column;/*设置为主轴垂直*/
				justify-content:center;/*主轴对齐方式为中心对齐*/
				text-align:center;
				
			}
			.right{
				width:250px;
				height:250px;
				border:1px dashed;
				float:left;
				margin:20px;
				background-color: lightsteelblue;
				flex-direction:column;
				justify-content:space-between;/*两端对齐*/
			}