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>