CSS 佈局

這篇文章，咱們來整理一下 CSS 佈局相關內容

佈局是什麼

佈局是把頁面分紅一塊一塊，按左中右、上中下等排列。

佈局分類

1. 固定寬度佈局，通常寬度爲 960 / 1000 / 1024px
2. 不固定寬度佈局，主要靠文檔流的原理佈局
3. 響應式佈局，在PC上固定寬度，在手機上不固定寬度的一種混合佈局

佈局思路

1. 從大到小，先定下大局，而後晚上每一個部分的小布局
2. 從小到大，先完成小布局，而後組成大布局

用什麼 CSS 佈局

1. 若是須要兼容 IE9 ，那咱們使用 float 佈局
2. 若是不須要兼容 IE9 。那麼，若是隻兼容最新瀏覽器，那咱們使用 grid 佈局
3. 若是不止兼容最新瀏覽器，那咱們使用 flex 佈局。

注意： 使用 float 佈局 和 flex 佈局時，必要時採用負 margin 。

float 佈局

步驟

1. 子元素上加 float: left 和 width
2. 父元素上加 .clearfix

.clearfix{
    content: '';
    display:block;
    clear: both;
}
複製代碼

使用 float 佈局，通常會留一些空間或者最後一個不設 width。

注意: IE 6/7 存在雙倍 margin 的bug，經過以下辦法解決

1. 針對 IE 6/7 ，把 margin 減半，使用 _margin
2. 給元素再加一個 display: inline-block

tips:

• 有時候 border 會干擾寬度，能夠用 outline 替換
• 經過 margin: 0 auto; 能夠設置居中。能夠優化爲 margin-left: auto; margin-right: auto; 。若是是一個塊級元素，左右外邊距 auto 能夠直接讓元素居中

flex 佈局

關於 flex 佈局，咱們經過兩部分樣式來介紹

container 容器，爲包裹區域

.container{/* 讓元素變成一個 flex 容器 */
    display: flex | inline-block; 
}
複製代碼

.container{/* 改變 item 流動方向(主軸)，默認 row */
    flex-direction: row | row-reverse | column | column-reverse;
}
複製代碼

.container{/* 改變折行，默認 nowrap 。折行不會把元素斷開 */
    flex-wrap: nowrap | wrap | wrap-reverse;
}
複製代碼

.container{/* 主軸對齊方式，默認 flex-start */
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
複製代碼

.container{/* 次軸對齊方式，默認 stretch ，子元素拉到最長的元素同樣高 */
    align-items: stretch | flex-start | flex-end | center | baseline;
}
複製代碼

.container{/*多行內容，決定了行之間的間隔*/
    align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}
複製代碼

補充：flex-flow 能夠合併 flex-direction 和 flex-wrap 使用

items 爲容器內的每個元素

• order ，默認是 0 ，若是把 order 改爲一個數，就會按 order 從小到大排列
• flex-grow ，控制變胖，若是有多餘的空間，按照值分配寬度，不寫就不分配。例如導航欄，只設置導航欄 flex-grow: 1，寬度剩餘全給導航欄
• flex-shrink，控制變瘦，通常寫 flex-shrink: 0 防止變瘦，默認是 1
• flex-basis，控制基準寬度，默認是 auto ，能夠直接用寬度代替
• flex: flex-grow flex-shrink flex-basis
• align-self，定製父元素的 align-items

items 設置 margin-left: auto，效果和 justify-content: space-between 同樣，可使 items 靠右，推薦使用 margin-left

注意：永遠不要把高度和寬度寫死

Grid 佈局

Grid 也分爲 container 和 items

.container{
    display: grid | inline-grid;
}
複製代碼

.container{/*行和列*/
    grid-template-columns: 40px 50px auto 50px 40px;
    gird-template-rows: 25% 100px auto;
}
複製代碼

.container{/*等比分佈局*/
    grid-template-columns: 1fr 1fr 1fr;
}
複製代碼

.container{/*固定一塊佈局列寬，其他等比分配剩餘寬度*/
    grid-template-columns: 1fr 50px 1fr 1fr;
}
複製代碼

.container{/*還能夠給每條線設置名字*/
    grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows:[row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
複製代碼

.item-a{/*針對上述設置，item能夠設置範圍*/
    grid-column-start: line2;
    grid-column-end: five;
    grid-row-start: row1-start;
}
複製代碼

經過 grid-template-areas 設置分區

.container{
    display: grid;
    grid-template-columns: repeat(4, 50);/*重複設置*/
    gird-template-rows: auto;
    grid-template-areas:
        "header header header header"
        "main main sider"
        ". footer footer footer";/*不但願出現內容的區域，一般用 . 命名*/
}
.item-a{
    grid-area: header;
}
.item-b{
    grid-area: main;
}
.item-c{
    grid-area: sider;
}
複製代碼

空隙 gap

.container{
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}
複製代碼

結語：一維佈局選 Flex ，二維佈局選Grid，Grid 尤爲適合不規則的佈局。