Question

由于我已经在使用flexbox一段时间了，现在终于＆＃34;已经看到了光线＆＃34;，我想我会分享我的例子来展示实现灵活的列布局是多么容易没有带有大量边距，填充等的css hacks。

我知道有些人根本不喜欢弹性盒，并且可能有充分的理由，但是这篇文章适合那些想知道它是什么的人，并得到一个真正有用的例子。，一见钟情真的很容易理解......

首先是一些HTML：

<div class="header">100 setup</div>
   <div class="flexcontainer">
   <div class="flexbox flex100">100</div>
</div>

<div class="header">75/25 setup</div>
<div class="flexcontainer">
   <div class="flexbox flex75">75</div>
   <div class="flexbox flex25">25</div>
</div>

<div class="header">50/50 setup</div>
<div class="flexcontainer">
   <div class="flexbox flex50">50</div>
   <div class="flexbox flex50">50</div>
</div>

<div class="header">33/33/33 setup</div>
<div class="flexcontainer">
   <div class="flexbox flex33">33</div>
   <div class="flexbox flex33">33</div>
   <div class="flexbox flex33">33</div>
</div>

<div class="header">20/20/20/20 setup</div>
<div class="flexcontainer">
   <div class="flexbox flex20">20</div>
   <div class="flexbox flex20">20</div>
   <div class="flexbox flex20">20</div>
   <div class="flexbox flex20">20</div>
</div>

然后是一些CSS：

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   border:1px solid #3B3B3B;
   background-color: #919191;
   width:100%;
   min-height:100px;
}
.flexbox {
   margin:5px;
   border:1px solid #F2F2F2;
   background-color:#E3E3E3;
   padding:5px;
}
.header {
   font-size:0.75em;
   font-family:verdana;
   width:100%;
   display:block;
   line-height:20px;
}
.flex20 {
   -webkit-flex: 4 0 0;
   flex: 4 0 0;
}
.flex25 {
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}
.flex33 {
   -webkit-flex:3 0 0;
   flex: 3 0 0;
}
.flex50 {
   -webkit-flex:1 0 0;
   flex: 1 0 0;
}
.flex75 {
   -webkit-flex: 2 0 0;
   flex: 2 0 0;
}
.flex100 {
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}

这是一个用于查看和测试的JSFiddle

Answer 1

几周前开始使用flex属性，我在过去建立的3个网站上过度使用了它。在完全响应网站发誓的机构工作，flex属性是一个非常容易使用的工具。

也许值得一提的是，其他浏览器需要像你所示的-webkit-这样的前缀

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works)*/
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

如何轻松理解flexbox列概念（指南）

1 个答案: