CSS Flexbox 布局

1. Flexbox Introduction

Flexbox (弹性盒子) is CSS3引入 一种 new 布局模式, 用于更flexible, 更 high 效地布局, for 齐 and 分配containers in 元素 空间, 即使它们 big small is 未知 or 动态 .

1.1 Flexbox basicconcepts

Flexbox布局由两个主要部group成:

1. Flexcontainers (Flex Container) : 设置了display: flex or display: inline-flex 元素, 它 所 has 直接子元素都会成 for Flexproject.
2. Flexproject (Flex Item) : Flexcontainers 直接子元素, 它们会按照Flexbox规则for排列.

<div class="flex-container">  
    <div class="flex-item">1</div>  
    <div class="flex-item">2</div>  
    <div class="flex-item">3</div>  
</div>

.flex-container {
    display: flex; /* 将containers设置 for Flexcontainers */
}

2. Flexcontainersproperty

Flexcontainers has 以 under 主要property:

2.1 display

用于将元素定义 for Flexcontainers.

/* 将元素设置 for 块级Flexcontainers */
.flex-container {
    display: flex;
}

/* 将元素设置 for  in 联Flexcontainers */
.flex-container {
    display: inline-flex;
}

2.2 flex-direction

用于定义Flexproject in containersin 排列方向, 决定了主轴 方向.

/* 默认值, 主轴 for 水平方向,  from  left  to  right  */
.flex-container {
    flex-direction: row;
}

/* 主轴 for 水平方向,  from  right  to  left  */
.flex-container {
    flex-direction: row-reverse;
}

/* 主轴 for 垂直方向,  from  on  to  under  */
.flex-container {
    flex-direction: column;
}

/* 主轴 for 垂直方向,  from  under  to  on  */
.flex-container {
    flex-direction: column-reverse;
}

2.3 flex-wrap

用于定义Flexproject in 主轴方向 on is 否换行.

/* 默认值, 不换行, project会被压缩 */
.flex-container {
    flex-wrap: nowrap;
}

/* 换行, 第一行 in  on 方 */
.flex-container {
    flex-wrap: wrap;
}

/* 换行, 第一行 in  under 方 */
.flex-container {
    flex-wrap: wrap-reverse;
}

2.4 flex-flow

flex-flow is flex-direction and flex-wrap 简写property.

/* 语法: flex-flow: flex-direction flex-wrap; */
.flex-container {
    flex-flow: row wrap;
    /* etc.同于: 
       flex-direction: row;
       flex-wrap: wrap;
    */
}

2.5 justify-content

用于定义Flexproject in 主轴方向 on for 齐方式.

/* 默认值, project靠主轴起点 for 齐 */
.flex-container {
    justify-content: flex-start;
}

/* project靠主轴终点 for 齐 */
.flex-container {
    justify-content: flex-end;
}

/* project in 主轴 on 居in for 齐 */
.flex-container {
    justify-content: center;
}

/* project之间 间隔相etc., 首尾project and containersedge缘没 has 间隔 */
.flex-container {
    justify-content: space-between;
}

/* project之间 间隔相etc., 首尾project and containersedge缘 间隔 is project之间间隔 一半 */
.flex-container {
    justify-content: space-around;
}

/* project之间 间隔相etc., 首尾project and containersedge缘 间隔也相etc. */
.flex-container {
    justify-content: space-evenly;
}

2.6 align-items

用于定义Flexproject in 交叉轴方向 on for 齐方式.

/* 默认值, project拉伸以填满交叉轴 */
.flex-container {
    align-items: stretch;
}

/* project靠交叉轴起点 for 齐 */
.flex-container {
    align-items: flex-start;
}

/* project靠交叉轴终点 for 齐 */
.flex-container {
    align-items: flex-end;
}

/* project in 交叉轴 on 居in for 齐 */
.flex-container {
    align-items: center;
}

/* project 基线 for 齐 */
.flex-container {
    align-items: baseline;
}

2.7 align-content

用于定义 many 行Flexproject in 交叉轴方向 on for 齐方式, 仅 in project换行时 has 效.

/* 默认值, project in 交叉轴 on 拉伸 */
.flex-container {
    align-content: stretch;
}

/* project in 交叉轴 on 靠起点 for 齐 */
.flex-container {
    align-content: flex-start;
}

/* project in 交叉轴 on 靠终点 for 齐 */
.flex-container {
    align-content: flex-end;
}

/* project in 交叉轴 on 居in for 齐 */
.flex-container {
    align-content: center;
}

/* project in 交叉轴 on 均匀分布, 首尾project and containersedge缘没 has 间隔 */
.flex-container {
    align-content: space-between;
}

/* project in 交叉轴 on 均匀分布, 首尾project and containersedge缘 间隔 is project之间间隔 一半 */
.flex-container {
    align-content: space-around;
}

/* project in 交叉轴 on 均匀分布, 首尾project and containersedge缘 间隔也相etc. */
.flex-container {
    align-content: space-evenly;
}

3. Flexprojectproperty

Flexproject has 以 under 主要property:

3.1 order

用于定义Flexproject 排列顺序, 数值越 small , 排列越靠 before , 默认值 for 0.

/* 更改project 排列顺序 */
.flex-item {
    order: 2;
}

.flex-item:nth-child(1) { order: 3; }
.flex-item:nth-child(2) { order: 1; }
.flex-item:nth-child(3) { order: 2; }

3.2 flex-grow

用于定义Flexproject in 剩余空间in 放 big 比例, 默认值 for 0 (不放 big ) .

/* project会根据剩余空间for放 big  */
.flex-item {
    flex-grow: 1;
}

3.3 flex-shrink

用于定义Flexproject in 空间不足时 缩 small 比例, 默认值 for 1 (会缩 small ) .

/* project不会缩 small  */
.flex-item {
    flex-shrink: 0;
}

/* project会缩 small  */
.flex-item {
    flex-shrink: 1;
}

3.4 flex-basis

用于定义Flexproject in 主轴方向 on 初始 big small , 默认值 for auto.

/* 设置project 初始宽度 for 200px */
.flex-item {
    flex-basis: 200px;
}

/* 设置project 初始宽度 for 50% */
.flex-item {
    flex-basis: 50%;
}

3.5 flex

flex is flex-grow, flex-shrink and flex-basis 简写property, 默认值 for 0 1 auto.

/* 语法: flex: flex-grow flex-shrink flex-basis; */
.flex-item {
    flex: 1 1 auto;
}

/* 常用值: flex: 1; etc.同于 flex: 1 1 0%; */
.flex-item {
    flex: 1;
}

3.6 align-self

用于定义单个Flexproject in 交叉轴方向 on for 齐方式, 会覆盖containers align-itemsproperty.

/* 单个project  for 齐方式 */
.flex-item {
    align-self: center;
}

4. common Flexbox布局模式

4.1 水平居in

.container {
    display: flex;
    justify-content: center;
}

4.2 垂直居in

.container {
    display: flex;
    align-items: center;
    height: 200px; /* 需要设置containers high 度 */
}

4.3 水平垂直居in

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* 需要设置containers high 度 */
}

4.4 两栏布局 (一侧固定, 一侧自适应)

.container {
    display: flex;
}

.sidebar {
    width: 200px; /* 固定宽度 */
    flex-shrink: 0; /* 防止缩 small  */
}

.main-content {
    flex: 1; /* 自适应宽度 */
}

4.5 三栏布局 (两侧固定, in间自适应)

.container {
    display: flex;
}

.left-sidebar {
    width: 200px; /* 固定宽度 */
    flex-shrink: 0; /* 防止缩 small  */
}

.main-content {
    flex: 1; /* 自适应宽度 */
}

.right-sidebar {
    width: 200px; /* 固定宽度 */
    flex-shrink: 0; /* 防止缩 small  */
}

4.6 etc. high 列

.container {
    display: flex;
}

.column {
    flex: 1;
    /* 不需要设置 high 度, 会自动etc. high  */
}

5. 练习