// flex容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）
// flex 左對齊 頂對齊
.flex
// flex 左右居中，上下居中
.flexcenter
.flex-column
// 垂直居中布局
.flexclsdirectcolumn
.flexclsdirectcolumn > div
// 左對齊布局
.flexclsdirectleft
// 左對齊布局,換行
.flexclsdirectwwrapleft
// 居中布局,不換行自動撐開
.flexclsleftlinkautowid
// 左對齊布局,換行不撐開，直接緊跟上乙個換行
.flexclsdirectwwrapleftstart
// 右對齊布局
.flexclsdirectright
// 兩端對齊,不換行，專案之間的間隔都相等
.flexclsnowrapspcbtw
// 兩端對齊,不換行，每個專案兩側的間隔相等
.flexclsnowrapspcard
// 兩端對齊,超出換行，每個專案兩側的間隔相等
.flexclswrapspcard
.flex1
// 用於垂直布局，固定乙個div高度，另乙個div填充剩餘的高度
.flexcolumbox
// 固定高度
.fixedhig
// 自動填充剩餘區域
.autofullhig
// 用於水平布局，固定乙個div的寬度，另乙個div填充剩餘的寬度 //父級flex
.flexwidthbox
// flex屬性是flex-grow(放大比例）, flex-shrink（縮小比例） 和 flex-basis（根據剩餘空間進行分配計算）的簡寫，預設值為0 1 auto。後兩個屬性可選。
// 自適應寬度的，css
.autofullwidth
// 固定寬度，不放縮
.fixwidth
flex 布局以及樣式
1.flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性 2.任何乙個容器都可以用flex布局 注意，設為flex布局以後，子元素的float clear和vertical align屬性將失效 採用flex布局的元素，稱為flex容器 flex containe...
flex布局（常用
flex注意點 1 當父盒子設定display flex 子元素的float clear vertical align都會失效 2 採用flex布局的元素，稱為flex容器 flex container 而其中的子元素成為專案 flex item 3 設定flex之後，其子元素都變為行內塊元素，可設...
樣式布局flex的使用
說到頁面布局，無外乎水平垂直，先說說水平，最開始使用最多的是float屬性，但是它有後遺症，塌陷呀清除呀，最後放棄轉戰flex。需要謹記的是，flex是設定在需要生效的元素的父元素上面的。display flex flex direction row column 其中row為水平布局，column...