從零開始學 Web 之 CSS3（七）多列布局，伸縮佈局

時間 2019-11-17

標籤開始 web css3 css 多列佈局伸縮欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的探索之旅吧！html

1、多列布局

CSS3中新出現的多列布局 (multi-column) 是傳統 HTML 網頁中塊狀佈局模式的有力擴充。前端

這種新語法可以讓 WEB 開發人員輕鬆的讓文本呈現多列顯示。git

咱們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另外一端、而後換到下一行的行首，若是眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。因此，爲了最大效率的使用大屏幕顯示器，頁面設計中須要限制文本的寬度，讓文本按多列呈現，就像報紙上的新聞排版同樣。github

經常使用屬性：服務器

column-count: 屬性設置列的具體個數
column-width: 屬性控制列的寬度
column-gap: 兩列之間的縫隙間隔
column-rule: 規定列之間的寬度、樣式和顏色
column-span: 規定元素應橫跨多少列(1:跨1列  all:跨全部列)

max-height: 列高度 /*若是設定列的最大高度，這個時候，文本內容會從第一列開始填充，而後第二列...*/

若是設置列的寬度和設置列的個數時自動計算的寬度有衝突時，原則是「取大優先」。微信

好比：若是設置的列的寬度大於自動計算的列的寬度，那麼實際顯示的效果以設置的列的寬度爲準；若是設置的列的寬度沒法填充整個屏幕，那麼實際的寬度可能大於設置的寬度；app

若是設置的列的寬度小於自動計算的列的寬度，那麼實際顯示的效果以自動計算的的列的寬度爲準。ide

示例：佈局

.wrapper {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    /*設置多列布局*/
    /*1.設置列數*/
    column-count: 3;
    /*2.添加列間隙樣式,與邊框樣式的添加同樣*/
    column-rule: dashed 3px red;
    /*3。設置列間隙大小*/
    column-gap: 50px;
    /*4.設置列寬
    原則：取大優先
    1.若是人爲設置寬度更大，則取更大的值，可是會填充整個屏幕，意味最終的寬度可能也會大於設置的寬度--填充滿整個屏幕
    2.若是人爲設置寬度更小，使用默認計算的寬度*/
    column-width: 200px;
}
h4{
    /*設置跨列顯示：取值：1 / all */
    column-span: all;
}

2、伸縮佈局

一、flex 和 justify-content（父元素使用）

佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性 ，它對於那些特殊佈局很是不方便。

CSS3在佈局方面作了很是大的改進，使得咱們對塊級元素的佈局排列變得十分靈活，適應性很是強，其強大的伸縮性，在響應式開發中能夠發揮極大的做用。

重要屬性：

display: flex;
/*justify-content：設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式 。*/
justify-content：flex-start | flex-end | center | space-between | space-around

display: flex; ：若是一個容器設置了這個屬性，那麼這個盒子裏面的全部直接子元素都會自動的變成伸縮項。

justify-content：設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

flex-start：讓子元素向父元素的起始位置對齊，父元素右邊可能會有空餘。

flex-end：讓子元素向父元素結束位置對齊，父元素左邊可能會有空餘。

center：讓子元素向父元素中間位置對齊，父元素兩邊可能會有空餘。

space-between：最左邊與最右邊子元素和父元素的左右邊對齊，中間子元素平均分佈，產生相同的間距。

space-around：將父盒子多餘的空間平均分佈在子元素的兩邊。這時子元素與子元素之間的間距是最左邊和最右邊子元素與父元素間距的2倍。

注意：

當全部子元素的寬度之和大於父盒子的寬度時，全部子元素的寬度會平均收縮，變窄，以適應父盒子的寬度。

可是這樣就不是我想要的了，我想要其換行怎麼辦？

二、flex-flow（父元素使用）

flex-flow 屬性：flex-flow 是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲row nowrap。

它用來設置彈性盒模型對象的子元素排列方式。它的兩種取值：

2.一、flex-wrap

flex-wrap: 控制子元素是否換行顯示，默認不換行

nowrap:不換行--則收縮
wrap:換行
wrap-reverse:翻轉，原來是從上到下，翻轉後就是從下到上來排列

2.二、flex-direction

flex-direction：定義彈性盒子元素的排列方向。就是設置主軸方向，默認主軸方向是row(水平方向)

row: 水平排列方向，從左到右
row-reverse:水平排列方向，從右到左
column:垂直排列方向，從上到下
column-reverse：垂直排列方向，從下到上

最後，這兩個屬性能夠連寫：

flex-flow: wrap row; /* 設置子元素水平方向排列，換行顯示*/

注意：以上屬性均設置的是父元素的屬性。

三、flex屬性（子元素使用）

3.一、flex-grow

flow-grow：能夠來擴展子元素的寬度：設置當前元素應該佔據剩餘空間的比例值，這個比例值是和其餘兄弟子元素佔據的剩餘空間平分的。

flex-grow 默認值爲0。

比例值的計算：當前子元素的 flex-grow 的值 / 全部兄弟元素的 flex-grow 值的和。

示例：

.first{
    flex-grow: 1; /*first子元素寬度拉伸，拉伸的寬度佔據父元素剩餘空間的三分之一*/
}
.second{
    flex-grow: 0;/*second子元素寬度不拉伸*/
}
.third{
    flex-grow: 2;/*third子元素寬度拉伸，拉伸的寬度佔據父元素剩餘空間的三分之二*/
}

3.二、flex-shrink

同 flex-grow 相反，flex-grow 設置的是父盒子剩餘空間的比例分配，而 flex-shrink 設置的是，若是父盒子寬度不夠時，子元素的收縮比例。

flex-shrink 默認值爲1。

若是將 flex-shrink 的值設置爲 0 的話，父盒子寬度不夠時，子元素不收縮，會溢出。

3.三、flex

flex屬性：flex屬性是flex-grow, 或者 flex-shrink 和 flex-basis的簡寫，

flex 默認值爲0 。

flex: [number]：這個語法指定了一個數字，表明了這個伸縮項目該佔用的剩餘空間比例。
flex: auto：屬性值被設爲auto的伸縮項目，會根據主軸自動伸縮以佔用全部剩餘空間

3.四、flex 應用案例

需求：無論有多少個 li 標籤，老是能平分父盒子（由於從服務器獲取的 li 標籤的個數可能不是固定的）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 500px;
            height: 100px;
            margin: 100px auto;
            border: 1px solid red;
        }
        div > ul {
            width: 100%;
            height: 36px;;
            list-style: none;
            /*設置父盒子爲伸縮盒子*/
            display: flex;
        }
        ul > li {
            /* 寬度不知道設置多少 */
            /* width: ??? */
            background-color: pink;
            border-right: 1px solid #ccc;
            line-height: 36px;
            text-align: center;
            /* 全部li平分父盒子寬度 */
            flex: 1; 
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>首頁</li>
            <li>C++</li>
            <li>Web</li>
            <li>嵌入式</li>
            <li>Python</li>
        </ul>
    </div>
</body>
</html>

四、align-items（父元素使用）

咱們以前學的justify-content 設置的是主軸方向上的對齊方式，而 align-items 設置的是側軸方向的對齊方式。

語法：

align-items: center; // 設置子元素(伸縮項)在側軸方向上的對齊方式

center:設置在側軸方向上居中對齊
flex-start:設置在側軸方向上頂對齊
flex:設置在側軸方向上底對齊
stretch:（默認值）拉伸：讓子元素在側軸方向上進行拉伸，填充滿整個側軸方向。（在子元素未設置高度時有效）
baseline:以子元素中文本基線對齊來來對齊*/

問題：

align-items 既然寫在父元素中，是對全部子元素在側軸方向的對齊方式進行設置。那麼，能不能單獨設置某個子元素在側軸的對齊方式呢？

五、align-self （子元素使用）

單獨設置某個子元素在側軸的對齊方式，屬性值和 align-items 相同。

align-self: flex-start;

六、案例：寬高自適應盒子

需求：改變最外邊父盒子的大小，裏面全部子盒子寬高自適應。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 500px;
      height: 500px;
      margin: 50px auto;
      background-color: pink;
      /* 設置父盒子爲伸縮盒子 */
      display: flex;
      /* 設置主軸方法爲縱向 */
      flex-direction: column;
    }

    header {
      width: 100%;
      height: 100px;
      background-color: red;
    }

    main {
      width: 100%;
      background-color: yellow;
      flex: 1;
      /* 設置爲彈性盒子 */
      display: flex;
      /* 不須要設置主軸方法，默認橫向 */
      /* flex-direction: row; */
    }

    article {
      height: 100%;
      background-color: green;
      flex: 1;
    }

    aside {
      height: 100%;
      background-color: orange;
      flex: 3;
    }

    footer {
      width: 100%;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div>
    <header></header>
    <main>
      <article></article>
      <aside></aside>
    </main>
    <footer></footer>
  </div>
</body>

</html>