flex實驗總結

kimingw發表於2017-01-03
原文網址 : https://www.cnblogs.com/huangqiming/p/6245931.html
Flex

1、父元素

.box{
     display:flex;
     flex-direction: column;//鋪滿垂直排列
     flex-direction: column-reverse;//鋪滿垂直反向排列
     flex-direction: row;//預設排列
     flex-direction: row-reverse;//反向排列
}

.box{
     display:flex;
     flex-wrap: nowrap;//不換行
     flex-wrap: wrap;//預設換行
     flex-wrap: wrap-reverse;//反向換行
}

.box {
  flex-flow: <flex-direction> || <flex-wrap>;//前面兩種的簡寫預設值為row nowarp
}
.box{
     display:flex;
     justify-content: flex-start;//左對齊
     justify-content: flex-end;//右對齊
     justify-content: center;//居中
     justify-content: space-between;//平均分散
     justify-content: space-around;//平均外邊距
}

.box{
     display:flex;
     align-items: stretch;//自定義鋪滿高度
     align-items: baseline;//文字按照基線對齊
     align-items: center;//垂直居中
     align-items: flex-end;//垂直下
     align-items: flex-start;//垂直上
}

.box{
     display:flex;
     align-content: stretch;//垂直鋪滿
     align-content: space-around;//同樣邊距
     align-content: space-between;//上下滿外邊距
     align-content: center;//垂直居中
     align-content: flex-end;//垂直居下
     align-content: flex-start;//垂直居上
}

2、子元素

.item {
  order: <integer>;//子元素的數值越大,越靠前
}
.item {
  flex-grow: <number>; //放大比例,根據數字放大
}

.item {
  flex-shrink: <number>;//縮小比例,根據數字縮小
}

.item {
  flex-basis: <length> | auto;//子元素的大小,可以設定寬度
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]//flex-grow, flex-shrink 和 flex-basis的簡寫
}

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;//允許單個專案有與其他專案不一樣的對齊方式
}

　　

相關文章