CSS弹性盒子学习笔记

什么是Flexbox？

Flexbox (Flexible Box) 是CSS3引入的一种用于布局的模式。
提供了一种简便且强大的方式，用于在网页中进行一维布局。

Flexbox特点：

适用于一维布局（水平或垂直）。
由父容器（flex容器）和子元素（flex项目）组成。
自动适应不同屏幕尺寸，常用于响应式设计。

Flex容器

激活Flex容器

使用display: flex将一个元素设为Flex容器。
行内元素使用display: inline-flex。

.container {
    display: flex;
}

Flex容器的两根轴

主轴 (main axis)：项目排列的主要方向。
交叉轴 (cross axis)：垂直于主轴的方向。

常用属性

flex-direction (主轴方向)
row（默认，从左到右）
row-reverse（从右到左）
column（从上到下）

column-reverse（从下到上）

flex-wrap (是否换行)

nowrap（默认，不换行）
wrap（需要时换行）

wrap-reverse（反向换行）

justify-content (主轴对齐)

flex-start（起点对齐，默认）
flex-end（末尾对齐）
center（居中对齐）
space-between（两端对齐）

space-around（均匀分布，间隔一致）

align-items (交叉轴对齐)

stretch（默认，拉伸填满容器）
center（居中对齐）
flex-start（顶部对齐）
flex-end（底部对齐）

baseline（基线对齐）

align-content (多行交叉轴对齐)

stretch（默认，拉伸填满）
center（居中对齐）
flex-start（顶部对齐）
flex-end（底部对齐）
space-between（两端对齐）
space-around（间隔均匀）

示例代码：

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

Flex项目 (Flex Items)

常用属性

order (项目顺序)

控制项目的排列顺序，数值越小越靠前。

flex-grow (放大比例)

控制元素在剩余空间中的放大比例。

flex-shrink (缩小比例)

控制元素在空间不足时的缩小比例。

flex-basis (初始大小)

定义项目在主轴方向上的初始尺寸。

align-self (单独设置对齐方式)

用于单独设置某个项目在交叉轴的对齐方式。

示例代码：

.item {
    flex: 1;
    order: 2;
    align-self: center;
}

Flexbox布局示例

单行居中布局

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

两列布局

.container {
    display: flex;
}
.left {
    flex: 1;
    background: lightblue;
}
.right {
    flex: 2;
    background: lightgreen;
}

三列等分布局

.container {
    display: flex;
    justify-content: space-between;
}
.col {
    flex: 1;
    padding: 10px;
    border: 1px solid black;
}

总结

掌握了Flexbox的基础概念，包括容器与项目的属性。
了解了如何使用Flexbox实现常见的网页布局，如居中布局、两列布局和三列布局。
掌握了flex-grow, flex-shrink和flex-basis的用法。

下一步学习：深入CSS Grid布局，探索更高级的网页布局方法。