CSS3的Flexbox布局的简明入门指南


Posted in HTML / CSS onApril 08, 2016

Flexbox布局概念

Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防止内容溢出,确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易,可以使用更少的代码,更简单的方式实现更复杂的布局,例如对齐方式,排列方向,排列顺序(这也是Flexbox布局的核心能力所在),弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于代码的声明和导航顺序。

不同于块级元素基于垂直方向布局以及行内元素基于水平方向布局,弹性盒布局的算法是方向无关的。 虽然块级元素布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局,弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

名词与基础

Flexbox是一个完整的布局模块,不是单一的属性,设计的属性有很多。Flexbox布局主要由父容器和它的直接子元素组成,其中父容器被称之为flex container(flex容器),而其直接的子元素称作为flex item(flex元素)。

Flexbox布局按照宽和高涉及的基本概念名称有main axis(主轴)和cross axis(交叉轴,和主轴垂直),主轴起点边称为main start,主轴终点边称为main end,交叉轴起点边称为cross start,交叉轴终点边称为cross end。如图:
CSS3的Flexbox布局的简明入门指南

main axis(主轴):Flex容器的主轴主要用来排列Flex元素。它不一定是水平,这主要取决于flex-direction属性。
main-start(主轴起点边) | main-end(主轴终点边):Flex元素的排列从容器的主轴起点边开始,往主轴终点边结束。
main size:Flex元素的在主轴方向的宽度或高度就是项目的主轴长度,Flex元素的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。
cross axis(和主轴垂直交叉的轴):与主轴垂直的轴称作交叉轴。
cross-start(交叉轴起点边) | cross-end(交叉轴终点边):伸缩行的排列从容器的交叉轴起点边开始,往交叉轴终点边结束。
cross size:Flex元素的在交叉轴方向的宽度或高度就是项目的交叉轴长度,Flex元素的交叉轴长度属性是width或height属性,由哪一个对着交叉轴方向决定。

例子

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多,导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子,来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行,基于最新的标准。
使用flexbox你还可以做的更多;这里只是一些让你了解概念的例子:

使用 Flexbox 的简单布局

CSS Code复制内容到剪贴板
  1. .container {   
  2.   display: -webkit-flex;   
  3.   display: flex;   
  4. }   
  5. nav {   
  6.   width200px;   
  7. }   
  8. .flex-column {   
  9.   -webkit-flex: 1;   
  10.           flex: 1;   
  11. }  

CSS3的Flexbox布局的简明入门指南

使用 Flexbox 的牛逼布局

CSS Code复制内容到剪贴板
  1. .container {   
  2.   display: -webkit-flex;   
  3.   display: flex;   
  4. }   
  5. .initial {   
  6.   -webkit-flex: initial;   
  7.           flex: initial;   
  8.   width200px;   
  9.   min-width100px;   
  10. }   
  11. .none {   
  12.   -webkit-flex: none;   
  13.           flex: none;   
  14.   width200px;   
  15. }   
  16. .flex1 {   
  17.   -webkit-flex: 1;   
  18.           flex: 1;   
  19. }   
  20. .flex2 {   
  21.   -webkit-flex: 2;   
  22.           flex: 2;   
  23. }  

CSS3的Flexbox布局的简明入门指南

HTML / CSS 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
CSS3美化表单控件全集
Jun 29 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 #HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 #HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 #HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 #HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 #HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 #HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 #HTML / CSS
You might like
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JavaScript中this详解
2015/09/01 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
空指针到底是什么
2012/08/07 面试题
模范家庭事迹材料
2014/02/10 职场文书
学校端午节活动方案
2014/08/23 职场文书
委托书的写法
2014/08/30 职场文书
委托函范文
2015/01/29 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL