弹性盒子(Flex Box)

什么是弹性盒子

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式.

用法

1.display: flex | inline-flex;

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。它的直接子元素会接受这个flex环境，而flex和inline-flex的区别如下：

flex：将对象作为弹性伸缩盒显示

此时没有给父级设置宽度的话，他会默认为100%

inline-flex：将对象作为内联块级弹性伸缩盒显示

此处还是没给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。

2.flex-direction: row | row-reverse | column | column-reverse

flex-direction确定了flex布局的方向，row代表水平排布，column代表竖直排布。默认值是row。

row:

column :

ow-reverse：反转水平排列
column-reverse：反转竖直排列

3.justify-content：flex-start | flex-end | center | space-between | space-around。

justify-content确定了flex布局的子元素水平排布方式。flex-start代表居左排布，flex-end是居右排布，center是居中排布，space-between是子盒子之间留空白，space-around表示子盒子左右两边都留空白。flex-start是默认值。但是center是常用属性值。

4.flex-wrap：no-wrap | wrap

默认为no-wrap不换行,如果子元素的宽超过父元素的时候子元素的宽是无效的，当换行后子元素宽就会恢复，而且float, vertical-align 在flex项目中不起作用。

这是没写换行的：

这是写换行的：

。