例子:
过去我们要在一个大盒子里面放三个这样的盒子,都是用的浮动,但是学习了弹性flex布局,我们可以更简单的做出来,为了凸显它的优势,用的还是行内元素span,只要用了flex,行内元素也可以直接设置大小...只需要在父元素的样式中添加一行:
display:flex;
<!...注意:
默认的主轴是x轴,行,row,那么剩下的侧轴就必然是y轴啦
我们的元素是根据主轴排列的
根据我们以往的经验,当几个盒子浮动排列在一行时,盒子一行挤不下的时候会掉下去,但是flex布局就不一样了...现在这是一个即将被塞满的大盒子,我们再往里面放一个盒子,看看会发生什么现象呢.
很明显,他给我们硬塞在一行上去了,原先的盒子的大小也被强行改变了.
于是就引出了下一个知识点....比如一个盒子让三个小盒子平分,以往我们就要使用百分比33.33%,非常麻烦的,现在就只要一行代码即可.