flexbox属性

[zilongxuan001]

flexbox功能

flexbox属性可以解决元素浮动问题，简单完美地实现垂直水平居中，让布局根据浏览器自动伸缩。

来源：https://www.w3cplus.com/css3/css3-flexbox-cheat-sheet.html

[zilongxuan001]

flexbox布局

1.创建flex容器

为元素设置display属性值为flex，在Safari浏览器中，加前缀-webkit

.flexcontainer{
        display:-webkit-flex;
        display: flex;
}

2. Flex项目行显示

Flex项目是Flex容器的子元素，沿着主轴和横轴定位，默认沿水平轴排列为一行。

通过flex-direction改变主轴方向，默认值为row，可以改值为column。

.flexcontainer{
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}