CSS笔记（Flex 布局）

本文为《Flex 布局教程：语法篇》和《Flex 布局教程：实例篇》读后所作的笔记

平常实现垂直居中比较麻烦：
比如使用margin:auto：

.parent {
    position:relative;
    height:100px;
    width:100px;
    background-color:#444;
}
.son {
    position:absolute;
    top:0px;
    bottom:0px;
    margin:auto;
    heigth:50px;
    width:50px;
    background-color:red;
}

使用transform属性，定义绝对定位后垂直移动50%，以及translate中垂直移动-50%，依靠其对照移动物的不同从而达到居中的效果：

.parent {
    position:relative;
    height:100px;
    width:100px;
    background-color:#444;
}
.son {
    position:absolute;
    top:50%;
    bottom:50%;
    transform:translate(-50%,-50%);
    heigth:50px;
    width:50px;
    background-color:red;
}

还可以定义父元素diplay:table-cell;，从而定义vertical-align:center;

除以上以外，还可以定义Flex布局

---

1 Flex 布局基本概念（IE10）

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，语法为：

div {
    display:flex;
    display:-webkit-flex; /* Safari */
}

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

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

2 属性

2.1 容器属性

以下6个属性设置在容器上：

• flex-direction：定义项目的排列方向
  
  • row：默认值，起点为左，水平向右
  • row-reverse ：起点为右，水平向左
  • column：垂直向下
  • column-reverse：垂直向上
• flex-wrap：定义换行
  
  • nowrap：不换行，假如子元素定义宽度加起来大于父元素宽度，会自行改变子元素宽度使之适应
  • wrap：换行
  • wrap-reverse：换行，且第一行在底部
• flex-flow: <flex-direction> || <flex-wrap>;：简写
• justify-content：定义对齐方式，具体对齐方式与轴的方向有关，下面假设主轴为从左到右：
  
  • flex-start：左对齐
  • flex-end：右对齐
  • center：居中
  • space-around：子元素间距相等
  • space-between：左右对齐
• align-items：定义项目在交叉轴上如何对齐
  
  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baseline：项目的第一行文字的基线对齐
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
• align-content：定义了多根轴线的对齐方式

2.1 项目属性

以下6个属性设置在项目上

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），它的默认值为auto，即项目的本来大小。
• flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，拥有两个快捷值：auto（1 1 auto）和none(0 0 auto)
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性
  
  • 属性值：auto | flex-start | flex-end | center | baseline | stretch