CSS里的Flex布局,flex属性详细教程

Flex布局：

伪类：

使用

 

 

 

 

成果

 

水平方向：

垂直方向：

 

弹性盒的好处(按比例缩放）

 

 

flex-grow:放大比例

flex-shrink:缩小比例

flex-basis:基本值，最小缩小值

 

 

显示在一行：

方法一：给ui加上float:left

方法二：给ul加display:flex

 

给ul加上flex后，就显示在一行了，原因是flex只对它的子类起作用。

 

 

 

 

 

成果：