flex-box简单使用(一)

原创 2016年08月30日 08:59:24

看着张鑫旭大神的博客,来学习一下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>
版权声明:本文为博主原创文章,转载请注明出处,谢谢。

相关文章推荐

使用flex box(弹性盒子模型)进行页面布局的注意事项

什么时候下使用flex比较方便?flexbox最主要的作用在于我们可以通过这个属性快速设置和操作它的子元素的布局,可以方便地实现居中、居左、居右、两边对齐、垂直居中、水平居中的效果; 一般如果遇到这...

Combo Box的简单使用(Win32)

一 Combo Box函数简单介绍   1 SendMessage函数向窗口发送消息 LRESULT SendMessage(   HWND hWnd,     ...

Group Box组合框的简单使用

分类: 2010.9-14.72013-07-13 11:59 5325人阅读 评论(0) 收藏 举报 目录(?)[+] 开发环境版本:Visual Studio ...

flex 4 check box legend chart

css3中 弹性盒模型布局之box-flex

box-flex:也就是让子容器针对父容器的宽高属性按照一定的规则来划分 Eg: html代码: 01 02 03 CSS样式: body,div { background:...

css的flex box布局

Flex也就是flexable box,即为“弹性布局”,为盒模型提供了最大的灵活性。 采用flex布局的元素,称之为“flex容器”(flex container),而在容器里面的元素称之为“fl...

flex布局(Flexible Box)

前言上一篇,我刚刚整理了水平垂直居中,在这里顺便整理了flex布局。我们都知道传统的布局是基于盒模型。而盒模型布局主要依赖于position、display和float属性,对于部分特别要求的布局实现...

移动端的自适应布局神器—Flex Box(2)

讲解Flex Box 布局方式

CSS3新属性box-flex移动端利器

未经允许,不得转载! 水平有限,不周之处欢迎指正、交流! box-flex{value}属性规定框的子元素是否可伸缩其尺寸。可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸...
  • ime33
  • ime33
  • 2017-01-14 11:43
  • 611

CSS box-flex属性

一、淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)