.box {        display: flex;        flex-wrap: wrap;        text-align: center;    }    .center {        background-color: #f00;        flex: 100% 1;    }    .left, .right {        flex: 100% 1;    }    .left {        background-color: #0f0;    }    .right {        background-color: #00f;    }    @media all and (min-width: 400px) {        .left, .right {            flex: 50% 1;        }    }    @media all and (min-width: 800px) {        .box {            flex-wrap: nowrap;        }        .center {            order: 2;            flex: 1;        }        .left, .right {            flex: 0 0 300px;        }        .left {            order: 1;        }        .right {            order: 3;        }    }

<div class="box">    <div class="center">        彈性盒子是 CSS3 的一種新的布局模式。        CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健?       引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。    </div>    <div class="left">left</div>    <div class="right">right</div></div>