弹性盒子模型

1.背景

• 为了解决传统布局的死板以及不足，CSS3新增了一种新型的弹性盒子模型，通过弹性盒子模型，我们可以很轻松的创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易

2.必备属性

• flex
  • 创建“弹性盒子”
    • display:flex，将该属性放在父盒子上，就可以创建一个“弹性盒子”
    • “弹性盒子”被创建之后，也会面临两个问题（重点理解）
      • 子元素的宽度和大于父元素宽度，这时，子元素会按比例划分宽度（“弹性盒子”的特点）
      • 子元素的宽度和小于父元素宽度，这时，子元素的最终宽度以原来的定义的宽度为基准（也就是width是多少就是多少）
  • flex是flex-grow、flex-shrink、flex-basis的复合属性（语法：flex : grow shrink basis）
    • flex-flow（放大比例）（在对应的子元素里面设置属性）
      • 只有当子元素的宽度和小于父元素时，才会生效（生效条件）
      • 取值默认为0时（默认值为0），表示不索取父元素的剩余空间
      • 取值大于0时，表示索取父元素的剩余空间（即子元素放大）。取值越大，索取越多
    • flex-shrink（缩小比例）（对应的子元素里面设置属性）
      • 只有当子元素的宽度和大于父元素时，才会生效（生效条件）
      • 取值为0时，子元素不缩小
      • 取值默认为1时（默认值为1），子元素按照一定比例缩小。取值越大，缩小越厉害
    • flex-basis（元素宽度）（对应的子元素里面设置属性）
      • 还要注意的是，flex-basis是针对弹性盒子（父元素）下的子元素的，不能用于设置弹性盒子的宽度或者非弹性盒子的宽度
      • 如果同时定义flex-basis和width，那么flex-basis的值会覆盖width的值
      • flex-basis就是width的替代品，它们都用来定义子元素的宽度，只不过在“弹性盒子”中，flex-basis的语义会比width更好
      • 可以定义“弹性盒子”内部的子元素在分配空间之前，该子元素所占的空间的大小
• order(定义子元素的排列顺序)
  • 语法：div{ order: 数值}
  • 例如：div{ order：1 } 意思是：将排布在弹性盒子的第一行第一列的位置
• flex-direction(排列方向)
  • 可以使用该属性来定义子元素盒子是横着排还是竖着拍
  • 注意：该属性是定义在弹性盒子（即父元素）上的

row	横着正向排（默认值）
row-reverse	横着反向排
column	竖着正向排
column-reverse	竖着反向排

• flex-wrap（多行排列）
  • 可以使用该属性定义子元素盒子是单行显示还是多行显示

nowrap	单行显示（默认值）
wrap	多行显示，也就是换行显示
wrap-reverse	多行显示，但是却是反向排列（与wrap是反的）

• flex-flow（排列复合属性）
  • 是flex-direction、flex-wrap的复合属性
  • 语法：flex-flow：direction wrap；
• jusitify-content（水平对齐）
  • 可以使用该属性来定义“弹性盒子”内部子元素在“横轴”上的对齐方式
  • 注意：该属性定义在弹性盒子（即父元素）上

flex-start	所有子元素依次靠左排列
flex-end	所有子元素依次靠右排列
center	所有子元素依次在中间排列
space-between	所有子元素均匀排列
space-around	所有子元素均匀排列，但是两边留有一定距离

• align-items（垂直对齐）
  • 可以使用该属性来定义“弹性盒子”内部子元素在“纵轴”上的对齐方式
  • 注意：该属性定义在弹性盒子（即父元素）上

flex-start	所有子元素在上边排列
flex-end	所有子元素在下边排列
center	所有子元素依次在中间排列
baseline	所有子元素在父元素的基线上排列
stretch	拉伸子元素以适应父元素的高度

 

  

3.区别display：flex 和display：inline-flex

• flex： 将对象作为弹性伸缩盒显示
• inline-flex：将对象作为内联块级弹性伸缩盒显示
• 一句话来描述就是 当Flex Box 容器没有设置宽度大小限制时，当display 指定为 flex 时，Flex Box 的宽度会填充父容器，当display指定为 inline-flex 时，FlexBox的宽度会包裹子元素