flex-box简单使用(一)

看着张鑫旭大神的博客,来学习一下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>
阅读更多
版权声明:本文为博主原创文章,转载请注明出处,谢谢。 https://blog.csdn.net/makel12/article/details/52366236
文章标签: 布局
个人分类: 其他
相关热词: flex-box
上一篇DOM基本属性
下一篇doctype详解
想对作者说点什么? 我来说一句

RecyclerView的简单使用(一)

2015年03月10日 2.02MB 下载

SuperSLiM的简单使用

2015年07月01日 6.45MB 下载

wcf的简单使用

2018年06月06日 73KB 下载

FREE FTP容易配置

2009年12月14日 640KB 下载

maven简单使用PPT

2010年12月22日 290KB 下载

svn简单使用,非常好

2009年05月22日 28KB 下载

Redis集群搭建与简单使用

2018年01月17日 287KB 下载

服务器使用指南 适合新手

2010年02月03日 13.81MB 下载

ACTIVEX控件

2012年05月13日 2.96MB 下载

一些表单验证js

2014年04月08日 104KB 下载

没有更多推荐了,返回首页

关闭
关闭