布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中 就不容易实现。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局，2012年得到进一步完善。
2009年版本的语法已经过时（display: box），使用的时候为了兼容需要加上一些前缀
/* 形如： */ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
所以还是建议使用新版形式
2012年将是往后标准的语法（display: flex），大部分浏览器已经实现了无前缀版本。
?嗦那么多，正式开始
一、Flex 是什么，为什么要用？
就 W3C 官方给到的解释是，这是设计来实现更复杂的版面布局。
那我自己对他的定义是，Flexbox 从本质上就是一个 Box-model 的延伸，我们都知道 Box-model 定义了一个元素的盒模型，然而 Flexbox 更进一步的去规范了这些盒模型之间彼此的相对关系。而不需要去用一些很 cheat 的做法，去 hack 一些本来其实不应该用来做版面布局的属性。
Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。
最重要的是，Flexbox布局方向不可预知，他不像常规的布局（块就是从上到下，内联就从左到右）。而那些常规的适合页面布局，但对于支持大型或者杂的应用程序（特别是当他涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性。
围绕着三个主要问题，来了解Flex布局
1. 这能做什么？也就是他能解决什么问题？
2. 能用在哪?？在哪些地方能用这个方法？
3. 为什么能用？他实现所用到的逻辑是什么？
当然了，这仨问题也直接贯穿在功能实现当中，所以还是来了解使用的方式。
二、Flex的基本概念
因为Flex布局是相对模块而言，而不是一个属性，它涉及很多东西，包括其整个组属性。他们当中一部分是容器（父元素，称为“伸缩容器”container），另一部分是子元素（称为“伸缩项目” flex item）。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流。这张图，解释了flex布局的主要思想。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、Flex 的使用方法
跟常规布局操作一样，flex也是基于css属性的设置来实现。
如上图所示，主要包括 设置父容器的属性 和 设置子项目的属性（如果又有内嵌的容器那就同理）
（1）父容器的属性
1.display:flex | inline-flex;(适用于父容器)
这个是用来定义伸缩容器，是内联还是块取决于设置的值。这个时候，他的所有子元素将变成flex文档流，称为伸缩项目。
display: other values | flex | inline-flex;
如果是Webkit内核的浏览器，必须加上-webkit前缀。比如：
display: -webkit-flex;
但有两点要注意的是，父容器设置flex之后：
CSS的columns在伸缩容器上没有效果。 float、clear和vertical-align在子项目上没有效果。
2.flex-direction（适用于父容器）
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-direction: row | row-reverse | column | column-reverserow(默认值) ：在“ltr”排版方式下从左向右排列；在“rtl”排版方式下从右向左排列。 row-reverse： 与row排列方向相反，在“ltr”排版方式下从右向左排列；在“rtl”排版方式下从左向右排列。 column： 类似 于row，不过是从上到下排列 column-reverse： 类似于row-reverse，不过是从下到上排列。
注：
主轴起点与主轴终点方向分别等同于当前书写模式的始与结方向。其中“ltr”所指文本书写方式是“left-to-right”也就是从左向右书写；而“rtl”所指的刚好与“ltr”方式相反，其书写方式是“right-to-left”，也就是从右向左书写
那不如来个例子：
现在有一个父容器div,其中有5个子项目div.
为了保证效果展示，父容器暂设width: 40%; min-height: 250px; 子项目分别设置不同宽 width: 10%|15%|20%; 高度暂设固定高度30px（但设置高度会时stretch失效）
基本代码为：（后续例子都是基于这个展开，变动的部分为关键的各 flex属性）
item1
查看更多关于Flex布局相关用法_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did109252