Flex 布局：个人的学习与理解

1、Flex：弹性布局

任何容器：

.parent {
    display: flex;
}

行内元素：

.parent {
    display: inline-flex;
}

Webkit 内核的浏览器，必须加上 -webkit 前缀：

.parent {
    display: -webkit-flex; /* Safari */
    display: flex;
}

2、基本理解

表格 或 宫格

3、容器的属性 (在父容器上)

父容器的属性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

1、flex-direction : 决定元素的排列方向

.parent {
    flex-direction: row | row-reverse | column | column-reverse;
    // 从左向右 | 从右向左 | 从上向下 | 从下向上
}

2、flex-wrap : 如果一行排不下，如何换行

.parent {
    flex-wrap: nowrap | wrap | wrap-reverse;
    // 不换行 | 换行，第一行在上面 | 换行，第一行在下面
}

3、flex-flow : 是 flex-direction 和 flex-wrap 的简写形式，默认 row  nowrap。

.parent {
    flex-flow: <flex-direction>  <flex-wrap>;
}

4、justify-content : 横向对齐方式

.parent {
    justify-content: flex-start | flex-end | center | space-between | space-around;
    // 左对齐 | 右对齐 | 居中 | 两边对齐 | 间隔相等，项目之间的间隔比项目与边框的间隔大一倍
}

5、align-items : 纵向对其方式

.parent {
    align-items: flex-start | flex-end | center | baseline | stretch;
    // 上对齐 | 下对齐 | 居中 | 项目的第一行文字的基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度
}

6、align-content : 有多行时，每行在纵向上的对齐方式

.parent {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    // 上对齐 | 下对齐 | 中点对齐 | 两端对齐 | 间隔相等，中间间隔比与边框间隔大一倍 | 铺满
}

4、项目的属性 (在子元素上)

子元素的属性：

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

1、order : 子元素的排列顺序，数值越小越靠前，默认为 0 .

.children {
    order: <interger>;
    // 整数
}

2、flex-grow : 子元素放大比例，默认为 0 ，即如果存在剩余空间，也不放大。

.children {
    flex-grow: <number>;
    // 数字
}

3、flex-shrink : 子元素缩小比例，默认为 1 ，即如果空间不足，该项目将缩小。

.children {
    flex-shrink: <number>;
    // 数字， 0 为不缩小
}

4、flex-basis : 横向占据空间，默认为 auto ，即子元素本来大小。

.children {
    flex-basis: <length> | auto;
    // 跟width和height一样的值(如350px)，将占据固定空间 | 本来大小
}

5、flex : flex-grow 和 flex-shrink 和 flex-basis 的简写，默认0 1 auto，后两个属性可选

.children {
    flex: none | <flex-grow> <flex-shrink> <flex-basis>
}

6、align-self : 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.children {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

5、Game Over