1, 定義彈性盒 display:flex ;
2 ,確定主軸方向 flex-direction:row/column/row-reverse/column-reverse;
3, 主軸對齊方式 justify-content:flex-start/flex-end/center/space-around/space-between
4, 側軸對齊方式 align-items:flex-start/flex-end/center
5 ,子元素超出時是否換行 flex-wrap:wrap/nowrap
2,flex-direction 主軸方向,(有預設左右排列,所以一般不寫)
3,justify-content 主軸對齊方式,也就是數學座標裡的x軸
4,align-items 側軸對齊方式,也就是數學座標裡的y軸
5, flex-wrap 定義元素超出後要不要換行
row/ 左右排列
column/ 上下排列
row-reverse/ 元素右左排列
column-reverse/ 元素下上排列
flex-start/ 左 或 上
flex-end/ 右 或下
center/ 居中
space-around/ 定義盒子兩端對齊,兩端之間有間隔
space-between/ 定義盒子兩端對齊,兩端之間毫無間隔
wrap/ 元素超出後換行
**第一種辦法 利用彈性盒的屬性 定義x軸,
在父元素上定義彈性盒 display:flex; overflow-x: scroll;
在子元素上 寫 flex-shrink: 0; 定義子元素的寬高不收縮
第二種辦法 直接在父元素上寫: 定義x軸,
white-space: nowrap; /* 強制不換行 */
overflow-x: scroll; 出現x軸滾動條
第三種辦法 利用絕對定位 在父元素上寫 定義y軸,
position: absolute; /* 利用絕對定位固定最大盒子 /
top: 4rem; / top的值,等於上面三個盒子高之和 /
bottom:1rem: / bottom的值,等於下面盒子高之和 /
width: 1.81rem; 子元素需要多寬就寫多寬 可以繼承
overflow-y: scroll; / 設定橫軸出現滾動條 */
浮動與浮動的清除
說浮動就必須提及一下文件流，html當中的元素按照從左到右，從上到下的順序進行排列稱之為文件流，也就是正常排列。而浮動是什麼呢？浮動會讓元素脫離文件流，假如a元素浮動了，原本排在該元素之後的元素發現a元素不在這個文件流了，就會無視它往上接到a元素前面的元素之後 ps 但是文字並不會無視它，還會環繞a...
浮動的影響與清除浮動
影響1 div1 div2 div3,要實現dev1 div2 在第一排顯示，div3另起一行？方法 給div1 div2加浮動，1和2會脫離正常流，因為div3屬於正常流會上到第一排，並且被1和2覆蓋 就是為什麼要清除浮動，消除浮動影響 方法1 加乙個空div，clearfix 在div3前加乙個...
CSS的浮動與定位
浮動與定位 浮動可以理解成向網頁的元素發布乙個排列命令，它常用的值是left right none這三種，當為left的時候，元素從左向右排成一行，當為right時，元素從右向左排成一行 當乙個元素或多個元素浮動以後，這個時候，一定要注意以下幾點 當浮動了元素總的寬度大於外層的寬度的時候，這個時候，...