野花–flex布局小技巧之让某个子元素靠右或靠左显示

flex布局小技巧之让某个子元素靠右或靠左显示

以下以块元素的Flex布局为示例：
只需要两句代码，轻松搞定！

代码1：
在父元素里面加入以下代码：
（父盒子加了display: flex，就相当于起到浮动的效果，盒子会自行排列成一排）

display: flex

代码2：
在需要移动的子元素里（此处为靠右显示），加入以下代码：

margin-left: auto

小结：

父盒子加了display: flex，就相当于起到浮动的效果，盒子会自行排列成一排；

若想让父盒子里的某一个盒子靠右显示，其他盒子居左， 只需要在父盒子里面，
加入display: flex，在想要移动的盒子里面，加入margin-left: auto即可；

同理，如果你想让第一个盒子向左显示，其余盒子都向右显示，只需要给左边的第一个盒子设置 margin-right:auto即可；

此外，行内元素也可以使用Flex布局，子元素的代码如下：

.box{ display:inline-flex;}

原文地址：http://www.cnblogs.com/ericyjchung/p/16858947.html