flex布局学习总结

flex布局作为作为一款网页布局神器,简直令人心旷神怡,欲罢不能呀。但是其属性之多,又令人望而却步,单单是这些属性的记忆就能让你喝上一壶。如果在不理解其工作原理的情况下机械的记忆,很快就会忘记,用的时候也不能得心应手,于是便搜寻资料再加上大量的练习,对flex布局及其众多属性有了一个初步的理解与认识,在此做一个简单的记录。

对某个元素声明display:flex后即成为弹性容器,弹性容器有两根轴线,即主轴(默认水平轴线)和交叉轴,容器的子元素为弹性元素。当然,弹性元素也可以通过display:flex成为另一个弹性容器。因此一个元素既可以是弹性容器也可以是弹性元素。

弹性容器的属性及其说明

  • flex-direction:主轴的方向,默认值为:row(从左到右)
  • flex-wrap:元素宽度超过一行时是否这行折行,默认值为:nowrap(不折行)
  • flex-flow:以上两个属性的简写,默认值为:row nowrap
  • justify-content:主轴上的对齐方式,默认值为:flex-start(沿主轴起点对齐)
  • align-items:交叉轴上的单行对齐,默认值为:stretch(当元素没有设置具体尺寸时会将容器在交叉轴方向撑满)
  • align-content:交叉轴上的多行对齐方式,即flex-wrap:wrap且在交叉轴上有多行时有效,此时会把多行作为整体进行对齐。默认值为:stretch

弹性元素的属性及其说明

  • flex-grow:放大比例,即当容器宽度大于元素总宽度时的放大比例,默认值为:0(不放大)
  • flex-shrink:缩小比例,即当容器宽度小于元素总宽度时的缩小比例:1(等比例缩小)
  • flex-basis:主轴上的初始尺寸,默认值为:auto
  • flex:以上三个属性的简写,默认值为:0 1 auto
  • align-self:单独对某个元素设置交叉轴上的对齐方式,值与align-items相同并且会覆盖容器的align-items属性,默认值为auto
  • order:设置元素之间的排列顺序,数值越小排列越靠前,数值相同时以dom元素的原始排序为准,默认值为:0

参考资料

30分钟彻底弄懂flex布局

Flex 布局教程:语法篇

Flex 布局教程:实例篇

 

相关文章

发表评论