flex布局（行内容器模式）

一、flex布局

          采用Flex布局的元素，称为Flex容器（flex  container），简称“容器”。它的所有子元素自动称为容器成员，称为Flex项目（flex item）,简称“项目”。

         容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

         注意：设为Flex布局之后，子元素的float、clear和vertical-align属性将失效。

二、容器中的属性

       1、flex-direction（决定主轴的方向，即项目的排列方向）：row（主轴为水平方向，默认），column（主轴为垂直方向）

       2、justify-content（定义了项目在主轴上的对齐方式）：flex-start（居于主轴线的开头）、center（居于主轴线的中间）、flex-end（居于主轴线的末端）、space-around（将子元素按比例排列在主轴线上）、space-between（将子元素排列在主轴线两端）

       3、align-items（定义项目在交叉轴上如何对齐）：同上justify-content

       4、flex-wrap（规定子元素溢出处理）：nowrap（不换行）、wrap（顺序换行）、wrap-reverse（逆序换行）

三、项目中属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

 

参考文章

1、http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html