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-弹性布局用法详解/