前言:css
年前公司招進來一個高級前端,最近閒談中聊到了他以前找工做面試時的狀況。
在對大佬油然起敬的同時,深感本身的不足。便產生了再次寫博客的想法。
寫博文一方面鞏固之前的知識,另外一方面記錄和督促學習新的知識內容。
複製代碼
flex 是 flexible 的縮寫,意思爲彈性佈局,用來爲盒模型提供最大的靈活性。
任何一個容器均可以指定爲 flex 佈局( 包括行內元素 ):html
div { display: flex}
複製代碼
元素設置 flex 屬性後,其具備的 float clear vertical-align 都將失效前端
常規佈局:面試
flex 佈局bash
成爲 flex 容器的元素默認有兩條軸:水平主軸(main axis)和垂直交叉軸(cross axis),單個項目佔據的主軸空間稱爲 main size,交叉軸爲 cross size,下面這張圖很好的說明了:ide
能夠利用 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>
複製代碼
<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 佈局。學習