这篇文章上次修改于 2083 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

display: flex; /将块级元素转换成弹性盒容器/

display: inline-flex;/行级元素转换成弹性盒容器/

 *{ margin: 0; padding: 0;}
        li{ list-style: none; }
        .wrap{
            display: flex; /*将块级元素转换成弹性盒容器*/
        }
        .wrap1{
            /*flex-direction: 设置主轴方向（写在弹性容器上）*/
            flex-direction: row; /*默认值，主轴方向为水平方向，排列次序与页面文档次序相同*/
            flex-direction: row-reverse;/*主轴方向为水平方向，排列次序与页面文档次序相反*/
            flex-direction: column;/*主轴方向为垂直方向，排列次序与页面文档次序相同*/
            flex-direction: column-reverse;/*主轴方向为垂直方向，排列次序与页面文档次序相反*/
        }
        .wrap li{
            height: 100px;
            width: 100px;
            background: yellow;
            border: 2px solid;
        }

        .wrap2{
            /*flex-wrap: 设置弹性子元素在一条轴上排不下时的换行方式（写在弹性容器上）*/
            flex-wrap: wrap; /*换行，第一行在上方显示*/
            flex-wrap: wrap-reverse;/*换行，第一行在下方显示*/
            flex-wrap: nowrap;/*默认值，不换行*/
        }
        .wrap2 li{
            width: 500px;
            background: orange;
        }

        .wrap3{
            /*justify-content: 设置弹性子元素在主轴方向上的对齐方式（写在弹性容器上）*/
            justify-content: flex-start;/* 默认值，子元素位于弹性盒的开头位置 */
            justify-content: flex-end; /* 子元素位于弹性盒的终点位置 */
            justify-content: center;/* 子元素位于弹性盒的中点位置 */
            justify-content: space-between;/* 子元素与子元素之间留有空白空间 */
            justify-content: space-around;/* 子元素之前、之间、之后，都留有空白空间 */
        }
    </style>
</head>
<body>
<ul class="wrap wrap1">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li>
    <li>content4</li>
    <li>content5</li>
</ul>
<ul class="wrap wrap2">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li>
    <li>content4</li>
    <li>content5</li>
</ul>
<ul class="wrap wrap3">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li>
    <li>content4</li>
    <li>content5</li>
</ul>

2019-03-13_000931.jpg

 * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .wrap {
            display: flex;
            /*将块级元素转换成弹性盒容器*/
        }
        
        .wrap li {
            /*height: 100px;*/
            width: 100px;
            background: yellow;
            border: 2px solid;
        }
        
        .wrap1 {
            height: 200px;
            background: #f00;
            /*
            align-items: 设置子元素在交叉轴上的对齐方式（写在弹性容器上）
            */
            /* align-items: flex-end; */
            /* 子元素在交叉轴的终点对齐*/
            /* align-items: flex-start; */
            子元素在交叉轴的起点对齐
            /* align-items: center; */
            /* 子元素在交叉轴的中点对齐 */
            /* align-items: baseline;子元素在第一行文字的基线对齐 */
            /* align-items: stretch;默认值，子元素在没有设置高度或高度值为auto时，占满整个容器的高度 */
        }
        
        .wrap1 li:last-child {
            line-height: 80px;
        }
        
        .wrap1 li:nth-child(1) {
            height: 120px;
        }
        
        .wrap1 li:nth-child(3) {
            height: 100px;
        }
        
        .wrap2 {
            height: 500px;
            background: orange;
            flex-wrap: wrap;
            /*align-content 设置多根轴线的对其方式，如果只有一根轴线，属性失效（写在弹性容器上）*/
            align-content: stretch;
            /*默认值，轴线占满整个交叉轴*/
            align-content: flex-start;
            /*与交叉轴的起点对齐*/
            align-content: flex-end;
            /*与交叉轴的终点对齐*/
            align-content: center;
            /*与交叉轴的中点对齐*/
            align-content: space-between;
            /*与交叉轴的两端对齐，轴线之间的留白*/
            align-content: space-around;
            /*每根轴线两侧都有留白*/
        }
        
        .wrap2 li {
            width: 500px;
            height: 100px;
        }
    </style>
</head>

<body>
    <ul class="wrap wrap1">
        <li>content1</li>
        <li>content2</li>
        <li>content3</li>
        <li>content4</li>
        <li>content5</li>
    </ul>
    <ul class="wrap wrap2">
        <li>content1</li>
        <li>content2</li>
        <li>content3</li>
        <li>content4</li>
        <li>content5</li>
    </ul>
    <ul class="wrap wrap3">
        <li>content1</li>
        <li>content2</li>
        <li>content3</li>
        <li>content4</li>
        <li>content5</li>
    </ul>

2019-03-13_001249.jpg

2019-03-13_001553.jpg

  *{ margin: 0; padding: 0;}
        li{ list-style: none; }
        .wrap{
            display: flex; /*将块级元素转换成弹性盒容器*/
        }
        .wrap li{
            /*height: 100px;*/
            width: 100px;
            background: yellow;
            border: 2px solid;
        }
        /*
        order属性，设置子元素的排列次序（写在子元素上）
            order: n; n为数值，不加单位，默认值为0，数值越小，排列次序越靠前
        */
        .wrap1 li:nth-child(1){
            order: 1;
        }
        .wrap1 li:nth-child(4){
            order: 2;
        }
        .wrap1 li:nth-child(5){
            order: 1;
        }
        .wrap1 li:nth-child(3){
            order: -1;
        }

        /*
        flex-grow属性：设置子元素的放大比例（写在子元素上）
            flex-grow: n； n表示数值，没有单位，默认值为0，表示不放大
        */
        .wrap2 li:nth-child(1){
            flex-grow: 3;
        }
        .wrap2 li:nth-child(2){
            flex-grow: 1;
        }

        /*
        flex-shrink属性：设置子元素的缩小比例（写在子元素上）
            flex-shrink: n; n表示数值，没有单位；默认值为1，表示当空间不足时，等比例缩小；值为0时，当空间不足时，不缩小；负值无效
        */
        .wrap3 li{
            width: 500px;
        }
        .wrap3 li:nth-child(1){
            flex-shrink: 1;
        }
        .wrap3 li:nth-child(2){
            flex-shrink: 0;
        }
    </style>