flex布局（弹性盒模型）知识点

flex布局

基本概念

• Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
  
  • 老版本我们通常称为box;
  • 新版本我们成为flex;
  • Webkit 内核的浏览器，必须加上-webkit前缀。

//老版本
 display: -webkit-box;

//新版本
display:flex;

• 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
  
  • 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
  • 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
    

flex属性

容器上的属性

老版本容器属性

• 容器的布局方向： -wibkit-box-orient属性改变主轴哪一根；

  • horizontal 指定子元素在一个水平线上从左至右排列；
  • vertical 从顶部向底部垂直布置子元素；
  • （略）inline-axis 子元素沿着内联坐标轴（映射到横向）；
  • （略）block-axis 子元素沿着块坐标轴（映射到垂直）；
  • （略）inherit box-orient 属性的值应该从父元素继承 ；

• 容器的排列方向： -wibkit-box-direction改变了主轴的方向；

  • normal 以默认方向显示子元素。
  • reverse 以反方向显示子元素。
  • inherit 应该从子元素继承 box-direction 属性的值；

• 富裕空间的管理

  • box-pack
    
    • start 对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）；
    • end 对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）；
    • center 额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素；
    • justify 额外的空间平均分配给每个子元素
  • box-align