flex常用屬性

不同瀏覽器相容性問題解決：新增瀏覽器字首：-webkit-

實際工作：安裝外掛程式postcss外掛程式 -》不需要手動加字首

父級身上的屬性：

display: flex;

justify-content:            子元素水平排列方式
center                   居中         √
space-between    兩端對齊   √ 
space-around      子元素拉伸分布   √ 
flex-start               居左
flex-end                居右
align-items:                  子元素垂直排列      
center                  居中         √ 
flex-start              開始
flex-end               底部
align-content:                  多行的時候，垂直排列
center                 居中     
flex-direction:               排列方式
row                     橫向排列
row-reverse        橫向翻過排列
column                縱向排列
column-reverse   縱向翻過排列
flex-wrap:                       子元素是否在一行顯示
no-wrap              不換行
wrap                   換行
flex-flow: 

flex: 1;                             1 指的是乙個係數

*子元素在劃分父元素寬度的時候，先刨除固定寬度
flex-grow:1;                     定義子元素放大比例 0預設值
align-self:                      其實就是用來覆蓋父級align-items 垂直排列
center                  居中         √ 
flex-start              開始
flex-end               底部
order:                               規定子元素順序，排序(數值越小，越靠前)
預設值：0

justify-content屬性 水平屬性

align-items屬性 垂直屬性

flex彈性盒子常用屬性

屬性值描述 display flex 定義乙個盒子為彈性盒子 flex direction row子盒子水平排列，從左到右 row reserve 子盒子水平反向排列 column 子盒子垂直排列，從上到下 column reserve 子盒子垂直反向排列 flex wrap no wrap 子盒子...

Flex布局常用屬性簡單總結

常用布局方式也就是float，但flex布局更適合移動端專案開發 參考flex布局 1，布局方式 display flex display webkit flex safari a.橫向縱向布局 flex direction row column row reverse row reverse b....

CSS布局flex布局常用屬性

display flex使用flex布局首先要設定父容器 水平方向 justify content flex start 起始端對齊 justify content flex end 末尾段對齊 justify content center 居中對齊 justify content space ar...