css之flexbox

转载 2013年12月02日 21:47:12

移动端部分浏览器对于fixed支持颇为棘手,经过亲身实践和查阅大量资料,得到以下兼容列表:


  • ios safari    --ios5+强力支持,ios4及更早版本不支持

  • android 2.1   --及更早版本不支持

  • android 2.2    --支持

  • android 2.3    --支持,需要设置页面不可缩放,即:<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0" /> 

  • android 3.0+    --支持,不需要屏蔽页面缩放

  • blackberry 5.0    --支持

  • blackberry 7.0    --支持(仅仅是在模拟器中测试)

  • blackberry Playbook (1.0.7)    --支持、存在bug(可忽略)

  • firefox mobile    --支持

  • opera mobile    --支持、存在bug

  • opera mini    --不支持

  • windows phone 7    --不支持

  • webos    --2.0+支持

  • amazon kindle fire    --android2.3类似

  • amazon kindle(netfront)    --甚至不支持字体颜色,对fixed支持很给力


由此可知,使用fixed并不能很好满足固定布局的需求,不过要做到渐进增强使用fixed依然是不错的选择,即fixed在支持浏览器中将降级为static。

 

除此之外,html5规范中新增了flexbox布局,如在webkit中的实现display: -webkit-box,规范了CSS盒模型,在flexbox布局模型里,子元素可以在任何方向(横向、纵向)上排列,它们的大小可以智能缩放以适应父元素的宽度或高度。同样也可以对其中任何一个或多个元素设置fix宽或高度,其余元素通过设置比例实现智能缩放。

 

再从需求入手,只要设置页面包裹器为flexbox且等高于浏览器视口,规定子元素排列方式为纵向(-webkit-box-orient:vertical),应用导航和底部工具栏设置固定像素,应用主体(中间部分)能自适应页面高度且可滚动即可。


代码实现如下:


1)DOM结构

1
2
3
4
5
<div id="L-box">
    <div class="L-header"></div>
    <div class="L-content" id="iscroll"></div>
    <div class="L-footer">应用工具栏<input type="tel" placeholder="测试虚拟键盘" style="width:120px;" /></div>
</div>

2)css设置

1
2
3
4
5
html , body { overflowhidden; }
#L-box { height100%display: -webkit-box; -webkit-box-orient:vertical; }
.L-header { background#fc0height50pxline-height50px;}
.L-content { -webkit-box-flex: 1background#f1f1f1overflowauto;}
.L-footer { background#fc0height50pxtext-aligncenterline-height50px; }

具体demo地址:



demo代码详解:


  • 在demo中由于要兼顾ios最大化应用界面的问题,即隐藏浏览器地址栏,添加了一小段js应用代码,建议在实际应用中继续保留,提高ios用户的使用体验

  • 应用主体部分滚动利用iscroll库实现

 

说到此处,或许有人会疑问,既然应用主体部分滚动利用iscroll实现,关于导航栏和工具栏位置固定,用absolute定位一样可以实现,事实上也是如此。不过在使用absolute定位地址栏位置时,有两个地方需要注意:


  1. 额外的js计算得出主体部分的高度

  2. 在绝对定位元素上的input在获取焦点后,移动终端的虚拟键盘经常出现诡异的问题(慎重)


因此,综合考虑多方面元素,使用flexbox布局依然是最佳实践。 



三,流体布局


1,介绍


流体布局在这里是指横向排列布局元素,兼容布局元素边框、内填充等因素,适应手机横竖屏切换和不同终端分辨率的一种页面布局方式。



图上所示功能分解:


  • 横向排列7个子元素,长度均等

  • 第一和最后子元素离视口左右边界分别为20px

  • 每个子元素包含边框

  • 适应手机横竖屏切换、不同终端分辨率


2,设计思路


分析以上功能点,其实用inline-block、float配置子元素,使之横向排列,再辅以百分比宽度即可。但由于每个元素均有外边框(一定意义上说不可设置百分比),要实现上述需求,则需在每个子元素外嵌一层dom节点,如此势必增加了设计复杂度,出于对节省代码量及dom渲染速率的考虑,这并算不得合理的设计。


对于这种百分比类表格结构,使用table是个不错的选择。table本身必须设置宽度(百分比、px均可),但在视口宽度不固定前提下,设置table宽度为px值显然是行不通,若设置百分比,则对于需求第二点(左右边界20px),又有点黔驴技穷。不过在此基础上稍作变通亦可,即在table外嵌一层block元素如div,设置div的左右边距20px,再次设定table宽度为100%即可。这种做法,先不考虑多嵌套一层包裹器,单就table本身而言,并不符合w3c新的规范,同时即使用它也略显老土了。


除此之外,在讲述固定布局时,曾提到flexbox布局,可满足在任意方向上排列子元素并使之适应父元素宽高,这无疑是实现此种布局的利器。


实现代码如下:


1)DOM结构

1
2
3
4
5
6
7
8
9
10
11
<section id="container">
     <ul>
         <li>31</li>
         <li>32</li>
         <li>33</li>
         <li>34</li>
         <li>35</li>
         <li>36</li>
         <li>37</li>
     </ul>
</section>

2)CSS设置

1
2
3
4
#container { height58pxmargin20px 20px 0border1px solid #000; }
#container ul { height58pxdisplay: -webkit-box; }
#container ul li { -webkit-box-flex: 1text-aligncenterline-height58px;     border-right1px solid #000;}
#container ul li:last-child { border-right0 none; }

流体布局demo:传送门


小结:flexbox的强大之处,不在于可对布局元素按比例分配宽高,而在于重新定义CSS盒模型,在使用百分比的同时,可以兼容边框、内填充等因素。

图解CSS3 Flexbox属性

Flexbox布局官方称之为CSS Flexible Box布局模块,他是CSS3中的一种新的布局模式。Flexbox可以控制未知容器元素的对齐方式,排列方向,排列顺序等,甚至是在未知大小的容器也...
  • natalie86
  • natalie86
  • 2015年05月24日 20:03
  • 537

css3开发:flexbox布局实例分析

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教...
  • Generon
  • Generon
  • 2017年05月18日 10:09
  • 420

CSS3 Flexbox可视化指南

原文:scotch.io的A Visual Guide to CSS3 Flexbox Properties 译者:前端开发whqet,意译为主不当之处,欢迎指正! 译言:希望可以通过可视化的方式...
  • whqet
  • whqet
  • 2015年04月28日 10:51
  • 5424

CSS之flexbox

一切能用css解决的问题都不要用js; 一直以来对css的关注就比较少,一篇写得很经典的flexbox的文章:http://www.ruanyifeng.com/blog/2015/07/flex-...
  • sinat_25127047
  • sinat_25127047
  • 2017年08月16日 19:54
  • 173

CSS之Flexbox布局

本文摘要自:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Flexbox为CSS3中的新布局特性。该特性由布局容器元素和布局元素(容器...
  • zjxin000
  • zjxin000
  • 2015年12月30日 22:59
  • 382

CSS3 Flex布局详解与新旧法语对比

CSS Flex 新旧法语对比FlexBox 模型图解老版本的语法定义容器的display属性.box{ display: -moz-box; /*Firefox*/ display:...
  • shenlei19911210
  • shenlei19911210
  • 2016年09月08日 11:24
  • 2671

CSS之Flexbox制作CSS布局易如反掌

css
  • tian361zyc
  • tian361zyc
  • 2017年07月04日 11:16
  • 84

flexbox布局实例

等高布局之前我们实现等高布局的方式通常是使用非常大的padding-bottom与负的margin-bottom,而使用flex也能轻松实现。由于align-items属性的默认值是stretch,也...
  • crystal6918
  • crystal6918
  • 2017年08月10日 19:06
  • 170

css3-媒体查询flex布局

媒体查询媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的...
  • weixin_40014283
  • weixin_40014283
  • 2017年12月02日 13:24
  • 74

由FlexBox算法强力驱动的Weex布局引擎

前言 在上篇文章里面谈了Weex在iOS客户端工作的基本流程。这篇文章将会详细的分析Weex是如何高性能的布局原生界面的,之后还会与现有的布局方法进行对比,看看Weex的布局性能究竟如何。 目录 ...
  • qq_30513483
  • qq_30513483
  • 2017年04月06日 10:56
  • 1017
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css之flexbox
举报原因:
原因补充:

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