彻底搞懂flex弹性盒模型布局

2019/04/10 10:10
阅读数 23

为什么要用flex

基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex。

兼容性:

Base Browsers: IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+

flex属性的分类

我们先来概览一下flex的所有属性,属性看似多杂,其实分为两大类:

flex container

  • flex-flow (复合属性,包含以下两个)
    • flex-direction (方向x轴,y轴)
    • flex-wrap (是否换行)
  • align-content (y轴对齐方式)
  • justify-content (x轴对齐方式)
  • align-items (flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。)

flex items

  • flex (复合属性,包含以下三个)
    • flex-grow (扩展比率)
    • flex-shrink (收缩比率)
    • flex-basis (伸缩基准值)
  • align-self (flex子项单独在y轴对齐方式)
  • order (排序)

看不懂这一堆属性也没关系,来感受一下实例

<iframe height="800" style="width: 100%;" scrolling="no" title="Flexbox playground" src="https://codepen.io/enxaneta/embed/adLPwv?height=265&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/enxaneta/pen/adLPwv'>Flexbox playground</a> by Gabi (<a href='https://codepen.io/enxaneta'>@enxaneta</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

实践

理解flex的核心就是区分好flex container和flex items,我们就做一个简单的实例:

<iframe height="500" style="width: 100%;" scrolling="no" title="flex-layout" src="https://codepen.io/lostyu/embed/dyoWVEK?height=265&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/lostyu/pen/dyoWVEK'>flex-layout</a> by Tony (<a href='https://codepen.io/lostyu'>@lostyu</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

总结

flex布局很灵活,可以多种搭配,理解了flex container和flex items也就理解了flex弹性盒模型布局

参考资料

原文出处:https://www.cnblogs.com/lostyu/p/flex_layout.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部