2014阿里前端笔试题（关于弹性盒布局的实现）

最新推荐文章于 2024-05-08 19:22:45 发布

zbhzbn

最新推荐文章于 2024-05-08 19:22:45 发布

阅读量2.2k

点赞数

分类专栏：网页布局

本文链接：https://blog.csdn.net/zbhzbn/article/details/47755079

版权

网页布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文通过分析阿里2014年的前端笔试题，探讨了如何使用`display: -webkit-box`实现弹性盒布局。作者在图灵社区找到学习资源，并分享了链接，帮助读者深入理解。

摘要由CSDN通过智能技术生成

去图灵社区看到了其他人的例子学习，给个学习地址的链接：http://www.ituring.com.cn/article/56881

看到.box>div时疑惑了下，去查手册，复习下。

display: -webkit-box

这个是用在弹性盒布局中的一个属性。在了解它之前，先看两篇文章来了解下什么是弹性盒布局。不用全看，看前面一点就够了。 http://segmentfault.com/a/1190000000707526 和 http://www.w3cplus.com/css3/a-guide-to-flexbox.html。看过后知道，弹性盒布局是

看了这两篇文章之后，有一个迷惑，到底想用弹性盒布局时父元素display属性到底设为什么，flex, flex-box, -webkit-box, ......然后我就看到了知乎上的这篇文章：http://www.zhihu.com/question/25147729。这个帖子一楼的回答挺好，虽然口气不好，但问题是解决了的。不同的写法是对应不同时期的Flex规范。各个写法的兼容性如下：

再看一下这个：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{  background-color: #619B99; height: 50px; width: 100%; padding: 10px;  display: -webkit-box; }
        .box>div{  background:#EEEEEE; margin-right: 10px; -webkit-box-flex: 1;}
        .box div:first-of-type{ width: 200px; -webkit-box-flex: 0;  }

    </style>
</head>
<body>
<div class="box addflex">
    <div class="item">column1</div>
    <div class="item">column2</div>
    <div class="item">column3</div>
</div>
</body>
</html>

box-flex属性值在http://www.ituring.com.cn/article/56881这篇文章中总结的很好，我把它拿过来学习。