Flex弹性布局介绍

常见的布局有哪些？

1.最常见布局   浮动、定位

2.自适应布局   百分比布局

3.响应式布局   @media媒体查询

4.弹性布局       display:flex  将对象最为弹性伸缩盒子显示 (适用于父类容器元素上

Flex是Flexible Box的简称，意为弹性布局，顾名思义，在网页布局时，他可以给我们提供更多的灵活性。                                                                                                               

display 弹性布局版本

display:box        （伸缩盒老版本）      2009版

display:flexbox  （伸缩盒过渡版本）   2011版

display:flex          (伸缩盒新版本)         2013版

1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。

2.设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用。

3.设置了display:flex属性的元素，称为Flex容器，他里面的所有子元素统称为容器成员，称为Flex项目，设置或检索伸缩盒对象的子元素如何分配空间。

父级：display:flex;

子级：flex1; flex1.2; flex2;   (子级可为小数和自然整数)

justify-content: flex-start | flex-end | center | space-between | space-around;

属性定义了Flex项目在主轴方向上的对齐方式

属性 / 值     详细说明

flex-start     类似于左浮动（float：left)

flex-end      类似于右浮动（float:right）

center        Flex项居中

space-between   两端对齐容器，各个Flex项目之间的间距相等

space-around     每一个Flex项目两侧的间隔相等

align-items:center (在 display:flex; 属性后加该属性，可使子元素垂直居中)

参考地址：

http://justcode.ikeepstudying.com/2015/10/css3-flex-弹性布局用法详解/

https://www.css88.com/archives/8629

http://www.runoob.com/w3cnote/flex-grammar.html