关闭

flex-box简单使用(一)

标签: 布局
821人阅读 评论(0) 收藏 举报
分类:

看着张鑫旭大神的博客,来学习一下flex-box。张鑫旭大神2010年写的
flex-box详解,今年是2016年了~

最近在做移动端页面。在此之前没有详细了解过移动端页面开发的一些细节。直接上手就做起来了,按照在pc端的布局方式去写移动端的页面。会遇到一些稍微麻烦的地方。
比如均等分割一个block为三块,如下。

1 2 3

张鑫旭大神使用分房子的比喻来描述父block被其三个子block划分。

要实现三列均等分割,需要指定两个css属性。
1. 父元素添加display:box;
2. 子元素添加box-flex:num; //这里的num是一个数值(没有单位),用于表示该子元素所能够占用的空间比例

示例代码如下

ul,li{padding:0,margin:0;list-style:none;}
ul{ display:box;
    display:-webkit-box;
    displau:-mox-box;
    width:800px;
    border:1px solid #ccc;}
li{ background:red;
    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

为li指定box-flex:1; ul有三个li子元素,每一个li的box-flex:1;按照比例,每个li得到的宽度就是 800*(1/(1+1+1));
如果不指定父block的宽度,则其默认宽度沾满屏幕。

如果需要某一列固定宽度,只需要为其指定宽度,剩下的空间会根据其兄弟元素的分配比例进行划分,代码如下:

ul,li{padding:0,margin:0;list-style:none;}
ul{ display:box;
    display:-webkit-box;
    displau:-mox-box;
    width:800px;
    border:1px solid #ccc;}
li{ background:red;
    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;}
li:first-child{
    width:400px;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    文章分类