CaveOps | Snippets: Flex Cheatsheet

* {
    font-size: 14px;
}
html { background: #fff; }
body {
    padding: 30px;
}
table {
    width: 100%;
}

table,
td,
th {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid;
}

td,
th {
    padding: 5px;
}

CSS Before Head

HTML Head

CSS After Head

JS Before HTML Body

<center><h1 id="_flex_box">Flex-box</h1></center>
<style type="text/css">
    .flex-container {
        width: 50px;
        height: 50px;
        border: 1px solid #1482E8;
        padding: 1px;
        margin: 0 auto;
    }
    .flex-container div {
        width: 20%;
        height: 100%;
    }
    .flex-container div:nth-child(1) {
        background: #F0811A;
    }
    .flex-container div:nth-child(2) {
        background: #ffd43b;
    }
    .flex-container div:nth-child(3) {
        background: #878EA7;
    }
    .flex-container div:nth-child(4) {
        background: #2DDE1B;
    }
    .flex-container div:nth-child(5) {
        background: #F372DF;
    }
    .flex-container div:nth-child(6) {
        background: #F0331A;
    }
    .flex-container div:nth-child(7) {
        background: #F0A98A;
    }
    .flex-container div:nth-child(8) {
        background: #3FA98A;
    }

</style>
<table class="tableblock frame-all grid-all stretch">
<caption class="title">容器元素</caption>
<colgroup>
<col style="width: 20%;">
<col style="width: 60%;">
<col style="width: 20%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="3"><div class="content"><div class="paragraph">
<p><code>display</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>为所有子元素启用 <code>flex</code>。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">display</span><span class="tok-o">:</span> <span class="tok-nt">flex</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-01 .flex-container {
        display: flex;
    }
    .flex-01 .flex-container div {

    }
</style>
<div class="flex-01">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">display</span><span class="tok-o">:</span> <span class="tok-nt">inline-flex</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-02 .flex-container {
        display: inline-flex;
    }
    .flex-02 .flex-container div {

    }
</style>
<div class="flex-02">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="5"><div class="content"><div class="paragraph">
<p><code>flex-direction</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>确立主轴。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">flex-direction</span><span class="tok-o">:</span> <span class="tok-nt">row</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-03 .flex-container {
        display: flex;
        flex-direction: row;
    }
    .flex-03 .flex-container div {

    }
</style>
<div class="flex-03">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">flex-direction</span><span class="tok-o">:</span> <span class="tok-nt">row-reverse</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-04 .flex-container {
        display: flex;
        flex-direction: row-reverse;
    }
    .flex-04 .flex-container div {

    }
</style>
<div class="flex-04">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">flex-direction</span><span class="tok-o">:</span> <span class="tok-nt">column</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-05 .flex-container {
        display: flex;
        flex-direction: column;
    }
    .flex-05 .flex-container div {
        width: 100%;
        height: 20%;
    }
</style>
<div class="flex-05">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">flex-direction</span><span class="tok-o">:</span> <span class="tok-nt">column-reverse</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-06 .flex-container {
        display: flex;
        flex-direction: column-reverse;
    }
    .flex-06 .flex-container div {
        width: 100%;
        height: 20%;
    }
</style>
<div class="flex-06">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="4"><div class="content"><div class="paragraph">
<p><code>flex-wrap</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>如果子元素不能在一行内展示，则自动换行。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">flex-wrap</span><span class="tok-o">:</span> <span class="tok-nt">nowrap</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-07 .flex-container {
        display: flex;
        flex-wrap: nowrap;
    }
    .flex-07 .flex-container div {

    }
</style>
<div class="flex-07">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">flex-wrap</span><span class="tok-o">:</span> <span class="tok-nt">wrap</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-08 .flex-container {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-08 .flex-container div {
        height: 50%
    }
</style>
<div class="flex-08">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">flex-wrap</span><span class="tok-o">:</span> <span class="tok-nt">wrap-reverse</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-09 .flex-container {
        display: flex;
        flex-wrap: wrap-reverse;
    }
    .flex-09 .flex-container div {
        height: 50%;
    }
</style>
<div class="flex-09">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="7"><div class="content"><div class="paragraph">
<p><code>justify-content</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>尝试在主轴上分配额外空间。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">flex-start</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-10 .flex-container {
        display: flex;
        justify-content: flex-start;
    }
    .flex-10 .flex-container div {

    }
</style>
<div class="flex-10">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">flex-end</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-11 .flex-container {
        display: flex;
        justify-content: flex-end;
    }
    .flex-11 .flex-container div {

    }
</style>
<div class="flex-11">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">center</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-12 .flex-container {
        display: flex;
        justify-content: center;
    }
    .flex-12 .flex-container div {

    }
</style>
<div class="flex-12">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">space-between</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-13 .flex-container {
        display: flex;
        justify-content: space-between;
    }
    .flex-14 .flex-container div {

    }
</style>
<div class="flex-13">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">space-around</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-14 .flex-container {
        display: flex;
        justify-content: space-around;
    }
    .flex-14 .flex-container div {

    }
</style>
<div class="flex-14">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">space-evenly</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-15 .flex-container {
        display: flex;
        justify-content: space-evenly
    }
    .flex-15 .flex-container div {

    }
</style>
<div class="flex-15">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="6"><div class="content"><div class="paragraph">
<p><code>align-items</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>确定项目在交叉轴上的布局方式。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">flex-start</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-16 .flex-container {
        display: flex;
        align-items: flex-start;
    }
    .flex-16 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-16">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">flex-end</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-17 .flex-container {
        display: flex;
        align-items: flex-end;
    }
    .flex-17 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-17">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">center</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-18 .flex-container {
        display: flex;
        align-items: center;
    }
    .flex-18 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-18">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">baseline</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-19 .flex-container {
        display: flex;
        align-items: baseline;
    }
    .flex-19 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-19">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">stretch</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-20 .flex-container {
        display: flex;
        align-items: stretch;
    }
    .flex-20 .flex-container div {

    }
</style>
<div class="flex-20">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="7"><div class="content"><div class="paragraph">
<p><code>align-content</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>仅对多行内容产生影响。</p>
</div>
<div class="paragraph">
<p>此处显示的示例使用 <code>flex-wrap</code>。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">flex-start</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-21 .flex-container {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    .flex-21 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-21">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">flex-end</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-22 .flex-container {
        display: flex;
        align-content: flex-end;
        flex-wrap: wrap;
    }
    .flex-22 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-22">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">center</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-23 .flex-container {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
    }
    .flex-23 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-23">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">space-between</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-24 .flex-container {
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;
    }
    .flex-24 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-24">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">space-around</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-25 .flex-container {
        display: flex;
        align-content: space-around;
        flex-wrap: wrap;
    }
    .flex-25 .flex-container div {
        height: 20%;
    }
</style>
<div class="flex-25">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">stretch</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-26 .flex-container {
        display: flex;
        align-content: stretch;
        flex-wrap: wrap;
    }
    .flex-26 .flex-container div {
        height: 50%;
    }
</style>
<div class="flex-26">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
</tbody>
</table>
<table class="tableblock frame-all grid-all stretch">
<caption class="title">子元素</caption>
<colgroup>
<col style="width: 20%;">
<col style="width: 60%;">
<col style="width: 20%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="2"><div class="content"><div class="paragraph">
<p><code>order</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>允许你明确设置你希望每个子元素出现的顺序。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">order</span><span class="tok-o">:</span> <span class="tok-nt">整数</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-27 .flex-container {
        display: flex;
    }
    .flex-27 .flex-container div {

    }
</style>
<div class="flex-27">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="3"><div class="content"><div class="paragraph">
<p><code>flex-grow</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>允许你确定如何允许每个子元素作为整体的一部分增长。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-c">/* 适用于所有 */</span>
<span class="tok-nt">flex-grow</span><span class="tok-o">:</span> <span class="tok-nt">1</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-28 .flex-container {
        display: flex;
    }
    .flex-28 .flex-container div {
        width: auto;
        flex-grow: 1;
    }
</style>
<div class="flex-28">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-c">/* 第一个 */</span>
<span class="tok-nt">flex-grow</span><span class="tok-o">:</span> <span class="tok-nt">1</span>

<span class="tok-c">/* 第二个 */</span>
<span class="tok-nt">flex-grow</span><span class="tok-o">:</span> <span class="tok-nt">3</span>

<span class="tok-c">/* 第三个 */</span>
<span class="tok-nt">flex-grow</span><span class="tok-o">:</span> <span class="tok-nt">6</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-29 .flex-container {
        display: flex;
    }
    .flex-29 .flex-container div {
        width: auto;
    }
    .flex-29 .flex-container div:nth-child(1) {
        flex-grow: 1;
    }
    .flex-29 .flex-container div:nth-child(2) {
        flex-grow: 3;
    }
    .flex-29 .flex-container div:nth-child(3) {
        flex-grow: 6;
    }
</style>
<div class="flex-29">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="2"><div class="content"><div class="paragraph">
<p><code>flex-basis</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>在分配剩余空间之前定义元素的大小。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-c">/* 第一个 */</span>
<span class="tok-nt">flex-basis</span><span class="tok-o">:</span> <span class="tok-nt">20</span><span class="tok-o">%</span>

<span class="tok-c">/* 第二个 */</span>
<span class="tok-nt">flex-basis</span><span class="tok-o">:</span> <span class="tok-nt">40</span><span class="tok-o">%</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-30 .flex-container {
        display: flex;
    }
    .flex-30 .flex-container div {
        width: auto;
    }
    .flex-30 .flex-container div:nth-child(1) {
        flex-basis: 20%;
    }
    .flex-30 .flex-container div:nth-child(2) {
        flex-basis: 40%;
    }
</style>
<div class="flex-30">
    <div class="flex-container">
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="2"><div class="content"><div class="paragraph">
<p><code>flex-shrink</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>如有必要，允许项目缩小。</p>
</div>
<div class="paragraph">
<p>只有在设置大小或 <code>flex-basis</code> 时才真正有用。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-c">/* 第一个和第二个 */</span>
<span class="tok-nt">flex-basis</span><span class="tok-o">:</span> <span class="tok-nt">100</span><span class="tok-o">%</span>

<span class="tok-c">/* 第二个 */</span>
<span class="tok-nt">flex-shrink</span><span class="tok-o">:</span> <span class="tok-nt">2</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-31 .flex-container {
        display: flex;
    }
    .flex-31 .flex-container div {
        width: auto;
        flex-basis: 100%;
    }
    .flex-31 .flex-container div:nth-child(2) {
        flex-shrink: 2;
    }
</style>
<div class="flex-31">
    <div class="flex-container">
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="2"><div class="content"><div class="paragraph">
<p><code>align-self</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>设置单个项目的对齐方式。</p>
</div>
<div class="paragraph">
<p>有关选项参考 <code>align-items</code>。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-c">/* 第三个 */</span>
<span class="tok-nt">align-self</span><span class="tok-o">:</span> <span class="tok-nt">flex-end</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .flex-32 .flex-container {
        display: flex;
    }
    .flex-32 .flex-container div {
        height: 20%;
    }
    .flex-32 .flex-container div:nth-child(3) {
        align-self: flex-end
    }
</style>
<div class="flex-32">
    <div class="flex-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
</tbody>
</table>

HTML Body

HTML Foot

JS After HTML Body