预热
首先我们要简单了解几个概念,详细的可以看下https://www.cnblogs.com/xzwblog/p/7255364.html和https://blog.csdn.net/moakun/article/details/80688976。
因为某作业要求,要写html。而我对float流一窍不通…所以学习一下flex布局。
Flex是Flexible Box的缩写,也就是“弹性布局”,用于盒装模型。任意的容器都可以指定为Flex布局。
1 | .box { |
注:Flex布局需要IE10或以上
值得注意的是设置为Flex布局后,子元素得到float、clear和vertical-align均会失效。
采用Flex布局的元素,称作Flex容器(Flex container),而容器的子元素成为Flex项目(Flex Item)。
本文参考了阮一峰的flex教程。