<template>
    <div>
        <api-tittle-1>弹性盒子布局——共通式样：</api-tittle-1>
        <api-tittle-2>一、方式1：旧版方式不推荐</api-tittle-2>
        <api-content>
            <api-code>
                <span class="css-text">盒子模型弹性布局：</span>flex<br>
                <span class="css-text">子元素排列垂直排列：</span>flex-direction-column<br>
                <span class="css-text">子元素自动占满剩余的空间：</span>flex-1<br>
                <span class="css-text">子元素水平居中：</span>flex-pack-center<br>
                <span class="css-text">子元素垂直居中：</span>flex-align-center<br>
                <span class="css-text">子元素垂直居中+水平居中：</span>flex-center<br>
                <span class="css-text">子元素两端对齐：</span>flex-pack-justify<br></api-code>
            <br>
            示例：子元素水平排列，水平和垂直居中。
            <api-code>&lt;div class="flex flex-center"&gt;...&lt;/div&gt;</api-code>
        </api-content>
        <api-tittle-2>二、方式2：推荐方式</api-tittle-2>
        <api-content>
            <api-code>
                <span class="css-text">flex布局：</span>flex<br>
                <span class="css-text">flex水平排 + 垂直居中 + 水平居中：</span>flex-center<br>
                <br>
                <span class="css-text">flex水平排 + 垂直居中 + 水平左对齐：</span>flex-justify-start<br>
                <span class="css-text">flex水平排 + 垂直居中 + 水平右对齐：</span>flex-justify-end<br>
                <span class="css-text">flex水平排 + 垂直居中 + 水平两端对齐：</span>flex-justify-between<br>
                <span class="css-text">flex水平排 + 垂直居中 + 水平均匀排列(周围空间相等)：</span>flex-justify-around<br>
                <span class="css-text">flex水平排 + 垂直居中 + 水平均匀排列(间隔相等)：</span>flex-justify-evenly<br>
                <br>
                <span class="css-text">flex水平排 + 水平居中 + 垂直顶部对齐：</span>flex-align-start<br>
                <span class="css-text">flex水平排 + 水平居中 + 垂直底部对齐：</span>flex-align-end<br>
                <br>
                <span class="css-text">flex垂直排：</span>flex-col<br>
                <span class="css-text">flex垂直排 + 垂直居中 + 水平居中：</span>flex-col-center<br>
                <br>
                <span class="css-text">flex垂直排 + 垂直居中 + 水平左对齐：</span>flex-col-justify-start<br>
                <span class="css-text">flex垂直排 + 垂直居中 + 水平右对齐：</span>flex-col-justify-end<br>
                <span class="css-text">flex垂直排 + 垂直居中 + 水平两端对齐：</span>flex-col-justify-between<br>
                <span class="css-text">flex垂直排 + 垂直居中 + 水平均匀排列(周围空间相等)：</span>flex-col-justify-around<br>
                <span class="css-text">flex垂直排 + 垂直居中 + 水平均匀排列(间隔相等)：</span>flex-col-justify-evenly<br>
                <br>
                <span class="css-text">flex垂直排 + 水平居中 + 垂直左对齐：</span>flex-col-align-start<br>
                <span class="css-text">flex垂直排 + 水平居中 + 垂直右对齐：</span>flex-col-align-end<br>
            </api-code>
            <br>
            <div style="margin-bottom: 10px;">
                <b>示例：点击【名称】自动复制名称；点击“盒子”显示源码(源码有加兼容处理，实际引用可不加)</b>
            </div>
            <div class="demo-ctn">
                <div class="demo-text" @click="copyText('flex-center', $event)">flex-center</div>
                <div class="box-ctn flex-center" @click="showCode('flex-center')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-ctn">
                <div class="demo-text" @click="copyText('flex-justify-start', $event)">flex-justify-start</div>
                <div class="box-ctn flex-justify-start" @click="showCode('flex-justify-start')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-ctn">
                <div class="demo-text" @click="copyText('flex-justify-end', $event)">flex-justify-end</div>
                <div class="box-ctn flex-justify-end" @click="showCode('flex-justify-end')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-ctn">
                <div class="demo-text" @click="copyText('flex-justify-between', $event)">flex-justify-between</div>
                <div class="box-ctn flex-justify-between" @click="showCode('flex-justify-between')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-ctn">
                <div class="demo-text" @click="copyText('flex-justify-around', $event)">flex-justify-around</div>
                <div class="box-ctn flex-justify-around" @click="showCode('flex-justify-around')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-ctn">
                <div class="demo-text" @click="copyText('flex-justify-evenly', $event)">flex-justify-evenly</div>
                <div class="box-ctn flex-justify-evenly" @click="showCode('flex-justify-evenly')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-ctn">
                <div class="demo-text" @click="copyText('flex-align-start', $event)">flex-align-start</div>
                <div class="box-ctn flex-align-start" @click="showCode('flex-align-start')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-ctn">
                <div class="demo-text" @click="copyText('flex-align-end', $event)">flex-align-end</div>
                <div class="box-ctn flex-align-end" @click="showCode('flex-align-end')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="ap-split-line" style="float: left;width: 98%;"/>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col-center', $event)">flex-col-center</div>
                <div class="box-col-ctn flex-col-center" @click="showCode('flex-col-center')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col-justify-start', $event)">flex-col-justify-start</div>
                <div class="box-col-ctn flex-col-justify-start" @click="showCode('flex-col-justify-start')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col-justify-end', $event)">flex-col-justify-end</div>
                <div class="box-col-ctn flex-col-justify-end" @click="showCode('flex-col-justify-end')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col-justify-between', $event)">flex-col-justify-between
                </div>
                <div class="box-col-ctn flex-col-justify-between" @click="showCode('flex-col-justify-between')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col-justify-around', $event)">flex-col-justify-around
                </div>
                <div class="box-col-ctn flex-col-justify-around" @click="showCode('flex-col-justify-around')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col-justify-evenly', $event)">flex-col-justify-evenly
                </div>
                <div class="box-col-ctn flex-col-justify-evenly" @click="showCode('flex-col-justify-evenly')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col-align-start', $event)">flex-col-align-start</div>
                <div class="box-col-ctn flex-col-align-start" @click="showCode('flex-col-align-start')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col-align-end', $event)">flex-col-align-end</div>
                <div class="box-col-ctn flex-col-align-end " @click="showCode('flex-col-align-end')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
            <div class="ap-split-line" style="float: left;width: 98%;"/>
            <div class="demo-col-ctn">
                <div class="demo-text" @click="copyText('flex-col', $event)">flex-col</div>
                <div class="box-col-ctn flex-col" @click="showCode('flex-col')">
                    <div class="box">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                </div>
            </div>
        </api-content>
    </div>
</template>

<script>
import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
import clipboard from "ap-util/util/ClipboardUtil";

export default {
    name: 'ApiCssFlex',
    components: {ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2},
    data() {

        let boxCode = {
        'flex-center': `.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    }`,

    'flex-justify-start': `.flex-justify-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,

    'flex-justify-end': `.flex-justify-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,

    'flex-justify-between': `.flex-justify-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,

    'flex-justify-around': `.flex-justify-around {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,

    'flex-justify-evenly': `.flex-justify-evenly {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-pack: distribute;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,

    'flex-align-start': `.flex-align-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}`,

    'flex-align-end': `.flex-align-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}`,

    'flex-col': `.flex-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}`,

    'flex-col-center': `.flex-col-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,
    'flex-col-justify-start': `.flex-col-justify-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,
    'flex-col-justify-end': `.flex-col-justify-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,
    'flex-col-justify-around': `.flex-col-justify-around {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,
    'flex-col-justify-between': `.flex-col-justify-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,
    'flex-col-justify-evenly': `.flex-col-justify-evenly {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -ms-flex-pack: distribute;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}`,
    'flex-col-align-start': `.flex-col-align-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}`,

    'flex-col-align-end': `.flex-col-align-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}`,
        }
        return {boxCode}
    },
    methods: {
        copyText(value, event) {
            clipboard(value, event)
        },
        showCode(type) {
            console.log(type);
            let msg = this.boxCode[type]

            msg = `<div style="line-height:14px;word-break: normal;width: auto; white-space:pre-wrap;word-wrap : break-word ">${msg}</div>`

            this.$alert(msg, type, {dangerouslyUseHTMLString: true})
        }
    }
}
</script>

<style scoped>
.css-text {
    color: #384c56;
}

.demo-ctn {
    float: left;
    margin-right: 30px;
    width: 150px;
    height: 130px;
}

.demo-col-ctn {
    float: left;
    margin-right: 30px;
    height: 200px;
    width: 150px;
}

.demo-text {
    color: #c7254e;
    cursor: pointer;
}

.box-ctn {
    width: 150px;
    height: 100px;
    background-color: #FFF2CC;
    border: 1px solid #BF8F00;
}

.box-col-ctn {
    height: 150px;
    width: 100px;
    background-color: #FFF2CC;
    border: 1px solid #BF8F00;
}

.box {
    width: 30px;
    height: 30px;
    background-color: #E2EFDA;
    border: 1px solid #548235;
}

.box-text {

}
</style>
