弹性盒子

Flexbox是CSS弹性盒子布局模块的缩写，它被用来创建横向或者是纵向的一维页面布局。要使用flexbox，需要在想进行flex布局的父元素上应用 display:flex ，所有的子元素都会按照flex进行布局。

   

One

   

Two

   

Three

会显示出三个宽度相同的div

将display:flex添加至父元素（wrapper）后，三个子元素自动按列进行排列。这是因为他们变成了flex项，按照flex容器（也就是他们的父元素）的一些flex相关的初值进行flex布局：

整齐的排成了一行，因为父元素的flex-direction的初值是row

被拉伸至和最高的元素高度相同，因为父元素的align-items属性初值为stretch。这就意味着所有的子元素都会被拉伸至他们的flex容器的高度，在这个例子中就是flex项中最高的一项（虽然三个子元素高度都相同）。

所有的项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白

除了上面这几种flex容器的属性外，还有很多属性可以作用到flex项上面，这些属性可以改变flex项在flex布局中占用宽/高的方式，允许它们通过伸缩来适用可用空间

比如：

将子元素添加flex属性，并赋值为1，这会使所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多的空间，那么子元素就会变得更宽，反之，他们会变得更窄，如果你在父元素中添加一个新元素，那么它们也会变得更小，来为新元素创造空间。不管怎样，最终它们会调整到自己直到占用相同宽度的空间