flex常用属性

display:flex

这条属性通常设置在父元素上，表示这是一个flex的弹性盒模型，该元素的子元素遵循flex弹性盒模型的某些特点。

flex布局默认会是一个等高布局，flex布局下浮动会无效。

这是一个复合属性，是flex-basis、flex-grow、flex-shrink三条属性的合并写法。

这条属性用在子元素上，表示子元素如何分配父元素的剩余空间、子元素的尺寸以及子元素超出父元素的处理方法，具体含义参见下面对这三条属性的解释。

这条属性用在父元素上，有两个值nowrap/wrap，表示子元素超出父元素宽度后，子元素是否可以换行。

这条属性用在父元素上，有两个值row/column，默认为row，表示子元素的主轴方向，row横向的方向是主轴方向，column纵向的方向为主轴方向。

这条属性用在父元素上，表示子元素在纵轴方向上的对齐方式。有5个取值，默认为stretch。

这条属性用在父元素上，表示子元素在横轴方向上的对齐方式。有5个取值，默认为flex-start。

这条属性用在父元素上，表示在纵轴方向上多行子元素的对齐方式，区别于align-items，这个是多行。

这条属性用在子元素上，与align-items是双胞胎，区别于align-items，它是用在子元素上的，表示某一个子元素在纵轴上的对齐方式。

以下三条属性其实并不是不常用，只是我们通常不直接操作它们。

一经典的布局：一父元素，俩子元素，左边的子元素宽度不固定，如何实现右边子元素宽度自适应剩余的宽度？

先不考虑兼容性，最好的方法是使用flex布局

上面这个demo，css中的flex:1是一个合成属性

刚好是下面三条属性的合成，看到了吧，我们时刻都在使用它们，只不过是间接的操作他们。