flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器 ...

Css3 常用布局方式 一行兩列&高度固定&某列寬度自適應 方案有很多種，根據自己的喜好和實際場景選擇方式 一、float +margin 方式 （推薦） 此方式，使用度高，擴展強，兼容性好。 使用到垂直方向居中，參考：CSS網頁布局垂直居中整理 示例1： css ...

需求：經典布局 —— 頭尾固定高度中間高度自適應布局 頭部固定高度，寬度100%自適應父容器； 底部固定高度，寬度100%自適應父容器； 中間是主體部分，自動填滿，瀏覽器可視區域剩余部分，內容超出則中間部分出現流動條； 整個內容填滿瀏覽器可視區域，並且不超出此區域！ 方法 ...

附：傳統模式（利用float浮動實現） ...

視口單位(Viewport units) 什么是視口？ 在PC端，視口指的是在PC端，指的是瀏覽器的可視區域； 而在移動端，它涉及3個視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。 視口單位中 ...

知識點： viewport：可視窗口，也就是瀏覽器。vw Viewport寬度， 1vw 等於viewport寬度的1%vh Viewport高度， 1vh 等於viewport高的的1% calc()使用通用的數學運算規則，但是也提供更智能的功能： 1、使用 ...

...

用flex實現css里的三大經典布局，不需要額外很多代碼。 1,垂直居中 ：子元素在父元素中，水平垂直居中。justify-content：center設置水平方向居中，align-center設置垂直方向居中 ...