1. 程式人生 > >Flex佈局實戰(二):網格 \ 聖盃 \ 輸入框 \ 懸掛式 \ 固定底欄 \ 流式佈局

Flex佈局實戰(二):網格 \ 聖盃 \ 輸入框 \ 懸掛式 \ 固定底欄 \ 流式佈局

在這裡插入圖片描述

參考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


下面程式碼可能會比較多,但核心CSS程式碼已經用 /**/ 的標記標出,直接看核心程式碼就好。


一、網格佈局

1、基本網格佈局

最簡單的網格佈局,就是平均分佈。在容器裡面平均分配空間即可(flex:1
在這裡插入圖片描述
注:flex:1 等價於 flex: 1 1 0%;
flex: 1 1 0%; 等價於 flex-grow:1; flex-shrink:1; flex-basic:0;

<style type="text/css">
.grid{
	display: flex;           /*1*/
}
.grid-cell{
	flex:1;                  /*2*/
	border: 1px solid red;
	height: 30px;
	margin: 10px 15px;
}
.larger-height{
	height: 200px;
}
</style>

<div class="grid">
	<div class="grid-cell">1/2</div>
	<div class="grid-cell">1/2</div>
</div>
<div class="grid">
	<div class="grid-cell">1/3</div>
	<div class="grid-cell">1/3</div>
	<div class="grid-cell">1/3</div>
</div>
<div class="grid">
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
</div>
<div class="grid">
	<div class="grid-cell larger-height">Woohoo!</div>
	<div class="grid-cell larger-height">dasdasd sdsscdasd asadasd</div>
</div>
2、百分比佈局

某個網格的寬度為固定的百分比(如下圖的1/2、1/3、1/4),其餘網格平均分配剩餘的空間。
在這裡插入圖片描述

<style type="text/css">
.grid{
	display: flex;        /*1*/
}
.grid-cell{
	flex:1;               /*2*/
	border: 1px solid red;
	height: 30px;
	margin: 10px 15px;
	text-align: center;
}
.u-1of2{
	flex:0 0 50%;	       /*3*/
}
.u-1of3{
	flex:0 0 33.3333%;	   /*4*/
}
.u-1of4{
	flex:0 0 25%;	       /*5*/
}
</style>

<div class="grid">
  <div class="grid-cell u-1of2">1/2</div>
  <div class="grid-cell">auto</div>
  <div class="grid-cell">auto</div>
</div>
<div class="grid">
  <div class="grid-cell">auto</div>
  <div class="grid-cell u-1of3">1/3</div>
</div>
<div class="grid">
  <div class="grid-cell u-1of4">1/4</div>
  <div class="grid-cell">auto</div>
  <div class="grid-cell u-1of3">1/3</div>
</div>

二、聖盃佈局

聖盃佈局(Holy Grail Layout)指的是一種最常見的網站佈局。頁面從上到下,分成三個部分:頭部(header),軀幹(body),尾部(footer)。其中軀幹又水平分成三欄,從左到右為:導航、主欄、副欄。
在這裡插入圖片描述

<style type="text/css">
.box{
	display: flex;           /*1*/
    flex-direction: column;  /*2*/
}
.box-body{
	margin: 10px 0;
	height: 200px;
	display: flex;            /*3*/
}
.box-content{
	flex: 1;                  /*4*/
	margin: 0px 10px;
}
.box-nav,
.box-ads{
	/* (nav,ads)兩個邊欄的寬度設為12em */
	flex: 0 0 12em;           /*5*/
}
.box-nav{
	/* 導航放到最左邊 */
	order: -1;                /*6*/
}

.box header,
.box footer,
.box-content,
.box-nav,
.box-ads{
	border: 1px solid red;
}
</style>

<div class="box">
	<header>header</header>
	<div class="box-body">
		<div class="box-content">content</div>
		<div class="box-nav">nav</div>
		<div class="box-ads">ads</div>
	</div>
	<footer>footer</footer>
</div>

三、輸入框的佈局

我們常常需要在輸入框的前方新增提示,後方新增按鈕。
在這裡插入圖片描述

<style type="text/css">
.input {
  display: flex;    /*1*/
}
.input-field {
  flex: 1;          /*2*/
}
.input-item{
	border:1px solid gray;
}
</style>

<div class="input">
  <span class="input-item">icon</span>
  <input class="input-field">
  <button class="input-item">btn</button>
</div>

四、懸掛式佈局

有時,主欄的左側或右側,需要新增一個圖片欄。也可以理解成類似於微信聊天的場景:左邊或右邊為頭像,另一邊為文字內容。
在這裡插入圖片描述
這裡就不舉例子了,直接上核心程式碼,大家實際場景舉一反三即可:
(頭像在左,內容在右)

<style type="text/css">
.Media {
  display: flex;             /*1*/
  align-items: flex-start;   /*2*/
}
.Media-figure {
  margin-right: 1em;
}
.Media-body {
  flex: 1;                   /*3*/
}
</style>

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

五、固定的底欄

有時,頁面內容太少,無法佔滿一屏的高度,底欄就會擡高到頁面的中間。這時可以採用Flex佈局,讓底欄總是出現在頁面的底部。
在這裡插入圖片描述


為了方便演示,我們就做成這樣:
在這裡插入圖片描述

<style type="text/css">
.site{
  display: flex; 				/*1*/
  flex-direction: column; 		/*2*/
  min-height: 30vh;     		/*3*/
  border: 1px solid yellow;
}
.site-content {
  flex: 1;						 /*4*/
}
.site header,
.site main,
.site footer{
	border: 1px solid red;
}
</style>

<div class="site">
	<header>header</header>
  	<main class="site-content">main </main>
  	<footer>footer</footer>
</div>

如果我們去掉.site-content {flex:1}呢?
就會變成下面這樣,main變矮了。
在這裡插入圖片描述


六、流式佈局

每行的專案數固定,會自動分行。
在這裡插入圖片描述
注:實際場景中,由於會給.item加border,所以很容易讓item溢位box;所以我們這裡採用IE盒模型( box-sizing: border-box;)來避免該情況發生。

<style type="text/css">
.box {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;               /*2*/
  flex-flow: row wrap;         /*4*/
}
.item {
  box-sizing: border-box;      /*1*/
  background-color: white;
  flex: 0 0 25%;               /*3*/
  height: 50px;
  border: 1px solid red;
}
</style>

<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>