Flexbox 布局笔记

March 14, 2019

最近编写移动端布局需要使用 Flexbox 布局, 重新复习一遍.

容器属性

在父元素设置 flex 布局:

.flex-container {
    display: flex;
}

设置容器方向:

.flex-container {
    flex-direction: row;
}

设置项目换行:

.flex-container {
    flex-wrap: wrap;
}

以上两项可以缩写:

.flex-container {
    flex-flow: row wrap;
}

主轴方向对齐方式:

.flex-container {
    justify-content: flex-start;
}

交叉轴对齐方式:

.flex-container {
    align-items: center;
}

多行时在交叉轴的对齐方式:

.flex-container {
    align-content: stretch;
}

控制项目排列顺序:

.flex-item {
    order: 1;
}

项目的放大比例:

.flex-item {
    flex-grow: 2;
}

项目的缩小比例:

.flex-item {
    flex-shrink: 0;
}

项目的初始尺寸:

.flex-item {
    flex-basis: 200px;
}

以上 3 项的缩写:

.flex-item {
    flex: 1 1 200px;
}

设置项目自身的对齐方式, 覆盖默认对齐方式:

.flex-item {
    align-self: center;
}