CSS的FLEX布局介绍

Flex翻译为“弹性”，通过给元素设置display属性，属性值为flex或者inline-flex。使其变成弹性容器，容器中的直系子元素就会变为弹性元素。      

div{              

display: flex;//变成弹性盒       

}  

弹性盒子可以直接控制子元素的位置

 

FLEX布局父项常见属性：

flex-direction：设置主轴的方向

        row:默认值，元素从左到右依次排列

        row-reverse：元素从右到左依次排列

        column：元素从上到下依次排列

        column-reverse：元素从下到上依次排列

justify-content：设置主轴上的子元素排列方式

                    left

                    right

                    flesx-start

                    flex-end

                    space-around:空白环绕四周