弹性框网格布局系统用法演示

Flexbox Grid System

css3, flex, grid

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1353
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    padding: 50px;
    margin: 0;
    font-family: sans-serif;
}
.container {
    background: whitesmoke;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.content {
    background: rgba(255, 255, 255, 1);
    padding: .5em;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.Grid {
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(255, 255, 0, .5);
    box-shadow: inset 0 0 0 1px #aaa;
    margin: 1em 0;
    font-size: 12px;
}
.Grid--flexDirection_row {
    flex-direction: row;
}
.Grid--flexDirection_rowReverse {
    flex-direction: row-reverse;
}
.Grid--flexDirection_column {
    flex-direction: column;
}
.Grid--flexDirection_columnReverse {
    flex-direction: column-reverse;
}
.Grid--flexWrap_wrap {
    flex-wrap: wrap;
}
.Grid--flexWrap_wrapReverse {
    flex-wrap: wrap-reverse;
}
.Grid--flexWrap_nowrap {
    flex-wrap: nowrap;
}
.Grid--justifyContent_flexStart {
    justify-content: flex-start;
}
.Grid--justifyContent_flexEnd {
    justify-content: flex-end;
}
.Grid--justifyContent_center {
    justify-content: center;
}
.Grid--justifyContent_spaceBetween {
    justify-content: space-between;
}
.Grid--justifyContent_spaceAround {
    justify-content: space-around;
}
.Grid--alignItems_flexStart {
    align-items: flex-start;
}
.Grid--alignItems_flexEnd {
    align-items: flex-end;
}
.Grid--alignItems_center {
    align-items: center;
}
.Grid--alignItems_stretch {
    align-items: stretch;
}
.Grid--alignItems_baseline {
    align-items: baseline;
}
.Grid--alignContent_flexStart {
    align-content: flex-start;
}
.Grid--alignContent_flexEnd {
    align-content: flex-end;
}
.Grid--alignContent_center {
    align-content: center;
}
.Grid--alignContent_spaceBetween {
    align-content: space-between;
}
.Grid--alignContent_spaceAround {
    align-content: space-around;
}
.Grid--alignContent_stretch {
    align-content: stretch;
}
/*.Grid--alignContent:[flexStart|flexEnd|center|spaceBetween|spaceAround]*/

.Grid-cell {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
    box-shadow: inset 0 0 0 1px #aaa;
    background: rgba(255, 255, 255, .5);
}
.Grid-cell--shrink {
    flex: 0 0 auto;
}
.Grid-cell--alignSelf_flexStart {
    align-self: flex-start;
}
.Grid-cell--alignSelf_flexEnd {
    align-self: flex-end;
}
.Grid-cell--alignSelf_center {
    align-self: center;
}
.Grid-cell--alignSelf_stretch {
    align-self: stretch;
}
.Grid-cell--alignSelf_baseline {
    align-self: baseline;
}
.Grid-cell--order_1 {
    order: 1;
}
.Grid-cell--order_2 {
    order: 2;
}
.Grid-cell--order_3 {
    order: 3;
}
.Grid-cell--order_4 {
    order: 4;
}
.Grid-cell--order_5 {
    order: 5;
}
.Grid-cell--order_6 {
    order: 6;
}
.Grid-cell--order_7 {
    order: 7;
}
.Grid-cell--order_8 {
    order: 8;
}
.Grid-cell--order_9 {
    order: 9;
}
.Grid-cell--order_10 {
    order: 10;
}
.Grid-cell--order_11 {
    order: 11;
}
.Grid-cell--order_12 {
    order: 12;
}
.Grid-cell--order_-1 {
    order: -1;
}
.Grid-cell--order_-2 {
    order: -2;
}
.Grid-cell--order_-3 {
    order: -3;
}
.Grid-cell--order_-4 {
    order: -4;
}
.Grid-cell--order_-5 {
    order: -5;
}
.Grid-cell--order_-6 {
    order: -6;
}
.Grid-cell--order_-7 {
    order: -7;
}
.Grid-cell--order_-8 {
    order: -8;
}
.Grid-cell--order_-9 {
    order: -9;
}
.Grid-cell--order_-10 {
    order: -10;
}
.Grid-cell--order_-11 {
    order: -11;
}
.Grid-cell--order_-12 {
    order: -12;
}
.Grid-cell--flexBasis_1of12 {
    flex-basis: 8.333%;
    max-width: 8.333%;
}
.Grid-cell--flexBasis_2of12 {
    flex-basis: 16.667%;
    max-width: 16.667%;
}
.Grid-cell--flexBasis_3of12 {
    flex-basis: 25%;
    max-width: 25%;
}
.Grid-cell--flexBasis_4of12 {
    flex-basis: 33.333%;
    max-width: 33.333%;
}
.Grid-cell--flexBasis_5of12 {
    flex-basis: 41.667%;
    max-width: 41.667%;
}
.Grid-cell--flexBasis_6of12 {
    flex-basis: 50%;
    max-width: 50%;
}
.Grid-cell--flexBasis_7of12 {
    flex-basis: 58.333%;
    max-width: 58.333%;
}
.Grid-cell--flexBasis_8of12 {
    flex-basis: 66.667%;
    max-width: 66.667%;
}
.Grid-cell--flexBasis_9of12 {
    flex-basis: 75%;
    max-width: 75%;
}
.Grid-cell--flexBasis_10of12 {
    flex-basis: 83.333%;
    max-width: 83.333%;
}
.Grid-cell--flexBasis_11of12 {
    flex-basis: 91.667%;
    max-width: 91.667%;
}
.Grid-cell--flexBasis_12of12 {
    flex-basis: 100%;
    max-width: 100%;
}
.Grid-cell--offset_1of12 {
    margin-left: 8.333%;
}
.Grid-cell--offset_2of12 {
    margin-left: 16.667%;
}
.Grid-cell--offset_3of12 {
    margin-left: 25%;
}
.Grid-cell--offset_4of12 {
    margin-left: 33.333%;
}
.Grid-cell--offset_5of12 {
    margin-left: 41.667%;
}
.Grid-cell--offset_6of12 {
    margin-left: 50%;
}
.Grid-cell--offset_7of12 {
    margin-left: 58.333%;
}
.Grid-cell--offset_8of12 {
    margin-left: 66.667%;
}
.Grid-cell--offset_9of12 {
    margin-left: 75%;
}
.Grid-cell--offset_10of12 {
    margin-left: 83.333%;
}
.Grid-cell--offset_11of12 {
    margin-left: 91.667%;
}
.Grid-cell--offset_12of12 {
    margin-left: 100%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_1of12 {
    margin-left: 0;
    margin-right: 8.333%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_2of12 {
    margin-left: 0;
    margin-right: 16.667%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_3of12 {
    margin-left: 0;
    margin-right: 25%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_4of12 {
    margin-left: 0;
    margin-right: 33.333%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_5of12 {
    margin-left: 0;
    margin-right: 41.667%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_6of12 {
    margin-left: 0;
    margin-right: 50%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_7of12 {
    margin-left: 0;
    margin-right: 58.333%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_8of12 {
    margin-left: 0;
    margin-right: 66.667%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_9of12 {
    margin-left: 0;
    margin-right: 75%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_10of12 {
    margin-left: 0;
    margin-right: 83.333%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_11of12 {
    margin-left: 0;
    margin-right: 91.667%;
}
.Grid--flexDirection_rowReverse > .Grid-cell--offset_12of12 {
    margin-left: 0;
    margin-right: 100%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_1of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_1of12 {
    max-width: none;
    max-height: 8.333%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_2of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_2of12 {
    max-width: none;
    max-height: 16.667%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_3of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_3of12 {
    max-width: none;
    max-height: 25%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_4of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_4of12 {
    max-width: none;
    max-height: 33.333%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_5of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_5of12 {
    max-width: none;
    max-height: 41.667%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_6of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_6of12 {
    max-width: none;
    max-height: 50%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_7of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_7of12 {
    max-width: none;
    max-height: 58.333%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_8of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_8of12 {
    max-width: none;
    max-height: 66.667%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_9of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_9of12 {
    max-width: none;
    max-height: 75%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_10of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_10of12 {
    max-width: none;
    max-height: 83.333%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_11of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_11of12 {
    max-width: none;
    max-height: 91.667%;
}
.Grid--flexDirection_column > .Grid-cell--flexBasis_12of12,
.Grid--flexDirection_columnReverse > .Grid-cell--flexBasis_12of12 {
    max-width: none;
    max-height: 100%;
}
.Grid--withGutters {
    margin-left: -.5em;
    margin-right: -.5em;
}
.Grid--withGutters > .Grid-cell {
    padding-left: .5em;
    padding-right: .5em;
}

HTML

<div class="container">
    <h2>display: flex</h2>
    <h3>.Grid</h3>
    <div class="Grid">
        <div class="Grid-cell">
            <div class="content">.Grid-cell</div>
        </div>
        <div class="Grid-cell">
            <div class="content">.Grid-cell</div>
        </div>
    </div>
    <h3>.Grid--withGutters</h3>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell">
            <div class="content">.Grid-cell</div>
        </div>
        <div class="Grid-cell">
            <div class="content">.Grid-cell</div>
        </div>
    </div>
</div>
<div class="container">
    <h2>flex-basis: [1…12]</h2>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis</a>
    </p>

<p>Grid-cells without widths fill the space evenly which means we can easily have 2up, 3up, 4up etc without any additional Grid-cell modifiers.</p>

<div class="Grid Grid--withGutters">
        <div class="Grid-cell">
            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
    </div>

<div class="Grid Grid--withGutters">
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
        <div class="Grid-cell">
            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        </div>
    </div>

<p>Fixed widths can be combined with undefined widths which will cause the undefined widths to fill the remaining space.
    </p>

<div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_5of12">
            <div class="content">5/12 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cumque debitis distinctio eaque error explicabo facere, itaque porro quisquam recusandae sed, vero vitae voluptatem. Accusantium minus modi quia recusandae voluptatibus!
            </div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_2of12">
            <div class="content">2/12</div>
        </div>
        <div class="Grid-cell">
            <div class="content">fill remaining</div>
        </div>
        <div class="Grid-cell">
            <div class="content">fill remaining</div>
        </div>
    </div>

<p>Adding .Grid-cell--shrink will shrink a cell to it's smallest width.</p>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--shrink">
            <div class="content">.Grid-cell.Grid-cell--shrink</div>
        </div>
        <div class="Grid-cell">
            <div class="content"></div>
        </div>
    </div>
</div>

<h2>flex-direction: [row|row-reverse]</h2>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction</a>
    </p>
    <img src="https://cdn.css-tricks.com/wp-content/uploads/2014/05/flex-direction1.svg" />

<h3>.Grid--flexDirection_row</h3>

<div class="Grid Grid--withGutters Grid--flexDirection_row">
        <div class="Grid-cell Grid-cell--flexBasis_2of12">
            <div class="content">First</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_2of12">
            <div class="content">Second</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_2of12">
            <div class="content">Third</div>
        </div>
    </div>
    <h3>.Grid--flexDirection_rowReverse</h3>

<div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_2of12">
            <div class="content">First</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_2of12">
            <div class="content">Second</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_2of12">
            <div class="content">Third</div>
        </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</div>

<h2>flex-wrap: [wrap|wrap-reverse|nowrap]</h2>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap</a>
    </p>
    <img src="https://cdn.css-tricks.com/wp-content/uploads/2014/05/flex-wrap.svg" />

<h3>.Grid--flexWrap_wrap</h3>
    <div class="Grid Grid--withGutters Grid--flexWrap_wrap">
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">First 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Second 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Third 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Fourth 6/12</div>
        </div>
    </div>

<h3>.Grid--flexWrap_wrapReverse</h3>
    <div class="Grid Grid--withGutters Grid--flexWrap_wrapReverse">
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">First 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Second 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Third 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Fourth 6/12</div>
        </div>
    </div>

<h3>.Grid--flexWrap_nowrap</h3>
    <div class="Grid Grid--withGutters Grid--flexWrap_nowrap">
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">First 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Second 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Third 6/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content">Fourth 6/12</div>
        </div>
    </div>
</div>

<h2>justify-content: [flexStart|flexEnd|center|spaceBetween|spaceAround]</h2>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content</a>
    </p>
    <img src="https://cdn.css-tricks.com/wp-content/uploads/2013/04/justify-content.svg" />

<h3>.Grid--justifyContent_flexStart</h3>

<div class="Grid Grid--withGutters Grid--justifyContent_flexStart">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
    <h3>.Grid--justifyContent_flexEnd</h3>

<div class="Grid Grid--withGutters Grid--justifyContent_flexEnd">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
    <h3>.Grid--justifyContent_center</h3>

<div class="Grid Grid--withGutters Grid--justifyContent_center">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
    <h3>.Grid--justifyContent_spaceBetween</h3>

<div class="Grid Grid--withGutters Grid--justifyContent_spaceBetween">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
    <h3>.Grid--justifyContent_spaceAround</h3>

<div class="Grid Grid--withGutters Grid--justifyContent_spaceAround">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
</div>

<h2>align-items: [flexStart|flexEnd|center|spaceBetween|spaceAround]</h2>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">https://developer.mozilla.org/en-US/docs/Web/CSS/align-items</a>
    </p>
    <img src="https://cdn.css-tricks.com/wp-content/uploads/2014/05/align-items.svg" />

<h3>.Grid--alignItems_flexStart</h3>

<div class="Grid Grid--withGutters Grid--alignItems_flexStart" style="height: 100px;">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
    <h3>.Grid--alignItems_flexEnd</h3>

<div class="Grid Grid--withGutters Grid--alignItems_flexEnd" style="height: 100px;">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
    <h3>.Grid--alignItems_center</h3>

<div class="Grid Grid--withGutters Grid--alignItems_center" style="height: 100px;">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
    <h3>.Grid--alignItems_stretch</h3>

<div class="Grid Grid--withGutters Grid--alignItems_stretch" style="height: 100px;">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">Second 3/12</div>
        </div>
    </div>
    <h3>.Grid--alignItems_baseline</h3>

<div class="Grid Grid--withGutters Grid--alignItems_baseline" style="height: 100px;">
        <div class="Grid-cell Grid-cell--flexBasis_3of12">
            <div class="content">First 3/12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_6of12">
            <div class="content" style="font-size: 30px">Second 3/12</div>
        </div>
    </div>

</div>

<h3>.Grid--alignContent_flexStart</h3>
    <div class="Grid Grid--withGutters Grid--alignContent_flexStart" style="height: 150px">
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
    </div>

<h3>.Grid--alignContent_flexEnd</h3>
    <div class="Grid Grid--withGutters Grid--alignContent_flexEnd" style="height: 150px">
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
    </div>

<h3>.Grid--alignContent_center</h3>
    <div class="Grid Grid--withGutters Grid--alignContent_center" style="height: 150px">
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
    </div>

<h3>.Grid--alignContent_spaceBetween</h3>
    <div class="Grid Grid--withGutters Grid--alignContent_spaceBetween" style="height: 150px">
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
    </div>

<h3>.Grid--alignContent_spaceAround</h3>
    <div class="Grid Grid--withGutters Grid--alignContent_spaceAround" style="height: 150px">
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
    </div>

<h3>.Grid--alignContent_stretch</h3>
    <div class="Grid Grid--withGutters Grid--alignContent_stretch" style="height: 150px">
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
        <div class="Grid-cell Grid-cell--flexBasis_12of12">
            <div class="content">.Grid-cell--flexBasis_12of12</div>
        </div>
    </div>
</div>

<h2>align-self: [flexStart|flexEnd|center|baseline|stretch]</h2>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">https://developer.mozilla.org/en-US/docs/Web/CSS/align-self</a>
    </p>
    <img src="https://cdn.css-tricks.com/wp-content/uploads/2014/05/align-self.svg" />

<div class="Grid Grid--withGutters" style="height: 200px;">
        <div class="Grid-cell Grid-cell--alignSelf_flexStart">
            <div class="content">.Grid-cell--alignSelf_flexStart</div>
        </div>
        <div class="Grid-cell Grid-cell--alignSelf_flexEnd">
            <div class="content">.Grid-cell--alignSelf_flexEnd</div>
        </div>
        <div class="Grid-cell Grid-cell--alignSelf_center">
            <div class="content">.Grid-cell--alignSelf_center</div>
        </div>
        <div class="Grid-cell Grid-cell--alignSelf_baseline">
            <div class="content">.Grid-cell--alignSelf_baseline</div>
        </div>
        <div class="Grid-cell Grid-cell--alignSelf_baseline">
            <div class="content" style="font-size:1.6em">.Grid-cell--alignSelf_baseline</div>
        </div>
        <div class="Grid-cell Grid-cell--alignSelf_stretch">
            <div class="content">.Grid-cell--alignSelf_stretch</div>
        </div>
    </div>

</div>

<h2>order: [1…12]</h2>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">https://developer.mozilla.org/en-US/docs/Web/CSS/order</a>
    </p>
    <img src="https://cdn.css-tricks.com/wp-content/uploads/2014/05/order.svg" />

<h3>.Grid--flexDirection_row</h3>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--order_6">
            <div class="content">.Grid-cell--order_6</div>
        </div>
        <div class="Grid-cell Grid-cell--order_5">
            <div class="content">.Grid-cell--order_5</div>
        </div>
        <div class="Grid-cell Grid-cell--order_4">
            <div class="content">.Grid-cell--order_4</div>
        </div>
        <div class="Grid-cell Grid-cell--order_3">
            <div class="content">.Grid-cell--order_3</div>
        </div>
        <div class="Grid-cell Grid-cell--order_2">
            <div class="content">.Grid-cell--order_2</div>
        </div>
        <div class="Grid-cell Grid-cell--order_1">
            <div class="content">.Grid-cell--order_1</div>
        </div>
        <div class="Grid-cell Grid-cell--order_12">
            <div class="content">.Grid-cell--order_12</div>
        </div>
        <div class="Grid-cell Grid-cell--order_11">
            <div class="content">.Grid-cell--order_11</div>
        </div>
        <div class="Grid-cell Grid-cell--order_10">
            <div class="content">.Grid-cell--order_10</div>
        </div>
        <div class="Grid-cell Grid-cell--order_9">
            <div class="content">.Grid-cell--order_9</div>
        </div>
        <div class="Grid-cell Grid-cell--order_8">
            <div class="content">.Grid-cell--order_8</div>
        </div>
        <div class="Grid-cell Grid-cell--order_7">
            <div class="content">.Grid-cell--order_7</div>
        </div>
    </div>

<h3>.Grid--flexDirection_rowReverse</h3>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell">
            <div class="content">1/6</div>
        </div>
        <div class="Grid-cell Grid-cell--order_1">
            <div class="content">2/6 .Grid-cell--order_1
                <p>2nd in dom. Forced to the end because <code>order: 1</code> which is greater than <code>order: 0</code> (initial value), then reversed becuase <code>flex-direction: row-reverse</code>… so it's visually first.</p>
            </div>
        </div>
        <div class="Grid-cell">
            <div class="content">3/6</div>
        </div>
        <div class="Grid-cell">
            <div class="content">4/6</div>
        </div>
    </div>
</div>

<h2>offset: [1…12]</h2>
    <h3>.Grid--flexDirection_row</h3>
    <div class="Grid Grid--withGutters Grid--flexDirection_row">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_1of12">
            <div class="content">.Grid-cell--offset_1of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_2of12">
            <div class="content">.Grid-cell--offset_2of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_3of12">
            <div class="content">.Grid-cell--offset_3of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_4of12">
            <div class="content">.Grid-cell--offset_4of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_5of12">
            <div class="content">.Grid-cell--offset_5of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_6of12">
            <div class="content">.Grid-cell--offset_6of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_7of12">
            <div class="content">.Grid-cell--offset_7of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_8of12">
            <div class="content">.Grid-cell--offset_8of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_9of12">
            <div class="content">.Grid-cell--offset_9of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_10of12">
            <div class="content">.Grid-cell--offset_10of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_11of12">
            <div class="content">.Grid-cell--offset_11of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_12of12">
            <div class="content">.Grid-cell--offset_12of12</div>
        </div>
    </div>

<h3>.Grid--flexDirection_rowReverse</h3>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_1of12">
            <div class="content">.Grid-cell--offset_1of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_2of12">
            <div class="content">.Grid-cell--offset_2of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_3of12">
            <div class="content">.Grid-cell--offset_3of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_4of12">
            <div class="content">.Grid-cell--offset_4of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_5of12">
            <div class="content">.Grid-cell--offset_5of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_6of12">
            <div class="content">.Grid-cell--offset_6of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_7of12">
            <div class="content">.Grid-cell--offset_7of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_8of12">
            <div class="content">.Grid-cell--offset_8of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_9of12">
            <div class="content">.Grid-cell--offset_9of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_10of12">
            <div class="content">.Grid-cell--offset_10of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_11of12">
            <div class="content">.Grid-cell--offset_11of12</div>
        </div>
    </div>
    <div class="Grid Grid--withGutters Grid--flexDirection_rowReverse">
        <div class="Grid-cell Grid-cell--flexBasis_1of12 Grid-cell--offset_12of12">
            <div class="content">.Grid-cell--offset_12of12</div>
        </div>
    </div>

</div>

<div class="container">
    <h2>Nested Grids</h2>
    <h3>.Grid</h3>
    <div class="Grid">
        <div class="Grid-cell">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem est hic id laudantium maiores minima perferendis vel? Ab accusantium debitis delectus eos excepturi, modi nulla obcaecati, quod quos similique ut.
            </div>
        </div>
        <div class="Grid-cell">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem est hic id laudantium maiores minima perferendis vel? Ab accusantium debitis delectus eos excepturi, modi nulla obcaecati, quod quos similique ut.
            </div>
        </div>
        <div class="Grid-cell">
            <p>Nested Grid:</p>
            <div class="Grid" style="margin-top:0; margin-bottom: 0;">
                <div class="Grid-cell">
                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem est hic id laudantium maiores minima perferendis vel? Ab accusantium debitis delectus eos excepturi, modi nulla obcaecati, quod quos similique ut.
                    </div>
                </div>
                <div class="Grid-cell">
                    <div class="content"></div>
                </div>
                <div class="Grid-cell">
                    <div class="content"></div>
                </div>
                <div class="Grid-cell">
                    <div class="content"></div>
                </div>
            </div>
        </div>
    </div>
    <h3>.Grid--withGutters</h3>
    <div class="Grid Grid--withGutters">
        <div class="Grid-cell">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem est hic id laudantium maiores minima perferendis vel? Ab accusantium debitis delectus eos excepturi, modi nulla obcaecati, quod quos similique ut.
            </div>
        </div>
        <div class="Grid-cell">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem est hic id laudantium maiores minima perferendis vel? Ab accusantium debitis delectus eos excepturi, modi nulla obcaecati, quod quos similique ut.
            </div>
        </div>
        <div class="Grid-cell">
            <p>Nested Grid (.Grid--withGutters):</p>
            <div class="Grid Grid--withGutters" style="margin-top:0; margin-bottom: 0;">
                <div class="Grid-cell">
                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem est hic id laudantium maiores minima perferendis vel? Ab accusantium debitis delectus eos excepturi, modi nulla obcaecati, quod quos similique ut.
                    </div>
                </div>
                <div class="Grid-cell">
                    <div class="content"></div>
                </div>
                <div class="Grid-cell">
                    <div class="content"></div>
                </div>
                <div class="Grid-cell">
                    <div class="content"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <h2>Collasping Margins</h2>
    <p>Margins do not collapse with display: flex (or floats for that matter).</p>
    <div style="margin: 50px 0; background: pink">This div has a 50px margin.</div>
    <div class="Grid">
        <div class="Grid-cell">
            <div class="content" style="padding:0">
                <p style="margin: 50px 0">This paragraph has a 50px margin. It's inside a .Grid > .Grid-cell</p>
            </div>
        </div>
    </div>
    <div style="margin: 50px 0; background: pink">This div has a 50px margin.</div>
</div>

Flexbox Grid System

css3, flex, grid

编辑器支持Emmet

快捷键

Flexbox Grid System

css3, flex, grid

使用弹性网格布局实现响应式图文列表展示

HTML5 使用弹性框布局实现可选择和压缩的网格

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：