說到頁面布局，無外乎水平垂直，先說說水平，最開始使用最多的是float屬性，但是它有後遺症，塌陷呀清除呀，最後放棄轉戰flex。需要謹記的是，flex是設定在需要生效的元素的父元素上面的。
display: flex; flex-direction: row/column; 其中row為水平布局，column是垂直布局。如果希望定義與direction同方向上的屬性狀況，用just-content，如果定義與direction垂直方向上的屬性狀況用align-items。
控制水平布局的顯示比例，基於父元素的寬度，可以用百分比控制，也可以在子元素上用flex屬性，都是1，則各佔50%。乙個1，乙個2則乙個佔33%，另乙個佔66%，以此類推。
在其中的乙個或幾個高度或者寬度確定的情況下，希望剩下的那個充滿父元素的空間，可以在該元素上增加 flex: 1; 的屬性。
垂直布局，高度一般根據自身內容自動填充。有個特殊需求那就是希望元素高度佔滿可視視窗，
在html和body標籤同時設定min-height: 100%; 相當於繼承了window的高度，對高度設定百分比，必須之前有被定義過的高度。
用絕對定位上下左右均為0的方式，絕對定位的高度可以被繼承。
在外層的某處有個用100vh相關定義的高度，可以在想要佔滿到剩下範圍的地方定義display: flex; flex-direction: column 然後裡面只有乙個子元素(direction可以不設定，預設direction為row，align-items為stretch可以達到同樣效果)。也可以用在定義了高度的父元素之後，用height: inhert去層層繼承。
flex 布局以及樣式
1.flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性 2.任何乙個容器都可以用flex布局 注意，設為flex布局以後，子元素的float clear和vertical align屬性將失效 採用flex布局的元素，稱為flex容器 flex containe...
flex布局常用樣式
flex容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis flex 左對齊 頂對齊 flex flex 左右居中，上下居中 flexcenter flex column 垂直居中布局 flexclsdirectcolumn flexclsdirectcolum...
flex的樣式使用
元素與主軸的對齊方式 定義flex容器 display flex 設定容器內部元素的排列方向 row 定義排列方向，從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 flex direction row reverse nowrap 不換行 ...