flex布局笔记1（基本概念与容器的属性）

网页布局是CSS的一个重点应用

      网页布局的传统解决方案为盒子模型，依赖于display + position + float属性。这种解决方案的缺点是对于特殊布局的实现比较麻烦，如元素的垂直居中。

      2009年W3C提出flex布局（Flexible Box）。即弹性布局。

      任何一个元素都可以作为弹性布局的容器。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex布局概念

       采用flex布局的元素成为flex容器（flex container），所有的子元素自动成为容器成员，成为容器项目（flex item）

       容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。水平主轴的起始位置叫 main start，终止位置叫 main end。垂直交叉轴的起始位置叫 cross start，终止位置叫cross end。

       项目默认沿主轴排列，单个项目占用的主轴空间叫做main size，占用的交叉轴空间叫做 cross size。

容器的属性

    容器具有以下六个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

 1.flex-direction属性：该属性决定主轴的方向，它有四个值。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

 

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

四个属性值测试

    <div style="display:flex ;border: #0f0f0f 1px solid;margin-bottom: 10px">
    <p>弹性布局1</p>
    <div style="width: 200px;height: 200px;background: #ff4d4d">
    </div>
    <div style="width: 200px;height: 200px;background:  #ff9999">
    </div>
    <div style="width: 200px;height: 200px;background:  #ffe5e5">
    </div>
</div>

<div style="display:flex ;flex-direction: row-reverse;border: #0f0f0f 1px solid;margin-bottom: 10px">
    <p>弹性布局2</p>
    <div style="width: 200px;height: 200px;background: #ff4d4d">
    </div>
    <div style="width: 200px;height: 200px;background:  #ff9999">
    </div>
    <div style="width: 200px;height: 200px;background:  #ffe5e5">
    </div>
</div>

<div style="display:flex ;flex-direction: column;border: #0f0f0f 1px solid;margin-bottom: 10px">
    <p>弹性布局3</p>
    <div style="width: 200px;height: 200px;background: #ff4d4d">
    </div>
    <div style="width: 200px;height: 200px;background:  #ff9999">
    </div>
    <div style="width: 200px;height: 200px;background:  #ffe5e5">
    </div>
</div>
<div style="display:flex ;flex-direction: column-reverse;border: #0f0f0f 1px solid;margin-bottom: 10px">
    <p>弹性布局4</p>
    <div style="width: 200px;height: 200px;background: #ff4d4d">
    </div>
    <div style="width: 200px;height: 200px;background:  #ff9999">
    </div>
    <div style="width: 200px;height: 200px;background:  #ffe5e5">
    </div>
</div>

效果如图所示

2.flex-wrap属性：默认情况下，项目都排在一条直线上。flex-flow属性定义如果一条轴线排不下，如何换行。它有3个值。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

以上是同一个div，带一个属性名字的标题和12个色块，其中只有flex-wrap值不同。三个属性的区别可以明显的看出来。

3. flex-flow属性：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

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

4.justify-content属性：justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认）：对齐方式为主轴的起始位置

flex-end：对齐方式为主轴的终止位置

center：居中对齐

space-between：两端对齐，项目之间的间隔都相等

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items属性：align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content属性：align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。