Justin's Words

CSS Flexbox

Posted on | In |

有一个容器：

1
2
3
4
5
6
7
<div class="container">
    <item class="item"></item>
    <item class="item"></item>
    <item class="item"></item>
    <item class="item"></item>
    <item class="item"></item>
</div>

设置容器如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
    display: flex;
    /* 内部项目排列方向 */
    flex-direction: row | row-reverse | column | column-reverse;
    /* 是否换行和换行后反过来 */
    flex-wrap: nowrap | wrap | wrap-reverse;
    /* 速写法 */
    flex-flow: <&#39;flex-direction&#39;> || <&#39;flex-wrap&#39;>;
    /* 整理版面 */
    justify-content: flex-start | flex-end | center | space-between | space-around;
    /* 排列内部项目 */
    align-items: flex-start | flex-end | center | stretch | baseline;
    /* 排列内容 */
    align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}

设置内部项目如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.item {
    /* 排列顺序 */
    order: <integer>;
    /* 是否拉长 */
    flex-grow: <number>; /* default 0 means no flex grow */
    /* 是否收缩 */
    flex-shrink: <number>; /* default 0 means no flex shrink*/
    /* 项目长度 */
    flex-basis: <length> | auto; /* default set to auto */
    /* 速写法 */
    flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ];
    /* 自排列 */
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}