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...