高階前端的進階——CSS之flex

了不起的Rick發表於2019-03-11
前端CSSFlex

CSS flex

前言：

年前公司招進來一個高階前端，最近閒談中聊到了他之前找工作面試時的情況。        
在對大佬油然起敬的同時，深感自己的不足。便產生了再次寫部落格的想法。
寫博文一方面鞏固以前的知識，另一方面記錄和督促學習新的知識內容。        
複製程式碼

1. 初識 flex

flex 是 flexible 的縮寫，意思為彈性佈局，用來為盒模型提供最大的靈活性。
任何一個容器都可以指定為 flex 佈局( 包括行內元素 )：

div { display: flex}
複製程式碼

元素設定 flex 屬性後，其具有的 float clear vertical-align 都將失效

2. flex 佈局和正常佈局比較

  • 常規佈局：

    • 塊級元素自上而下排列
    • 元素只有高度，沒有寬度時，寬度預設100%
    • 元素只有寬度，沒有高度時，高度為 0

  • flex 佈局

    • 容器內元素預設從左往右排列
    • 元素只有高度，沒有寬度時，寬度為 0
    • 元素只有寬度，沒有高度時，高度預設100%

成為 flex 容器的元素預設有兩條軸：水平主軸（main axis）和垂直交叉軸(cross axis)，單個專案佔據的主軸空間稱為 main size，交叉軸為 cross size，下面這張圖很好的說明了：

高階前端的進階——CSS之flex

3. flex 屬性

  • flex-direction 改變主軸的方向，預設為 row 橫向排列。屬性包含 row | row-reverse | column | column-reverse
  • flex-wrap 控制元素換行。屬性包含 nowrap | wrap | wrap-reverse
  • align-content 控制多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。屬性包含 flex-start | flex-end | center | space-between | space-around | stretch
  • justify-content 控制在主軸上的對齊方式。屬性包含 flex-start | flex-end | center | space-between | space-around
  • align-items 控制交叉軸上如何對齊。包含的屬性有 flex-start | flex-end | center | baseline | stretch
  • align-self 屬性允許單個專案有與其他專案不一樣的對齊方式。包含的屬性 auto | flex-start | flex-end | center | baseline | stretch
  • order 屬性控制元素的排列順序，數值越小，排列越靠前。
  • flex-grow 屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
  • flex-shrink 屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
  • flex-basis 屬性定義了專案佔據主軸的空間，預設為 auto ，即元素本來大小。
  • flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫，預設值為0 1 auto。

可以利用 flex 實現篩子的排布，同時也鍛鍊了對 flex 的屬性的使用

高階前端的進階——CSS之flex

4. flex 的應用

  • 可以利用 flex 實現居中佈局
<style>
/* 使用 flex 進行佈局 */
.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 100%;
    border-bottom: 1px solid black;
}
.box {
    height: 200px;
    width: 200px;
    background: red;
}

</style>

<body>

<div class="wrap">
    <div class="box"></div>
</div>

</body>
複製程式碼
  • 使用 flex 實現簡易的彈性伸縮佈局

高階前端的進階——CSS之flex

<style>
* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
header {
    flex: 0 0 100px;
    background: #cecece;
}
.content {
    flex: 1;
    background: yellow;
    display: flex;
}
aside {
    background: pink;
    flex: 0 1 25%;
}
section {
    flex: 1;
}
footer {
    flex-basis: 70px;
    background: red;
}
</style>    
</head>
<body>
<header>
    header
</header>
<div class="content">
    <aside></aside>
    <section></section>
</div>
<footer>
    footer
</footer>
</body>
複製程式碼

熟練使用 flex 相比於使用 float 更加快捷和方便，但其對 IE 低版本相容性不是很好。有 IE 需求的情況下還是推薦使用 float 佈局。

相關文章