CSS之flex

CSS flex

前言:css

年前公司招進來一個高級前端,最近閒談中聊到了他以前找工做面試時的狀況。        
在對大佬油然起敬的同時,深感本身的不足。便產生了再次寫博客的想法。
寫博文一方面鞏固之前的知識,另外一方面記錄和督促學習新的知識內容。        
複製代碼

1. 初識 flex

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

div { display: flex}
複製代碼

元素設置 flex 屬性後,其具備的 float clear vertical-align 都將失效前端

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

  • 常規佈局:面試

    • 塊級元素自上而下排列
    • 元素只有高度,沒有寬度時,寬度默認100%
    • 元素只有寬度,沒有高度時,高度爲 0
  • flex 佈局bash

    • 容器內元素默認從左往右排列
    • 元素只有高度,沒有寬度時,寬度爲 0
    • 元素只有寬度,沒有高度時,高度默認100%

成爲 flex 容器的元素默認有兩條軸:水平主軸(main axis)和垂直交叉軸(cross axis),單個項目佔據的主軸空間稱爲 main size,交叉軸爲 cross size,下面這張圖很好的說明了:ide

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 的屬性的使用佈局

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 實現簡易的彈性伸縮佈局

<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 佈局。學習

相關文章
相關標籤/搜索