只需要在父元素的样式中添加一行:
display:flex;
<!...flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素的排列方式(单行)
flex-flow:复合属性,相当于同时设置了...注意:
默认的主轴是x轴,行,row,那么剩下的侧轴就必然是y轴啦
我们的元素是根据主轴排列的
根据我们以往的经验,当几个盒子浮动排列在一行时,盒子一行挤不下的时候会掉下去,但是flex布局就不一样了...align-items和align-content的区别
align-items适用于单行情况下,只有上对齐,下对齐,居中和拉伸.
align-content适用于换行(多行)的情况下(单行时无效),可以设置上对齐...总结就是单行找align-items,多行找align-content.
02
子项常见属性
flex子项目占的份数
align-self控制子项在自己侧轴的排列方式.
order属性定义子项的排列顺序