css3的样式属性；display: flexjustify-content: space-between两端对齐。低版本浏览器不支持。
可以用左右浮动实现（float:left&right）。
什么是flex布局？
传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。 任何一个容器（标签）都可以指定为flex布局。用display:flex；
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex；将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列（从左向右）
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column ：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3.内容对齐（justify-content）属性应用在 弹性容器 上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content：flex-start 默认，左对齐（图1）
justify-content:flex-end 右对齐（图2）
justify-content:center 居中对齐（图3）
justify-content:space-between 两端对齐，中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items（交叉轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器（注：子元素不能设置高）
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
图1（nowrap）注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2（wrap）
图3（warp-reverse）
容器单行或者多行方式
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注：本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
定义与语法
text-align属性是用来描述一个行内元素是如何在身为父元素的块级元素中对齐
通过定义可以看出text-align属性并不能控制块级元素的对齐方式，它只对块级元素内的行内元素生效
来看看text-align属性有哪些值
left
right
center
justify
start (CSS3新增) （默认值）
end (CSS3新增)
match-parent (CSS3新增)
接下来看看语法
# 内容左对齐text-align: left# 内容右对齐text-align: right# 内容居中对齐text-align: center# 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理text-align: justify# CSS3 内容对齐开始边界text-align: start# CSS3 内容对齐结束边界text-align: end# CSS3 这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是left和righttext-align: match-parent
其实text-align属性的值leftrightcenter已经很熟悉了，下面来重点看看justify
justify
首先明确的是，这个对齐的方式在英文文本上的表现效果更强一点，因为英文是一个个词汇，有长有短，像中文这种方块字都差不多的，设置内容两端对齐很难看出效果
来看看两端对齐的效果实现
HTML
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. This paragraph contains a very long word
CSS
.mydiv{width:120pxborder:3pxsolid redtext-align: justify}
其实，仅需声明text-align-last: justify便可设置最后一行也两端对齐
start和end (CSS3新增)
直接上例子吧
HTML
CSS
.test.start{border:2pxsolid redtext-align: start}.test.end{border:2pxsolid redtext-align: end}
好吧，我并没有看出和left和right有什么区别，以后发现了再补充吧
对行内元素的实现效果
text-align对块级元素内的文本是有效果的，那么对行内元素本身有效果么
HTML
CSS
.mydiv{width:400pxheight:30pxborder:2pxsolid red}span{padding-left:15pxpadding-right:15pxbackground:#cccborder:1pxsolid}.left{text-align: left}.right{text-align: right}.center{text-align: center}.justify{text-align-last: justify}
嗯，效果和文本的对齐方式是一样的...我靠，一样个毛线啊，justify明显没有效果好么
细分析下来这个会不会是span之间没有空格，就跟英文单词一样，浏览器渲染会认为这三个span是一体的，那就试试吧，给span间加两个空格
HTML
还真是
再来，加空格可以，设置margin可以么，很可惜，亲测不行
对inline-block的实现效果
相同的例子，行内元素换成块级元素，对块级元素设置display: inline-block
HTML
CSS
.mydiv{width:400pxheight:30pxborder:2pxsolid red}p{display: inline-blockpadding:5pxvertical-align: topborder:1pxsolidbackground:#ccc}.left{text-align: left}.right{text-align: right}.center{text-align: center}.justify{text-align-last: justify}
看看，效果相同，并且好像发现了一个新东西，inline-block后的块级元素不用加空格就可以实现justify的效果
其实，那是因为inline-block后的块级元素本身有间隙，具体可以参考我的另一篇文章《消除inline-block后间隙的方法们》
链接：https://www.jianshu.com/p/50ef0d1988de
来源：
