flex常用属性

对块元素使用display:flex后,此元素变为弹性容器,它的子元素变为弹性项目:


Paste_Image.png

弹性容器的主要属性有:

  • flex-direction:此属性设置主轴的方向是行还是列,是顺序还是逆序,有row,row-reverse,column,column-reverse这四个常用可选值。
  • flex-wrap:此属性设置设置沿主轴方向是否需要换行,正序还是逆序,有nowrap,wrap,wrap-reverse这三个常用可选值。
  • flew-flow:由于上面两个属性总是一起使用,所以将上两个属性值合并为flex-flow属性,属性值用空格隔开。
  • justify-content:此属性设置了一行弹性项目沿主轴方向的摆放位置,靠左靠右居中或者相同边距(两边留距离)和相同距离(两边不留距离),有flex-start,flex-end,center,space-between,space-around这五个常用可选值。
  • align-items:此属性设置了一行弹性项目沿侧轴方向的摆放位置,靠左靠右或者居中,有flex-start,flex-end,center这三个常用可选值。
  • align-self:此属性设置了一个弹性项目沿侧轴方向的摆放位置,可选值与align-items类似。
  • order:此属性设置了弹性项目的排列顺序,order值支持正负值,默认为0,值越大,排列越靠后。
  • align-content:此属性设置了行与行之间的间隔,集中在顶部或底部,居中或是行与行之间保持相同距离,也可以每行周围保持相同间隔,有flex-start,flex-end,center,space-between,space-around这五个常用可选值。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容