哎呦喂web 前端三日老師
《精通flex布局》flex屬性總結(全) - 是船長啊 -
面試問題整理之flex 布局 思維導圖
第一課 flex-direction
關鍵點，設定容器的 display:flex 布局方式為flex，然後其它子元素都繼承它
屬性1： flex-direction 作用：最基本的屬性，用於控制元素的排列方式，常用的值：row， row-reverse，column
第二課 flex-wrap
控制元素換行的屬性，預設值是什麼？
flex-wrap: nowrap; //不換行; wrap //換行有注意點，就是每一行的高度佔據容器除以行數的高度（待實踐）； wrap-reverse//從下面開始排列
第三課 flex-flow
它是flex-direction和flex-wrap集合的寫法
flex-flow:row nowrap
第四課 justify-content
作用於控制主軸（水平方向）上 flex 子項的對齊方式，有3個常用值：flex-start（預設值），flex-end 表示與行的結束位置對齊，center 表示與行中間對齊； space-around：水平空白平分；space-between 和space-around區別待研究
其它： justify-items
屬於對齊框 | box alignment => 對齊專案 | justify-items
第五課 align-items
有5常用屬性值(參考 justify-content)，控制元素在垂直方向上的對齊方式。 strecth//拉伸； baseline；
第六課 align-content
控制「多」行排列的效果，也是控制元素在縱上排列的屬性。例
flex-flow:row wrap; align-content:flex-start;
需要知道的是這個屬性是控制多行的縱向排列方式；
align-content:space-around
：縱向空白平分；space-between
二.子元素上屬性 (6個)
第七課 order
之前課的屬性都是設定在「主容器」上的
單個標籤使得它的排列順序發生改變。 order : 3;
第八課 flex-grow
控制標籤放大倍數，flex-grow:2;
第九課 flex-shrink
flex-shrink:0;//表示不允許元素縮小
第十課 flex-basis
每個元素寬度的設定，作用和width類似， 常用有數字值，百分比值
flexflex:1 詳解
(flex屬性是flex-grow, flex-shrink 和flex-basis的簡寫，預設值為01 auto。後兩個屬性可選)
flex: 1;
這個css設定很實用,可以起到控制子元素搶占容器的作用，例項參考： flex實戰之移動頁面確定按鈕置底布局 裡「確定」按鈕就用了這個核心css設定。
至於為什麼有這個效果, 看了《flex:1詳解》之後,自己再實踐了一下,算是理解了。不過那篇文章，作者應該算是懂 flex的，但讀起來不舒服，如果有些句子再加下主語，描述再精確些，就完美了。
第十一課 align-self
單個標籤在縱向上進行排列效果。 (本系列最後一課)
《flex手機布局實戰》
小程式 flex 布局快速入門 (慕課網) flex 布局教程：阮一峰 鏈結1
鏈結2
web前端基礎總結（三）
css 選擇符有類選擇符，屬性選擇符，id選擇符，優先順序演算法是基於特殊性值進行計算的。分別如下 id 屬性 0.1.0.0 類屬性選擇器，屬性選擇器，偽類 0.0.1.0 元素選擇符，偽元素選擇符 0.0.0.1 通配選擇器對特殊性沒有任何貢獻值。important 優先順序高 結構層 html...
Web前端 Html部分筆記（三）
給一堆內容新增無序列表語義 乙個沒有先後順序整體 列表中的條目是不分先後 導航條 商品列表 新聞列表 這裡指的無序是指對於主體來說內容沒有先後之分 瀏覽器會給無需列表自動新增先導符號但是一定一定千萬千萬要記住，ul的作用並不是給文字新增小圓點，而是增加無序列表的語義 其實ul還有乙個type屬性，可...
尚矽谷web前端 CSS（三）
css 三 1 行內元素不支援設定長寬 2 行內元素可以設定padding，border，margin，垂直方向不會影響頁面布局 3 display用來設定元素顯示型別 4 visibility用來設定元素顯示狀態 1 預設情況下，盒子可見框大小由內容區，內邊距和邊框共同決定 2 box sizin...