---
tags: css
---

# 三欄式布局

* 以我們常見的三欄式佈局下去排版

### %數的排版方式

> html架構

 <div class="wrap">
        <ul class="news">
            <li>
                <h2>大標題</h2>
                <p class="news_content">
                    「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。
                </p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">
                    「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。
                </p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">
                    「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。
                </p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">
                    「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。
                </p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">
                    「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。
                </p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">
                    「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。
                </p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">
                    「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。
                </p>
            </li>
        </ul>
    </div>

* 定義需要開版寬度

.wrap{
    /*  最大總寬度  */
    max-width: 1024px;
    margin: 0 auto;
    padding-top: 20px;
    line-height: 1.5;
}

* 使用flex將內容併排
* flex-wrap 決定一行幾排

.news{
    display: flex;
    flex-wrap:wrap;
}

* 以100%數去做排列，例如要三排版面就是 100 / 3 = 33.3333% 在減掉margin左右的 1% = 31.3333%

.news li {
width: 31.3333%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 1em;
}


### @media判斷縮排

* 在768px 此寸時去做斷行縮成二排、因為一邊需要50% 減掉margin左右各1% = 48%

@media(max-width: 768px){
.news li {
    width: 48%;
  };
}