<style> .wrap { width: 400px; display:flex; /*弹性盒子*/ justify-content: space-between; /*两端对齐，子元素之间有间隙*/ flex-flow: row wrap;/*子元素溢出父容器时 ...

　　 前言 　　 在flex布局出现以前，我一般习惯使用浮动布局（float）来实现下列布局 　　 　　现在尽量少用浮动布局，虽然好用，但有时会带来一些意想不到的问题，甚至导致布局错位， 　 一开始浮动布局只是为了实现文字环绕而出现的，而后来却被广泛运用到布局当中。现在有了更好 ...

学习链接：https://blog.csdn.net/iefreer/article/details/50775887 ...

你的排版是这样的 解决方法：追加一个空的子元素，子元素宽度保持一致 space-around设置同理 ...

justify-content 定义了flexbox flexbox内的元素在主轴的方向上的对齐方式。 它可以设置以下几种对齐方式： 靠近一方 justify-content:center；　　/*flex元素都居中排列，没有间距*/ justify-content:start ...

1、问题：遇到了设置了justify-content: space-between;中间的div不居中的问题 2、原因： 因为felx布局是根据剩余的空间来设置的，看紫色的那段，当第一个div为空时，会出现左倾 3、解决：三个子项设置flex:1;就好了 ...

space-around对齐时， 三个div之间的距离是与父边框之间距离的【两倍】 space-evenly对齐时，三个div之间的距离是与父边框之间的距离 【相等】 spa ...

使用display: flex; justify-content: space-between; 在以后一行内容个数不够时会导致样式错乱 只需要添加 class名::after{ 　　content:""; 　　添加子元素的宽 } ...