CSS3: flexbox入門

認識CSS中flex container以及flex items中的基本設定

flex container

flex容器，這個模型讓排版變得容易許多

不需要設定width
不需要設定height
display: flex或inline-flex
flew-wrap: wrap

div.container {
    display: flex; /* or inline-flex */
    flex-wrap: wrap; 
}

flex items

flex container中的子元素，顧名思義是父元素中的物件

需設定元素的width與height，而設定方式分爲下列數類

.flex-item {
    width: 250px; /* unit setting，固定寬度 */
    height: 250px; /* unit setting，固定高度 */
}

.flex-item2 {
    flex-grow: 1; /* 設定grow比率，數字越大寬度按比率倍大 */
    flex-basis: 150px; /* flex-item2的最短寬度 */
    /* height若不作設定則等同content的高度 */
}

.flex-item3 {
    flex: 1 1 200px;
    /* grow, shrink, basis 快速設定*/
}

flexbox positioning設定

container的flex-direction在沒有任何設定的情況下會預設成row，故子元素會在container中水平方向排列

還有其他設定分別是column、column-reverse與row-reverse

另外可以透過justify-content控制flex-item的對齊方式，同樣需在container中設定

justify-content預設值爲flex-start，子元素會靠在container內的左邊
反之亦有flex-end
center，注意下圖flex item在視窗空間不足視會推移到下一列

_2021-03-20_19.03.51.png

space-between、space-around、space-evenly...等等

/* flex-direction及justify-content設定 */
div.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 子元素水平排列 */ 
    justify-content: flex-start /* 預設值 */
}