Flex佈局

Flex佈局

網頁佈局（layout）是CSS的一個重點應用。

佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 +float屬性。針對於某些特殊佈局就顯得很是不方便，例如，垂直居中就不容易實現。

2009年，W3C提出了一種新的方案—-Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部新版主流瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。

特色

1.任何元素均可以指定爲flex佈局

2.設置flex佈局後，子元素float、clear和vertical-align屬性將失效。

flex屬性

1.flex-direction

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items

6.align-content

flex子元素屬性

1.order

2.flex-grow

3.flex-shrink

4.flex-basis

5.flex

6.align-self

flex-direction

決定flex佈局排版方向，默認爲橫向排版

flex-direction: row | row-reverse | column | column-reverse;

<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
複製代碼

.flex{
  display: flex;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
複製代碼

row

(默認值)橫向排版，起點爲左上角

.flex{
  flex-direction: row;
}
複製代碼

row-reverse

橫向排版，起點爲右上角

.flex{
  flex-direction: row-reverse;
}
複製代碼

column

豎向排版，起點爲左上角

.flex{
  flex-direction: column;
}
複製代碼

column-reverse

豎向排版，起點爲左下角

.flex{
  flex-direction: column-reverse;
}
複製代碼

flex-wrap

決定flex超出主方向佈局位置時是否換行，以及換行方式

flex: nowrap | wrap | wrap-reverse

<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
複製代碼

.flex{
  display: flex;
  width: 360px;
  height: 360px;
  flex-direction: row;
  justify-content: space-between;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
複製代碼

nowrap

默認值，不換行

.flex{
  flex-wrap: nowrap;
}
複製代碼

wrap

換行，常規排版

.flex{
  flex-wrap: wrap;
}
複製代碼

wrap-reverse

反向換行，從最下方往上方排版

.flex{
  flex-wrap: wrap-reverse;
}
複製代碼

flex-flow

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

flex-flow: <flex-direction> <flex-wrap>
複製代碼

justify-content

決定flex佈局在主軸方向上的排版方法

justify-content: flex-start | flex-end | center | space-around | space-between

<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
複製代碼

.flex{
  display: flex;
  border:1px solid blue;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  flex-direction: row;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
複製代碼

flex-start

默認值，沿主軸方向依次排列，無特殊樣式(左對齊)

.flex{
  justify-content: flex-start;
}
複製代碼

flex-end

沿主軸方向反向依次排列，無特殊樣式(右對齊)

.flex{
  justify-content: flex-end;
}
複製代碼

center

主軸方向居中排列，無特殊樣式(居中)

.flex{
  justify-content: center;
}
複製代碼

space-around

主軸方向依次排列，子元素與子元素見自動生成等寬間隔，子元素與子元素的間隔子元素與父元素邊框之間的間隔的兩倍

.flex{
  justify-content: space-around;
}
複製代碼

space-between

主軸方向依次排列，兩端無間隔，子元素與子元素見自動生成等寬間隔

.flex{
  justify-content: space-between;
}
複製代碼

align-items

align-items: flex-start | flex-end | center | baseline | stretch

針對子元素在單一主軸上（一行上）交叉軸的排版方式

flex-start,flex-end,center規則和justify-content相同值的規則同樣，將主軸替換爲交叉軸便可

<div class="flex">
		<div style="font-size:22px;">1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div style="font-size:22px;">5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div style="font-size:22px;height:auto;">9</div>
	</div>
複製代碼

.flex{
  display: flex;
  border:1px solid blue;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 66px;
  border: 1px solid red;
}
複製代碼

baseline

.flex{
  align-items: baseline;
}
複製代碼

stretch

.flex{
  align-items: stretch;
}
複製代碼

align-content

規則和justify-content相同值的規則同樣，將主軸替換爲交叉軸便可,在單一主軸（項目只有一行）上該屬性無效

flex子元素屬性

做用於flex項目下的直接子元素

order

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

.item{
  order: <integer>;
}
複製代碼

flex-grow

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

將剩餘空間等比縮放大小，分配給當前指定項目

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

.item{
  flex-grow:<float>;
}
複製代碼

flex-shrink

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

負值對該屬性無效。

.item{
  flex-shrink:<float>;
}
複製代碼

flex-basis

重定義項目大小，默認值auto，即項目自己大小

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

自我感受該屬性用處不大

flex

flex屬性是flex-grow屬性和flex-shrink屬性和flex-basis屬性的簡寫方式

flex: <flex-grow> <flex-shrink> <flex-basis>
複製代碼

align-self

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

flex css 實例

.flex{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  position: relative;
}
.flex.row{
  flex-flow: row nowrap;
}
.flex.wrap{
  flex-wrap: wrap;
}
.flex>.auto{
  width: 100%;
  flex-grow: 1;
  position: relative;
}
.row>.auto{
  width: auto;
  height: 100%;
}
.absFull{ /*針對部分瀏覽器使用.auto樣式致使頁面樣式錯亂*/
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
複製代碼