关闭

flex-box简单使用(一)

标签: 布局
939人阅读 评论(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网站的观点或立场

编译原理利用Flex+Bison实现简单计算器

编译原理利用Flex+Bison实现简单计算器
  • xiaofeige567
  • xiaofeige567
  • 2014-06-03 21:38
  • 3701

[HTML5移动网页开发] Flexbox布局讲解与使用技巧

一 摘要 在前一篇我们讲到了react Native混合APP开发时,布局主要采用是Flexbox布局,不了解可以参考之前的一篇文章. [React Native混合开发]React Nat...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016-09-13 13:05
  • 2867

最简单的flex & bison例子

y.tab.h ? /* A Bison parser, made by GNU Bison 2.3.  */    /* Skeleton interface for Bison's...
  • Chinamming
  • Chinamming
  • 2013-11-26 22:51
  • 1618

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

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

使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到f...
  • scorpio_h
  • scorpio_h
  • 2017-04-19 17:22
  • 531

使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到f...
  • u013511989
  • u013511989
  • 2015-08-18 13:28
  • 9540

Combo Box的简单使用(Win32)

一 Combo Box函数简单介绍   1 SendMessage函数向窗口发送消息 LRESULT SendMessage(   HWND hWnd,     ...
  • qiurisuixiang
  • qiurisuixiang
  • 2011-09-03 22:45
  • 8642

使用cocos2d和box2d制作一个简单的弹射游戏 第一部分

声明:这个教程来自这里http://www.raywenderlich.com/4756/how-to-make-a-catapult-shooting-game-with-cocos2d-and-b...
  • hany3000
  • hany3000
  • 2013-03-19 12:08
  • 1221

MFC Group Box 组合框的简单使用 笔记

开发环境版本:Visual Studio 2010 应用程序类型:MFC application   1 组合框 Group Box作用         在MFC基于对话框的应用程序中,Gro...
  • MS_KS_1217
  • MS_KS_1217
  • 2013-07-13 12:02
  • 1888

Group Box组合框的简单使用

分类: 2010.9-14.72013-07-13 11:59 5325人阅读 评论(0) 收藏 举报 目录(?)[+] 开发环境版本:Visual Studio ...
  • hanshuning
  • hanshuning
  • 2014-10-31 17:01
  • 1515
    文章分类