flex布局的笔记

1.Flex 是 Flexible Box 的缩写，意为"弹性布局"。

2.任何一个容器都可以设置为flex布局

.box{
   display:flex;
}

3.行内元素也可以设置为flex布局

.box{
    display:inline-flex;
}

4.Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
    dispaly:-webkit-flex;/* Safari */

}

5.flex布局父级元素上需要设置的属性：

　　（1）方向  flex-direction：即子元素的排列方向。默认是自左往右依次排列row，自右往左为row-reverse，自上而下垂直排列为column，自下而上为column-reverse。

　　（2）是否换行  flex-wrap：当子元素排不下的时候是否要自动换行。默认值为no-wrap，需要换行为wrap，如果需要第一行在下面，则是wrap-reverse。

　　（3）flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

　　（4）子元素在主轴上的对其方式  justify-content：可能取到的值为：flex-start（默认值）左对齐。flex-end右对齐，center居中，

 

参考：https://www.cnblogs.com/nuannuan7362/p/5823381.html