css3-flex-sample-demo

发表于   |   分类于   |  

我写的东西总感觉是干瘪的很。。我尽量写的丰富多彩些。不过总体上不影响理解的哈哈哈.
css兼容性前缀用后处理器来解决。autoprefixer

直接进入正题了，不说废话。

1

div.flex-box>(div.flex-items)*3这个html结构，很简单。
两个div，一个父级.flex-box，三个子元素.flex-items。

给.flex-box元素设置display属性为flex或inline-flex即可把.flex-box设置为伸缩容器。

给.flex-item元素设置box-flex:1则表示这个元素所占的宽度，而且是流体。

以上，是不是非常简单啊。其实常用到的也差不多是这个样子了。无非还有一些以下的功能。

2

如果三个子元素需要两端对齐且平均分布在.flex-box内，则需要对.flex-box设置justify-content的属性为space-between。

justify-content主轴方向内容对齐方式

flex-srart（默认）：与主轴起始方向对齐。
flex-end：向主轴终点方向对齐。
center：向主轴中点方向对齐。
space-between：起始位置向主轴起始方向对齐，终点位置向主轴终点方向对齐，其余位置向主轴中点方向对齐。
space-around：与space-between类似，只是起始位置和终点位置保留一半空白。

用一些喜闻乐见的图片来解释上面的值。
justify-content

sample demo

smaple-demo

代码

html

1
2
3
4
5
6
7
8
<div class="bdsharebuttonbox " data-tag="jia-share" data-bd-bind="">
    <a class="bds_weixin" data-cmd="weixin" href="#" title="分享到微信"></a>
    <a class="bds_tsina " data-cmd="tsina" title="分享到新浪微博"></a>
    <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
    <a class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
    <a class="bds_qq" data-cmd="qq" title="分享到QQ收藏"></a>
    <a class="bds_renren " data-cmd="renren" title="分享到人人网"></a>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.bdsharebuttonbox {
    background: #fff;
    padding: 10px 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bdsharebuttonbox a {
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 6px 6px 6px 0;
    overflow: hidden;
    color: #3a8ceb;
    width: 90px;
    height: 90px;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-direction: normal;
}

codepen

See the Pen css3-flex-sample-demo by jcpplus (@jcpplus) on CodePen.