搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

基础的CSS3弹性盒Flexbox布局如何使用实例

发布时间：2023-01-14 05:30:52 来源：网络
.
生命价值不在于获取多少，生命价值在于付出多少。有钱的人更有钱，这往往是一种必然。

flexbox是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方，下面就着重讲述一下它的一些使用场景：

Example 1： flexbox等分布局

如果你要实现以下所示的样式，你可能首先想到的是用float：

CSS Code复制内容到剪贴板
  1. <ulid="ranktop3">
  3. <li>
  5. <divclass="ranktab">1</div>
  7. <p>fdeg</p>
  9. <p>霸气值：170</p>
  11. </li>
  13. <li>
  15. <divclass="ranktab">2</div>
  17. <p>bling</p>
  19. <p>霸气值：160</p>
  21. </li>
  23. <li>
  25. <divclass="ranktab">3</div>
  27. <p>lea</p>
  29. <p>霸气值：150</p>
  31. </li>
  33. </ul>
  35. ulli{
  37. width:32.9%;
  39. float:left;
  41. border-right:1pxsolid#fa9900;
  43. padding:5px0;
  45. }


但当只有2个排名后，少了一个li节点后，就会展示如下：

删除两个li节点后如下：

但是用户以及设计师肯定不希望看到这样的界面。他们肯定希望界面是这样的：
减少一个li节点后：

删除两个li节点后如下：

那么这里用display:flex布局是最好不过的了，新的flexbox布局模式被用来重新定义CSS中的布局方式：

CSS Code复制内容到剪贴板
  1. ul{
  3. display:flex;//表示改直接子元素用flex布局，默认横向布局
  5. }
  7. ulli{
  9. /*width:32.9%;*/
  11. /*float:left;*/
  13. border-right:1pxsolid#fa9900;
  15. padding:5px0;
  17. flex:1;表示子元素之间平均分配
  19. }


可见用flex布局非常完美，这就是flex布局的牛逼之处。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。为了兼容更多的浏览器，也可以这样写：

display: flex;display: -webkit-box;这两个属性的方法作用相同。

Example 2： flexbox不等分布局

CSS Code复制内容到剪贴板
  1. <divclass="container">
  3. <sectionclass="initial">
  5. <p>
  7. 空间足够的时候，我的宽度是200px，如果空间不足，
  9. 我会变窄到100px，但不会再窄了。
  11. </p>
  13. </section>
  15. <sectionclass="none">
  17. <p>
  19. 无论窗口如何变化，我的宽度一直是200px。
  21. </p>
  23. </section>
  25. <sectionclass="flex1">
  27. <p>
  29. 我会占满剩余宽度的1/3。
  31. </p>
  33. </section>
  35. <sectionclass="flex2">
  37. <p>
  39. 我会占满剩余宽度的2/3。
  41. </p>
  43. </section>
  45. </div>
  47. .container{
  49. display:-webkit-flex;
  51. display:flex;
  53. }
  55. .initial{
  57. -webkit-flex:initial;
  59. flex:initial;
  61. width:200px;
  63. min-width:100px;
  65. /*空间足够的时候，该div的宽度是200px，如果空间不足，该div会变窄到100px，但不会再窄了。*/
  67. }
  69. .none{
  71. -webkit-flex:none;
  73. flex:none;
  75. width:200px;
  77. /*无论窗口如何变化，我的宽度一直是200px。*/
  79. }
  81. .flex1{
  83. -webkit-flex:1;
  85. flex:1;
  87. /*改div会占满剩余宽度的1/3。*/
  89. }
  91. .flex2{
  93. -webkit-flex:2;
  95. flex:2;
  97. /*改div会占满剩余宽度的2/3。*/
  99. }

效果如下图所示：

Example 3： flexbox基本页面布局

CSS Code复制内容到剪贴板
  1. <divclass="container">
  2. <nav>
  3. <divclass="container">
  4. <nav>
  5. <ul>
  6. <li>
  7. <arel="nofollow noopener noreferrer" href="http://www.alloyteam.com/">menu1</a>
  8. </li>
  9. </ul>
  10. </nav>
  11. <divclass="content">
  12. <section>
  13. ...
  14. </section>
  15. <section>
  16. ...
  17. </section>
  18. </div>
  19. </div>
  21. .container{
  22. display:-webkit-flex;
  23. display:flex;
  24. }
  25. nav{
  26. width:200px;/*固定宽度*/
  27. }
  28. .content{
  29. -webkit-flex:1;/*除去nav的固定宽度后，剩下的宽度都是属于content的*/
  30. flex:1;
  31. }

效果如下图所示：

Example 4： flexbox的居中布局

CSS Code复制内容到剪贴板
  1. <divclass="vertical-container">
  2. <sectionclass="vertically-centered">
  3. <p>
  4. CSS里总算是有了一种简单的垂直居中布局的方法了！
  5. </p>
  6. </section>
  7. </div>
  9. .vertical-container{
  10. display:-webkit-flex;
  11. display:flex;
  12. height:300px;
  13. }
  14. .vertically-centered{
  15. margin:auto;
  16. }

PS：解决兼容性问题

对于Flexbox 以前的几个版本可以使用Autoprefixer后处理程序来实现css3代码自动补全。比如：

CSS Code复制内容到剪贴板
  1. display:flex;

编译后：

CSS Code复制内容到剪贴板
  1. display:-webkit-box;
  2. display:-webkit-flex;
  3. display:-ms-flexbox;
  4. display:flex;

如果你使用Sass，那么可以使用@mixin来解决flexbox版本兼容，直接@include进来就可以轻松解决三个版本的兼容问题；这样可以支持到IE10 +, 移动端浏览器和最新的FF, Safari, Chrome, IE11, Opera等。
github项目地址：sass-flex-mixin

到此这篇关于基础的CSS3弹性盒Flexbox布局如何使用实例就介绍到这了。没要腐朽没要倒退，你的眼光如婴儿般明亮，请拥抱我吧，让我的生命散发迷人的光彩，直教日月黯然。更多相关基础的CSS3弹性盒Flexbox布局如何使用实例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:
标签： Flexbox
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图