笔记:flex 的完备性与正交性

笔记:

flex 布局很容易与其他布局方式(包括 flex 布局)嵌套在一起,实际上它是一个独立的盒子,这个盒子由一个元素(称为容器)及其直接的子元素(称为项目)构成。这个容器外部以及这些项目内部都不会受 flex 布局的影响。

一个元素可以定义成两种 flex 布局,第一种是块级 flex 布局:

.flex-block-box {
  display: flex;
}

另一种是行内 flex 布局:

.flex-inline-box {
  display: inline-flex;
}

这两种 flex 布局的区别是,块级 flex 布局的容器是一个块级盒子(block),而行内 flex 布局的容器是一个行内盒子(inline-block)。

容器的属性主要用于排列和对齐项目,项目的属性主要用于实现弹性和覆盖容器所定义的对齐方式:

  1. 容器属性:

    1. 排列:

      • 方向:flex-direction: row | column | row-reverse | column-reverse

      • 换行:flex-wrap: nowrap | wrap | wrap-reverse

      • 合写:flex-flow: row nowrap

    2. 对齐:

      • justify-content: flex-start | center | flex-end | space-between | space-around

      • align-items: flex-start | center | flex-end | baseline | stretch

      • align-content: flex-start | center | flex-end | space-between | space-around

  2. 项目属性:

    1. order: 0 | 1 | ...

    2. 控制弹性:

      • flex-grow: 0 | 1 | ...

      • flex-shrink: 0 | 1 | ...

      • flex-basis: auto | 100px | 50% | ...

      • flex: 0 1 auto

        • auto: 1 1 auto

        • none: 0 0 auto

        • initial: 0 1 auto

    3. align-self: auto | flex-start | center | flex-end | baseline | stretch


另参见:http://www.ruanyifeng.com/blo...

相关文章
相关标签/搜索