使用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兼容性

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

html使元素不被内容撑开,flex布局被子元素撑开，如何保持内容不超出容器
移动端里面,flex 布局很好用,它可以根据设备宽度来自动调整容器的宽度,可是最近在作项目的时候发现一个问题:html 一个li里面设置了flex,flex: 0 0 33.333%,而后想让子元素里 ...
flex布局实现元素的垂直居中
转载:[转载自这里](https://blog.csdn.net/amberqu/article/details/79700974) 转 Flex实现元素的水平居中和垂直居中 2018年03月26日 ...
【CSS布局】Flex布局中元素换行设置间距问题
要生成的效果图如下: 解决办法 1. 父元素定高的情况下,直接使用 align-content: space-between; ul{list-style: none;display: flex;he ...
flex布局的盒子模型
flex盒子模型由容器(flex container)以及容器的直接子元素(flex item)组成. 以容器(flex container)定义,有主轴(main axis)以及交叉轴(cross ...
Grid布局和Flex布局
Flex布局(弹性布局) Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.行内元素也可以使用Flex布局. 采用Flex布局的元素,称为Flex容器.flex ...
Flex 布局 - 容器
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8286217 ...
移动Web开发 ----- Flex布局详解
文章目录 1 Flex布局简介 2 Flex布局基本概念 3 容器属性 3.1 display 3.2 flex-direction 3.3 flex-warp 3.4 justify-content ...
flex布局——flex布局
学习内容: 例如: 体验flex布局 flex布局父项常见属性 justify-content属性 flex-wrap属性 align-items属性 align-content属性 flex-flo ...
flex布局实现叠在另一个div之上_flex布局
在学习flex布局之前,我们是如何让如下四个盒子排在一列呢?我们也许会用浮动.定位等等.当我们使用的时候我们会觉得很麻烦,需要调间距.量距离等.然而学习了felx布局,我们可以轻松的解决这些问题. 1 ...

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

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

效果展示

三种方法

1、justify-content: space-evenly;

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

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

示例

代码示例

space-evenly兼容性

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

最新文章

热门文章

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

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

效果展示

三种方法

1、justify-content: space-evenly;

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

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

示例

代码示例

space-evenly兼容性

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

最新文章

热门文章

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

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

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