flex佈局筆記

Threeki水機發表於2018-10-16
Flex筆記

Flex佈局教程地址
https://www.youtube.com/watch…
https://paper.dropbox.com/doc…
https://www.w3cplus.com/css3/…

控制換行屬性

flex-wrap: wrap | nowrap | wrap-reverse；

flex-direction 控制軸線的方向
flex-direction: row | row-reverse | column | column-reverse;

           行     行反轉      列        列反轉

·justify-content:
Main-Axis, 主軸線的對齊
justify-content: flex-start | flex-end | center | space-between | space-around;

           開始對齊  結束對齊   居中   兩端水平分佈     等間距分佈

·align-items：
Cross-Axis, 交錯軸線的對齊
align-items: flex-start | flex-end | center | baseline | stretch;

         開始對齊   結束對齊     居中     沿著他們自己的基線對齊,與行高有關     預設值,所有容器一樣高

clipboard.png

clipboard.png

align-items: baseline；

clipboard.png
align-items: center;

clipboard.png

預設的Main-Axis方向是從左到右，Cross-Axis方向是從上到下吧？

clipboard.png

當用 flex-direction: column 時，Main-Axis和Cross-Axis會向如下所看到的那樣改變：
flex-direction: column
align-item: felx-end;

clipboard.png

flex速記

flex是flex-grow、flex-shrink和flex-basis三個屬性的速記（簡寫）

li { flex: 0 1 auto; }

上面的程式碼相當於：

li { flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto; }

讓文字居中
除了text-align: center; line-height; 的方法外，還可用flex方法：

clipboard.png

.four li{
    display: flex;
    justify-content: center;
    align-items: center;
}

讓flex項固定寬度,不跟隨內容自動伸展

設定flex項的寬度為0即可 （貌似不相容firefox）
.wrap{
　　display:flex;
}
.wrap .item{
　　flex:1;
　　width:0px;
}

相關文章