css3 彈性盒子display：flex

<template>
    <div>
        <Card>
            <Row>
                <Col>
                    <div class="flex-container1">
                        <div class="flex-item">flex item 1</div>
                        <div class="flex-item">flex item 2</div>
                        <div class="flex-item">flex item 3</div>
                    </div>
                    <div class="flex-container2">
                        <div class="flex-item">flex item 1</div>
                        <div class="flex-item">flex item 2</div>
                        <div class="flex-item">flex item 3</div>
                    </div>
                    <div class="flex-container3">
                        <div class="flex-item">flex item 1</div>
                        <div class="flex-item">flex item 2</div>
                        <div class="flex-item">flex item 3</div>
                    </div>
                    <div class="flex-container4">
                        <div class="flex-item4">flex item 1</div>
                        <div class="flex-item4">flex item 2</div>
                        <div class="flex-item4">flex item 3</div>
                    </div>
                    <div class="flex-container5">
                        <div class="flex-item">flex item 1</div>
                        <div class="flex-item">flex item 2</div>
                        <div class="flex-item">flex item 3</div>
                    </div>
                    <!--align-content 屬性用於修改 flex-wrap 屬性的行爲。相似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。-->
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
export default {
    name: 'flex'
};
</script>

<style scoped>
/*body {*/
    /*!*direction: rtl;*!   // rtl = right to left */
/*}*/
.flex-container1 {
    display: -webkit-flex;
    display: flex;
    background-color: lightgrey;
}
.flex-container2 {
    display: -webkit-flex;
    display: flex;
    /*row 左對齊| row-reverse 右對齊 | column 縱向對齊 | column-reverse 反轉縱向對齊*/
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    background-color: lightgrey;
}
.flex-container3{
    display: -webkit-flex;
    display: flex;
    /*flex-start 向行頭緊挨着填充| flex-end 向行尾緊挨着填充 | center 彈性項目居中緊挨着填充。（若是剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）
    | space-between | space-around*/
    -webkit-justify-content: space-around;
    justify-content: space-around;
    background-color: lightgrey;
}
.flex-container4{
    display: -webkit-flex;
    display: flex;
    /*align-items: flex-start 緊靠住該行的側軸起始邊界 | flex-end 靠住該行的側軸結束邊界 | center 該行的側軸（縱軸）上居中放置
    | baseline 如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊 | stretch 指定側軸大小的屬性值爲'auto'*/
    -webkit-align-items: stretch;
    align-items: stretch;
    /*width: 400px;*/
    height: 250px;
    background-color: lightgrey;
}
.flex-container5{
    display: -webkit-flex;
    display: flex;
    /*flex-wrap: nowrap 彈性容器爲單行 |wrap 彈性容器爲多行 |wrap-reverse 反轉 wrap 排列 |initial|inherit;*/
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    /*width: 300px;*/
    /*height: 250px;*/
    background-color: lightgrey;
}
.flex-item4 {
    background-color: cornflowerblue;
    width: 100px;
    /*height: 100px;*/
    margin: 10px;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>