CSS Flexbox

学习 CSS 弹性布局（Flexbox）的基本概念、属性和使用方法，掌握现代 CSS 布局技术。

什么是 CSS Flexbox？

CSS Flexbox（弹性布局）是一种一维布局模型，用于在容器中对项目进行灵活的排列和对齐。它可以轻松处理不同屏幕尺寸和设备的布局需求。

Flexbox 基本术语

弹性容器 (Flex Container)：应用了 display: flex; 或 display: inline-flex; 的元素。
弹性项目 (Flex Item)：弹性容器的直接子元素。
主轴 (Main Axis)：弹性项目排列的主要轴线，默认为水平方向。
交叉轴 (Cross Axis)：与主轴垂直的轴线，默认为垂直方向。
主轴起点/终点：弹性项目在主轴上的起始和结束位置。
交叉轴起点/终点：弹性项目在交叉轴上的起始和结束位置。
弹性项目尺寸：弹性项目在主轴和交叉轴上的尺寸。

/* 创建一个弹性容器 */
.flex-container {
    display: flex;
    /* 其他 flex 容器属性 */
}

/* 弹性项目会自动成为容器的子元素 */
.flex-item {
    /* 其他 flex 项目属性 */
}

Flexbox 容器属性

1. display

定义一个弹性容器。

值	描述
flex	创建一个块级弹性容器。
inline-flex	创建一个内联弹性容器。

2. flex-direction

定义主轴的方向，决定弹性项目的排列方向。

值	描述
row	默认值，主轴为水平方向，起点在左侧。
row-reverse	主轴为水平方向，起点在右侧。
column	主轴为垂直方向，起点在顶部。
column-reverse	主轴为垂直方向，起点在底部。

3. flex-wrap

定义弹性项目是否换行。

值	描述
nowrap	默认值，不换行，弹性项目会缩小以适应容器。
wrap	换行，第一行在顶部。
wrap-reverse	换行，第一行在底部。

4. flex-flow

flex-direction 和 flex-wrap 的简写属性。

语法	描述
flex-flow: <flex-direction> <flex-wrap>	默认值为 row nowrap。

5. justify-content

定义弹性项目在主轴上的对齐方式。

值	描述
flex-start	默认值，弹性项目从主轴起点对齐。
flex-end	弹性项目从主轴终点对齐。
center	弹性项目在主轴上居中对齐。
space-between	弹性项目之间均匀分布，首尾项目贴近容器边缘。
space-around	弹性项目之间均匀分布，首尾项目距离容器边缘有一半间距。
space-evenly	弹性项目之间和与容器边缘之间都均匀分布。

6. align-items

定义弹性项目在交叉轴上的对齐方式。

值	描述
stretch	默认值，弹性项目拉伸以填充容器。
flex-start	弹性项目从交叉轴起点对齐。
flex-end	弹性项目从交叉轴终点对齐。
center	弹性项目在交叉轴上居中对齐。
baseline	弹性项目按基线对齐。

7. align-content

定义多根轴线（多行）在交叉轴上的对齐方式，仅在弹性项目换行时有效。

值	描述
stretch	默认值，轴线拉伸以填充容器。
flex-start	轴线从交叉轴起点对齐。
flex-end	轴线从交叉轴终点对齐。
center	轴线在交叉轴上居中对齐。
space-between	轴线之间均匀分布，首尾轴线贴近容器边缘。
space-around	轴线之间均匀分布，首尾轴线距离容器边缘有一半间距。
space-evenly	轴线之间和与容器边缘之间都均匀分布。

Flexbox 项目属性

1. order

定义弹性项目的排列顺序，数值越小，排列越靠前。

值	描述
number	默认值为 0，可以是负数。

2. flex-grow

定义弹性项目的放大比例，默认为 0，即不放大。

值	描述
number	默认值为 0，表示不放大。如果所有项目的 flex-grow 都为 1，则它们将平均分配剩余空间。

3. flex-shrink

定义弹性项目的缩小比例，默认为 1，即当空间不足时会缩小。

值	描述
number	默认值为 1，表示空间不足时会缩小。如果设置为 0，则空间不足时不会缩小。

4. flex-basis

定义弹性项目在主轴上的初始尺寸。

值	描述
length	指定具体的长度值，如 px、em、% 等。
auto	默认值，弹性项目的初始尺寸由其内容决定。

5. flex

flex-grow、flex-shrink 和 flex-basis 的简写属性。

值	描述
none	等同于 0 0 auto，表示不放大也不缩小。
auto	等同于 1 1 auto，表示会放大也会缩小。
1	等同于 1 1 0，表示会放大也会缩小，初始尺寸为 0。
<flex-grow> <flex-shrink> <flex-basis>	完整的简写形式。

6. align-self

定义单个弹性项目在交叉轴上的对齐方式，覆盖容器的 align-items 属性。

值	描述
auto	默认值，继承容器的 align-items 值。
stretch	弹性项目拉伸以填充容器。
flex-start	弹性项目从交叉轴起点对齐。
flex-end	弹性项目从交叉轴终点对齐。
center	弹性项目在交叉轴上居中对齐。
baseline	弹性项目按基线对齐。

Flexbox 实际应用示例

示例 1：水平居中

<div class="container">
    <div class="item">居中内容</div>
</div>

<style>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: #f0f0f0;
}

.item {
    padding: 20px;
    background-color: #e0f7fa;
    border-radius: 4px;
}
</style>

示例 2：导航菜单

<nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

<style>
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: white;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
}
</style>

示例 3：卡片布局

<div class="card-container">
    <div class="card">卡片 1</div>
    <div class="card">卡片 2</div>
    <div class="card">卡片 3</div>
    <div class="card">卡片 4</div>
</div>

<style>
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.card {
    flex: 1 1 200px;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 4px;
    text-align: center;
}
</style>

示例 4：圣杯布局

<div class="holy-grail">
    <header>头部</header>
    <main class="content">
        <aside class="left-sidebar">左侧边栏</aside>
        <section class="main-content">主内容</section>
        <aside class="right-sidebar">右侧边栏</aside>
    </main>
    <footer>底部</footer>
</div>

<style>
.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    padding: 20px;
    background-color: #333;
    color: white;
}

.content {
    display: flex;
    flex: 1;
}

.left-sidebar, .right-sidebar {
    flex: 0 0 200px;
    background-color: #f0f0f0;
    padding: 20px;
}

.main-content {
    flex: 1;
    padding: 20px;
    background-color: #ffffff;
}
</style>

Flexbox 使用技巧

一维布局优先使用 Flexbox：Flexbox 适用于一维布局（水平或垂直），而 Grid 适用于二维布局。
合理使用简写属性：使用 flex 简写属性可以简化代码。
注意浏览器兼容性：虽然现代浏览器都支持 Flexbox，但在处理旧浏览器时需要考虑兼容性。
避免过度使用：对于简单的布局，使用传统的布局方法可能更加高效。
结合媒体查询：Flexbox 可以与媒体查询结合使用，创建响应式布局。
使用 gap 属性：在弹性容器上使用 gap 属性可以方便地设置项目之间的间距。

Flexbox 总结

Flexbox 是一种一维布局模型，用于在容器中对项目进行灵活的排列和对齐。
弹性容器通过 display: flex; 或 display: inline-flex; 创建。
Flexbox 容器属性控制整个容器的布局方式，如主轴方向、对齐方式等。
Flexbox 项目属性控制单个项目的行为，如放大缩小比例、排列顺序等。
Flexbox 可以轻松实现水平居中、垂直居中、等宽布局等常见布局需求。
Flexbox 是现代 CSS 布局的重要工具，掌握它可以大大提高布局效率。