<template>
    <div>
        <div class="content">
            <div class="row">
                <div class="content-titleZone">
                    <p class="box-title">메인축 배치</p>
                </div>
                <table class="option-table">
                    <colgroup>
                        <col style="width:20%">
                        <col style="width:80%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th>flex</th>
                            <td>아이템들을 가로 방향으로 배치</td>
                        </tr>
                        <tr>
                            <th>flex-column</th>
                            <td>아이템들을 세로 방향으로 배치</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="content-titleZone">
                    <p class="box-title">메인축 방향 정렬</p>
                </div>
                <table class="option-table">
                    <colgroup>
                        <col style="width:20%">
                        <col style="width:80%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th>justify-start</th>
                            <td>아이템들을 시작점으로 정렬합니다.</td>
                        </tr>
                        <tr>
                            <th>justify-center</th>
                            <td>아이템들을 가운데로 정렬합니다.</td>
                        </tr>
                        <tr>
                            <th>justify-between</th>
                            <td>아이템들의 “사이(between)”에 균일한 간격으로 정렬합니다.</td>
                        </tr>
                        <tr>
                            <th>justify-end </th>
                            <td>아이템들을 끝점으로 정렬합니다.</td>
                        </tr>
                    </tbody>
                </table>
                <img src="../../../resources/img/guideImg/justify.png" alt="">
            </div>
            <div class="row">
                <div class="content-titleZone">
                    <p class="box-title">수직축 방향 정렬</p>
                </div>
                <table class="option-table">
                    <colgroup>
                        <col style="width:20%">
                        <col style="width:80%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th>align-start</th>
                            <td>아이템들을 시작점으로 정렬합니다.</td>
                        </tr>
                        <tr>
                            <th>align-center</th>
                            <td>아이템들을 가운데로 정렬합니다.</td>
                        </tr>
                        <tr>
                            <th>align-end</th>
                            <td>아이템들을 끝점으로 정렬합니다.</td>
                        </tr>
                    </tbody>
                </table>
                <img src="../../../resources/img/guideImg/align.png" alt="">
            </div>
            <div class="row">
                <div class="content-titleZone">
                    <p class="box-title">너비 비율</p>
                </div>
                <table class="option-table">
                    <colgroup>
                        <col style="width:20%">
                        <col style="width:80%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th>flex5</th>
                            <td>너비 4.5%</td>
                        </tr>
                        <tr>
                            <th>flex10</th>
                            <td>너비 9.5%</td>
                        </tr>
                        <tr>
                            <th>flex15</th>
                            <td>너비 14.5%</td>
                        </tr>
                        <tr>
                            <th>flex20</th>
                            <td>너비 19.5%</td>
                        </tr>
                        <tr>
                            <th>flex25</th>
                            <td>너비 24.5%</td>
                        </tr>
                        <tr>
                            <th>flex30</th>
                            <td>너비 29.5%</td>
                        </tr>
                        <tr>
                            <th>flex35</th>
                            <td>너비 34.5%</td>
                        </tr>
                        <tr>
                            <th>flex40</th>
                            <td>너비 39.5%</td>
                        </tr>
                        <tr>
                            <th>flex45</th>
                            <td>너비 44.5%</td>
                        </tr>
                        <tr>
                            <th>flex50</th>
                            <td>너비 49.5%</td>
                        </tr>
                        <tr>
                            <th>flex55</th>
                            <td>너비 54.5%</td>
                        </tr>
                        <tr>
                            <th>flex60</th>
                            <td>너비 59.5%</td>
                        </tr>
                        <tr>
                            <th>flex65</th>
                            <td>너비 64.5%</td>
                        </tr>
                        <tr>
                            <th>flex70</th>
                            <td>너비 69.5%</td>
                        </tr>
                        <tr>
                            <th>flex75</th>
                            <td>너비 74.5%</td>
                        </tr>
                        <tr>
                            <th>flex80</th>
                            <td>너비 79.5%</td>
                        </tr>
                        <tr>
                            <th>flex85</th>
                            <td>너비 84.5%</td>
                        </tr>
                        <tr>
                            <th>flex90</th>
                            <td>너비 89.5%</td>
                        </tr>
                        <tr>
                            <th>flex95</th>
                            <td>너비 94.5%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="content-titleZone">
                    <p class="box-title">텍스트 정렬</p>
                </div>
                <table class="option-table">
                    <colgroup>
                        <col style="width:20%">
                        <col style="width:80%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th>text-lf</th>
                            <td>텍스트 왼쪽정렬</td>
                        </tr>
                        <tr>
                            <th>text-ct</th>
                            <td>텍스트 가운데정렬</td>
                        </tr>
                        <tr>
                            <th>text-rg</th>
                            <td>텍스트 오른쪽정렬</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

    },
    components: {
    },
    mounted() {
        console.log('main mounted');
    }
}
</script>