Flexbox布局
jopen
9年前
Flexbox布局（ Flexible Box 或CSS3 弹性布局），是CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局。它可以实现：
- 如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
- 可以快速让他们布局在一列；
- 可以方便让他们对齐容器的左、右、中间等；
- 无需修改结构就可以改变他们的显示顺序；
- 如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。
浏览器兼容性
红色代表不支持，绿色代表支持，暗绿色代表部分支持，其中IE10、IE11目前使用中出现了大量的bug，Android4.3只支持老的flexbox规范。可以发现该属性在移动端的使用还是可能的，不过要加上老的规范写法。
容器属性（父元素属性）
1. display
取值：
- flex 将对象作为弹性容器显示
- inline-flex 将对象作为内联块级弹性容器显示。
注： 以下是旧版本的属性值：
box：将对象作为弹性容器显示。（最老版本）
inline-box：将对象作为内联块级弹性容器显示。（最老版本）
flexbox：将对象作为弹性容器显示。（过渡版本）
inline-flexbox：将对象作为内联块级弹性容器显示。（过渡版本）
2. flex-direction 决定主轴的方向（即项目的排列方向）。
取值：
- row 主轴为水平方向，起点在左端。
- row-reverse 主轴为水平方向，起点在右端。
- column 主轴为垂直方向，起点在上沿。
- column-reverse 主轴为垂直方向，起点在下沿。
3. flex-wrap 设置容器内的项目排列不下时是否换行
取值：
- wrap 换行
- no-wrap 一行显示，不换行
- wrap-reverse 倒序换行，将各行的顺序倒序排列
4. justify-content 定义了项目在主轴上（依据设置的主轴方向而定）的对齐方式。
取值：
- flex-start 左对齐
- flex-end 右对齐
- center 居中对齐
- space-between 俩端对齐
- space-around 项目间隔相同对齐
5.align-items 定义项目在交叉轴上的对齐方式。
- flex-start 起点对齐
- flex-end 终点对齐
- center 居中对齐
- baseline 项目的第一行文字的基线对齐。
- stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content 当项目有多列（行）时，该属性定义各轴的对齐方式
取值：
- flex-start 起点对齐
- flex-end 终点对齐
- center 居中对齐
- space-between 项目间隔相同对齐
- space-around 每行（列）的间隔俩侧相等对齐
- stretch 项目布满容器对齐
项目属性（子元素属性）
1. order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex 定义了项目的大小，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
(1) flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
(2) flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
(3) flex-basis 定义项目占据的空间,然后再分配多余空间。
3. align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的
测试用例
这几天在项目中小范围试用了下（移动端），结果UC和微信浏览器不支持，当时就蒙逼了好吗。后来查了下，发现加上老版本的写法和前缀即可。至少借的几个手机测试是通过了。
1
2
3
4
5
</div> 代码：
<div class="flexbox"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <style> .flexbox{ display: -webkit-flex; display: flex; /*兼容老版本*/ display: -webkit-box; -webkit-align-items: center; align-items: center; /*兼容老版本*/ -webkit-box-align: center; border:1px solid #000; min-height:200px; } .flexbox>div{ flex: 1; -webkit-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; background-color: green; border:1px solid blue; } </style> 如果觉得本文不错的话，帮忙点击下面的推荐哦,谢谢！
>>>>点击阅读原文