flex属性入坑指南

flex布局

什么是flex布局？

网站中使用flex布局的元素，叫做flex容器，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end，如下图：

flex有哪些属性呢？

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

如何实现1:2:3布局？

<div class="container">
    <div class="item-1 border" />
    <div class="item-2 border" />
    <div class="item-3 border" />
</div>
<style>
    .container { display: flex; max-width: 300px }
    .border { border: 1px solid #ccc; height: 50px; }
    .item-1 { flex: 1; }
    .item-2 { flex: 2; }
    .item-3 { flex: 3; }
</style>

flex-direction属性

• row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
• row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
• column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
• column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。

1. row

.container { flex-direction: row; }

1. row-reverse

.container { flex-direction: row-reverse; }

1. column

.container { dflex-direction: column; }

1. column-reverse

.container { flex-direction: column-reverse; }

flex-wrap的属性

• nowrap（默认）：不换行（列）。
• wrap：主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。
• wrap-reverse：主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。

1. nowarp

.container { width: 200px; flex-wrap: nowrap; flex-direction: row; }

1. warp && row

.container { flex-wrap: wrap; flex-direction: row; }

1. warp-reverse && row

.container { flex-wrap: warp-reverse; flex-direction: row; }

1. warp && column

.container { flex-wrap: warp; flex-direction: column; }

1. wrap-reverse && column

.container { flex-wrap: wrap-reverse; flex-direction: column; }

1. warp && row-reverse

.container { flex-wrap: wrap; flex-direction: row-reverse; }

1. warp-reverse && row-reverse

.container { flex-wrap: wrap-reverse; flex-direction: row-reverse; }

1. warp && column-reverse

.container { flex-wrap: wrap; flex-direction: column-reverse; }

1. warp-reverse && column-reverse

.container { flex-wrap: wrap-reverse; flex-direction: column-reverse; }

flex-flow

justify-content

• flex-start（默认）：与主轴的起点对齐。
• flex-end：与主轴的终点对齐。
• center：与主轴的中点对齐。
• space-between：两端对齐主轴的起点与终点。
• space-around：每个项目两侧的间隔相等。

1. flex-start

.container { justify-content: flex-start; }

1. flex-end

.container { justify-content: flex-end; }

1. center

.container { justify-content: center; }

1. space-between

.container { justify-content: space-between; }

1. space-around

.container { justify-content: space-around; }

align-items

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，项目将占满整个容器的高度。

1. flex-start

.container { display: flex; align-items: flex-start; }

1. flex-end

.container { display: flex; align-items: flex-end; }

1. center

.container { display: flex; align-items: center; }

1. baseline

.container { display: flex; align-items: baseline; }

.container { display: flex; height: 200px; align-items: baseline; }
.item1 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 8px; }
.item2 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 16px; }
.item3 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 24px; }
.item4 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 32px; }
.item5 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 40px; }

1. stretch

.container { display: flex; height: 200px; }
.item { width: 50px; border: 1px solid #ccc; }

order(排列顺序)

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>
<style>
    .container { display: flex; height: 200px; }
    .item1 { width: 50px; height: 50px; border: 1px solid #ccc; order: 1; }
    .item2 { width: 100px; height: 50px; border: 1px solid #ccc; order: 3; }
    .item3 { width: 50px; height: 50px; border: 1px solid #ccc; order: 2; }
</style>

flex-grow(放大比例，默认为0，即如果存在剩余空间，也不放大。)

<div class="container">
    <div class="item1 border">1</div>
    <div class="item2 border">2</div>
    <div class="item3 border">3</div>
</div>

<style>
    .border { border: 1px solid #ccc; }
    .container { display: flex; height: 200px; }
    .item1 { width: 50px; height: 50px; order: 1; }
    .item2 { width: 100px; height: 50px; order: 3; flex-grow: .5 }
    .item3 { width: 50px; height: 50px; order: 2; }
</style>

没有加属性之前：

加了以后：

flex-shrink(缩小比例，默认为1，即如果空间不足，该项目将缩小。)

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>
<style>
    .container { display: flex; height: 100px; width: 400px; }
    .item1 { width: 100px; height: 50px; border: 1px solid #ccc; flex-shrink: 0; }
    .item2 { width: 300px; height: 50px; border: 1px solid #ccc; flex-shrink: 1; }
    .item3 { width: 100px; height: 50px; border: 1px solid #ccc; flex-shrink: 0; }
</style>

没有加属性前：

加了以后：