弹性盒布局

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

---

---

弹性盒模型（FlexibleBox 或 flexbox）

什么是弹性盒？

• 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

• 弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成
  弹性容器通过设置display·属性的值为flex或inline-flex将其定义为弹性容器
  弹性容器内包含了一个或多个弹性子元素
  注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

基本配置项

给父元素添加

1. display:flex/inline-flex;

   • flex将对象作为弹性伸缩盒显示
   • inline-flex将对象作为内联块弹性伸缩盒显示
     需要注意的是：子元素的 width、float、clear 和 vertical-align 属性将会失效

2. flex-direction (主轴排列方向)

   • row 默认，横向一行排列
   • row-reverse 反转横向排列
   • column 纵向排列
   • column-reverse 反转纵向排列

3. justify-content(主轴对齐方式)

   • flex-start默认，顶端对齐
   • flex-end末端对齐
   • center居中对齐
   • space-between两端对齐，中间自动分配
   • space-around自动分配距离
     *默认元素在主轴上容不下不会换行，会被压缩

4. flex-wrap设置换行

   • nowrap 容器为单行，该情况下子项可能会溢出容器
   • wrap 容器为多行，子项内部会发生断行
   • wrap-reverse 反转排列

5. align-items(侧轴对齐方式)

   • flex-start 侧轴起始边界
   • flex-end 侧轴结束边界
   • center 居中放置
   • baseline 基线对齐
   • stretch 默认值，项目被拉伸以适应容器

6. align-content(行与行之间对齐方式)

   • flex-start 没有行间距
   • flex-end 底对齐没有行间距
   • center 居中没有行间距
   • space-between 两端对齐，中间自动分配
   • space-around 自动分配距离
   • stretch 默认值，项目被拉伸以适应容器

给子元素添加

1. align-self 灵活容器内被选中项目的对齐方式
   –可重写灵活容器的align-items属性

   • auto 默认值，元素继承了它的父容器的align-items属性
   • stretch 元素被拉伸以适应容器
   • center 元素位于容器的中心
   • flex-start 元素位于容器的开头
   • flex-end 元素位于容器的结尾

2. order 排序优先级
   数字越大越往后排，默认为0，支持负数

3. flex-grow 项目的放大比例
   flex-grow:1;
   同flex:1;–放大比例

4. flex-shrink 项目的缩小比例
   flex-shrink:0;元素不缩小

5. flex-basis 项目的长度

6. flex为 3 4 5 的简写形式
   默认值flex:0 1 auto;

   缩写「flex: 1」, 则其计算值为「1 1 0」
   缩写「flex: auto」, 则其计算值为「1 1 auto」
   缩写「flex: none」, 则其计算值为「0 0 auto」
   缩写「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

弹性盒案例

滚动条

::-webkit-scrollbar { display: none; } 作用：使滚动条消失

青蛙网页练习

青蛙过河——帮帮我

旧的弹性盒

display:box 属性

Flexbox(弹性盒子)非常出色，并且肯定是布局未来的一部分。
在过去的几年中，语法发生了很大变化，因此出现了[“旧”和“新]语法。
但是，如果我们将旧的，新的和介于两者之间的语法组合在一起，则可以得到不错的浏览器支持。

注：
1. W3C很久以前就有一个display:box属性
2. flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代
display: -webkit-box

接下来：我们先去了解一下旧的弹性盒子 display:box;

常用的有以下属性：

1. display:-webkit-box
   父元素设置该属性后，作用与display:flex类似，子元素可在一行显示，且实现自适应

2. -webkit-box-orient:horizontal/vertical
   父元素设置该属性后，作用与flex-direction: column相似。使子元素排列方向发生变化

3. horizontal
   水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度

4. vertical
   垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度

5. -webkit-box-direction
   在父级上设置该属性，作用使改变子元素的排列顺序，
   normal 默认值，子代按html顺序排列1，2，3，4
   reverse 反序，所有元素相反顺序来，4，3，2，1

6. box-align:start/end/center/stretch
   在父级设置，子代的垂直对齐方式。
   start 垂直顶部对齐
   end 垂直底部对齐
   center 垂直居中对齐
   stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。
   注：我们一般多使用box-align:center;来实现子元素的垂直居中。
   Flex布局：align-items: center;

7. -webkit-box-pack
   在父级设置，子代的水平对齐方式。
   start 水平左对齐
   end 水平右对齐
   center 水平居中对齐
   justify 在box-pack表示水平等分父容器宽度
   （唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）
   注：我们一般多使用box-pack:center来实现子元素水平居中方式
   Flex布局：justify-content: center;

8. -webkit-box-flex: 1（占用剩余部分）
   作用与flex: 1;相同
   若子元素设置固定宽高，则子元素按照该子元素的宽和高
   若没有设置该属性的子元素会占满具有display:box属性父元素中剩余的所有的空间

   设置为1则为所有剩余空间，可以为负数

   若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份

浏览器的兼容性

大家不难发现display:box属性与display:flex属性几乎一模一样，
就下来就会有人问了，这两个一样的东西到底有什么区别呢？

前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。

所以兼容性的代码，大致如下
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+ */

如果要说区别，display：box； 是老规范，要兼顾古董机子就加上它
flexbox flex 是新规范，老机子不支持的

参考文献

Flex 布局
W3C 2009 年第 1 次草案：display:box;
W3C 2011 年第 2 次草案：display:flexbox | inline-flexbox;
W3C 2012 年第 5 次草案及以后的候选推荐标准：display:flex | inline-flex;