使用flex 布局让子元素左右间距相等

使用felx 布局让子元素左右间距相等效果展示使子元素左右间距相等布局三种方法1、justify-content: space-evenly;2、justify-content: space-between; 和伪类3、子元素 margin: 0 auto; margin-left: 0; 第一个子元素margin-left: auto;示例代码示例<!DOCTYPE html>&l

gqkmiss

11775人浏览 · 2020-08-27 19:19:08

gqkmiss · 2020-08-27 19:19:08 发布

使用flex 布局让子元素左右间距相等

效果展示

使子元素左右间距相等布局

三种方法

1、justify-content: space-evenly;

2、justify-content: space-between; 和伪类

3、子元素 margin: 0 auto; margin-left: 0; 第一个子元素margin-left: auto;

示例

展示示例

代码示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>flex center</title>
	<link rel="stylesheet" href="">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.divtext{
			margin: 100px auto -100px;
			width: 600px;
			height: 40px;
			line-height: 40px;
			font-weight: 700;
			font-size: 22px;
			text-align: center;
		}
	</style>
</head>
<body>
	<!-- space-evenly 使子元素左右间距相等布局-->
	<style type="text/css">
		.div1{
			width: 600px;
			border: 1px solid;
			display: flex;
			justify-content: space-evenly;
			margin: 100px auto;
		}
		.div1 div{
			width: 100px;
			height: 100px;
			border: 1px solid;
			text-align: center;
			line-height: 100px;
		}
	</style>
	<div class="divtext">
		space-evenly 使子元素左右间距相等布局
	</div>
	<div class="div1">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
	<!-- space-between 和伪类使子元素左右间距相等布局-->
	<style type="text/css">
		.div2{
			width: 600px;
			border: 1px solid;
			display: flex;
			justify-content: space-between;
			margin: 100px auto;
		}
		.div2::before,.div2::after{
		    content: '';
		    display: block;
		}
		.div2 div{
			width: 100px;
			height: 100px;
			border: 1px solid;
			text-align: center;
			line-height: 100px;
		}
	</style>
	<div class="divtext">
		space-between 和伪类使子元素左右间距相等布局
	</div>
	<div class="div2">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
	<!-- display:flex和子元素 margin 使子元素左右间距相等布局 -->
	<style type="text/css">
		.div3{
			width: 600px;
			border: 1px solid;
			display: flex;
			margin: 100px auto;
		}
		.div3 div{
			width: 100px;
			height: 100px;
			border: 1px solid;
			text-align: center;
			line-height: 100px;
			margin: 0 auto;
			margin-left: 0;
		}
		.div3 div:first-child{
			margin-left: auto;
		}
	</style>
	<div class="divtext">
		display:flex和子元素 margin 使子元素左右间距相等布局
	</div>
	<div class="div3">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</body>
</html>

space-evenly兼容性

space-evenly兼容问题

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

SPI设备驱动

申请或者定义一个spi_driver，然后初始化spi_driver中的各个成员变量，当SPI设备和驱动匹配以后，spi_driver下的probe函数就会执行！构建spi_transfer，然后将其打包到spi_message里面，需要使用spi_message_init初始化spi_message，然后在使用spi_message_add_tail将spi_transfer添加到spi_me

2048 AI社区

【源码解析：memcpy、memmove、memset】

这段代码是GNU C库中用于内存安全操作的宏定义，主要功能是防止缓冲区溢出。它通过__ssp_bos_check3宏将标准内存操作函数（memcpy、memmove、memset）重定向到带有安全检查的版本。该机制会在编译时检测目标缓冲区大小，在运行时验证操作长度，若发现溢出则终止程序。在嵌入式开发中，这些函数常用于结构体复制、数据初始化、协议处理等场景，特别适合对安全性要求高的应用。通过条件编译