flex弹性布局学习总结

一、flex容器

设置了display：flex属性的元素称为flex容器（如上图中的parent）

flex容器可设置的属性有6种：

        flex-direction 控制主轴线方向,有4种取值：row(默认值，水平，起点在左端）|row-reverse（水平，起点在右端）|column（竖直，起点在上端）|column-reverse（竖直，起点在下端）

        flex-wrap 控制主轴线上是否换行如何换行，有3种取值：nowrap（默认值，不可换行）、wrap（可换行）、wrap-reverse（反向换行）

        flex-flow 是对flex-direction和flex-wrap的缩写

       justify-content  控制主轴线上元素的对齐方式，有5种取值：flex-start（默认值，左对齐）、flex-end(右对齐）、center(居中对齐）、space-between(两边对齐，贴边）、space-around(两边对齐，不贴边）

       align-items  控制副轴线上单行元素的对齐方式，有5种取值：flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、baseline（第一行文字的基线对齐）、stretch（默认值，撑满这个容器高度）

         align-content 控制副轴线上多行元素的对齐方式，有6种取值：flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、space-between（两边对齐，贴边）、space-around（两边对齐，不贴边）、stretch（默认值）

二、flex项目

放在flex容器里的元素称为flex项目

flex项目可设置的属性有6种：

      flex-grow 控制主轴线上有剩余空间时元素的放大比例，默认为0

      flex-shrink  控制主轴线上空间不足时元素的缩小比例，默认为1

      flex-basis    控制元素占据主轴线上的空间，默认为auto

      flex   是flex-grow、flex-shrink、flex-basis的缩写形式，快捷取值auto（1 1 auto），none（0 0 auto），默认值为（0 1 auto）

      order  给元素设置order值，按照从小到大排列，默认值为0

      align-self  允许单个项目有与其他项目不一样的对齐方式，可以覆盖父布局的align-items，有6种取值：auto（默认值）、flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、baseline（第一行文字的基线对齐）、stretch

参考资料：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$