CSS布局思路和布局方式

i. CSS布局有三種方式:

• 第一種是固定寬度布局

寬度可以不固定，一般為960/1000/1024 px 主要在電腦上

• 第二種是不固定寬度布局

主要靠檔案流的原理來布局 主要在手機上,
檔案流本來就是自適應的，不需要加額外的樣式

• 第三種是回應式布局

意思是在pc上固定寬度，在手機上不固定寬度，也就是一種混合布局

ii. 布局的兩種思路

• 從小到大

先定下大局，然后完善每個部分的小布局(適合老手)

• 從小到大

先完成小布局，然后組合成大布局(適合新人)

iii. 布局需要用到哪些屬性

Div+CSS布局，不一定用div，主要用CSS，
可以用main,header,footer,nav,aside語意來替代div，

iv. 用什么CSS布局方式呢？

首先，先問自己做的需要兼容IE嗎？

需要–>用float布局(左浮，固定寬度，不要回應式)

不需要–>只兼容最新的瀏覽器嗎？----(是–>用grid布局)/(不只是，還要兼容老手機–>用flex布局)

float布局和flex布局必要時采用負margin，

1. float布局

現在不怎么用了，IE瀏覽器都換用Chromium內核了

1.1 float布局步驟:

在子元素上加floa: left和width

在父元素上加 .dearfix ，用來包裹住里面的浮動元素，

 .clrarfix:after{
 	content:''; /*內容為空*/
	display: block;
 	clear: both;
 }

注釋：一般會留一些空間或者最后一個不設width，

如果用float布局，就不要做回應式了，這個布局是為IE準備的，手機上基本不用IE，

存在的問題：IE 6/7存在雙倍margin(在float左邊加上外邊距，在IE 6/7下自動變雙倍)

解決方法一：可以把margin減半–> IE會識別_margin-left

解決方法二：再加一個display: inline-block;

.選擇器{
...
margin-left: 10px;
_marigin-left: 5px;
/*方法一：IE會識別_margin-left*/
}

2 Flex布局

flex布局主要參考CSS tricks flex

• flex container

container(英譯"容器")一般用作父元素

• flex items

container直接的子元素一般叫做items(英譯"專案")

可以參考下面的圖，紫色的是container，橙色的是items，是父子元素關系

2.1 flex container有哪些樣式

① display: flex;可以讓一個元素變成flex容器

代碼如下

.container {
  display: flex; 
  /* 或者是 inline-flex */
}

②flex-direction改變items流動方向(主軸):

代碼如下

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row從左往右，row-reverse從右往左，column從上到下，column-reverse從下到上，

類似如下

③是否折行flex-wrap

默認情況下彈性專案items都嘗試放在一行

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap不折行，wrap折行，wrap-reverse從下往上折行

類似如下

④主軸對齊方式justify-content *

默認主軸是橫軸

代碼如下

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start表示往前靠，flex-end表示往后靠，center表示往中間靠，space-between表示把剩余空間放在間隙，space-around表示把空間放在周圍，space-evenly表示平均放，

類似如下

⑤次軸對齊align-items

默認次軸是縱軸

代碼如下

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch表示(默認)拉伸以填充容器（仍然遵守最小寬度/最大寬度），flex-start 表示上對齊，flex-end表示下對齊center表示居中對齊，baseline 表示字對齊

類似如下

⑥多行內容如何分布align-content

很少用

代碼如下

.container {
  align-content: flex-start | flex-end | center | stretch |space-between | space-around | space-evenly;
}

flex-start 表示容器上；flex-end表示容器下； center 表示容器中間，stretch表示線條拉伸以占據剩余空間；space-between表示專案平均分配，第一行在容器的開頭，而最后一行在容器的結尾；space-around表示專案均勻分布在每行周圍；space-evenly表示專案均勻分布，周圍有相等的空間;

類似如下

2.2 flex item有哪些屬性？

①order排序

可以為專案進行排序，默認order為0，按從小到大排序，列也是一樣

②flex-grow彈性成長(變胖)

如果所有專案都flex-grow設定為1，則容器中的剩余空間將平均分配給所有子項，接受的比例決定了專案在容器里占的空間，負數無效

.item {
  flex-grow: 4; /* default默認為 0 */
}

類似如下

③ flex-shrink控制變瘦

默認是1，大家一起瘦，一般寫flex-shrink: 0;防止變瘦，寬度不夠按寫的比列收縮，負數無效，

.item {
  flex-shrink: 3; /* default 1 */
}

收縮效果如下

• ④flex-basis控制基準寬度
  分配內容周圍空間

.item {
  flex-basis:  | auto; /* default auto */
}

如果設定為0，則不考慮內容周圍的多余空間，如果設定為auto，則多余空間將根據其flex-grow值進行分配.

⑤flex簡寫

可以將flex-grow,flex-shrink和flex-basis合并簡寫，第二和第三個引數（flex-shrink和flex-basis）是可選的，默認值為0 1 auto

.item {
 flex: flex-grow flex-shrink flex-basis;
}

⑥align-self

加在某一個item里，這個item可以特立獨行

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  /*屬性和align-items一樣*/
}

3 推薦快速學習方法

我還是推薦兩個小游戲學習flex布局和grid布局，能快速上手，更簡單輕松，

①帶青蛙回家-flex布局

https://flexboxfroggy.com/#zh-cn 帶青蛙回家-flex布局

②種蘿卜-Grid布局

https://cssgridgarden.com/#zh-cn 種蘿卜-Grid布局

我都已經通關了哦

帶青蛙回家-flex布局

種蘿卜-Grid布局

–continue

學習前端從入門到入土，我正在路上，您的每一次觀看，就是對我學習路上最大的鼓勵，一起努力吧！

歡迎留下您寶貴的意見，