Flex布局

flex布局原理

通过过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

弹性盒子是一种按行或者按列布局元素的一维布局方法。

Can I use... Support tables for HTML5, CSS3, etc

ps:浮动的出现是为了作图文混排

常见父项属性

flex-direction

主轴方向的控制

    flex-direction: row; 从左到右
    flex-direction: row-reverse; 从右到左
    flex-direction: column; 从上到下
    flex-direction: column-reverse;

justify-content

flex-wrap设置子元素是否换行

flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面。

flex多了会默认压缩,少了不会默认拉伸：因为flex-grow:0  默认01有关系

    /* 默认不换行 */
    flex-wrap: nowrap;
    /* 换行 多行 */
    flex-wrap: wrap;

align-items

align-content

 

flex-flow( flex-direction flex-wrap主轴方向和换行)的简写

顺序任意,并且都可以省略

flex-flow: column wrap;

flex布局子项常见属性

order：数值越小越靠前 默认为0