flex弹性盒模型

flex弹性盒模型

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
flex弹性布局比较适合做自适应的网页，特别是移动端（要适配不同大小的设备）

---

一、语法

flex的语法分为两部分，一部分作用在flex容器上，一部分作用在flex子项上，接下来就详细的学习flex的语法
1、语法是添加到父容器身上的

• display:flex;
  注：
  1、默认情况下，在弹性盒子中的子元素左右排列；
  2、水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定；
  3、垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定；
  4、当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）；
  5、当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象；

• flex-direction：用来控制子项整体布局方向（主轴排列方向）
  row默认值。显示为行。方向为当前文档水平流方向。默认情况下从左往右
  column 显示为列
  column-reverse 显示为列。但方向和row属性值是反的
  row-reverse 显示为行。但方向和column属性值是反的

• felx-wrap：是否进行换行处理
  nowrap;默认值，不换行处理
  wrap;换行处理
  wrap-reverse;反向换行，宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

• flex-flow：flex-direction和flex-wrap的复合写法（有顺序）表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

• justify-content：属性决定了主轴方向上子项的对齐和分布方式
  flex-start:子项都去起始位置对齐
  flex-end:子项都去结束位置对齐
  center:子项都去中心位置对齐
  space-between:表现为了两端对齐，多余的空白间距只在元素中间区域分配
  space-around:每个flex子项两侧都环绕互不干扰的等宽的空白间距，视觉上边缘两侧的空白只有只有中间宽度的一半
  space-evenly:每个flex子项两侧空白间距完全相等

• align-items：指的就是flex子项们相对于flex容器在侧轴（上下）方向上的对齐方式（每一行中的子元素上下对齐方式）。
  stretch;默认值，flex子项拉伸。
  flex-start:表现为容器顶部对齐
  flex-end:表现为容器底部对齐
  center:表现为垂直居中对齐

• align-content：跟justify-content相反的操作。侧轴的对齐方式（最少需要两行才能看出效果，因为它是多行的上下对齐方式）
  默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的，值跟justify-content取值是相同的。

2、语法是添加到子容器身上的

• order：可以通过设置order改变某一个flex子项的排序位置。number排序优先级，数字越大越往后排，默认为0，支持负数。
• flex-grow:属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。( 想看到扩展的效果，必须有空隙 )
  0：默认值，不扩展；
  1 ： 去扩展 , 会把空白区域全部沾满；子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。
• flex-shrink:属性中的shrink是“收缩”的意思，flex-shrink主要处理- 当flex容器空间不足时候，单个元素的收缩比例。默认值是1。
• flex-basis:flex-basis定义了在分配剩余空间之前元素的默认大小。
  flex:1;→ flex : 1 1 0
  flex:0; → flex : 0 1 0
• flex:flex属性是flex-grow，flex-shrink和flex-basis的缩写。
• align-self:align-self指控制单独某一个flex子项的垂直对齐方式。