码农备忘录
Inspire - Capo Productions

主题

note ​

Flex 布局（Flexible Box Layout，简称 Flexbox）是 CSS3 中的一种布局模型，旨在使布局更简单和灵活。它特别适合于一维布局（即在一个方向上排列元素），可以很方便地处理不同尺寸的元素和响应式设计。下面是 Flexbox 的基本概念和常用属性概览。

基本概念 ​

  • 容器：使用 display: flex 或 display: inline-flex 来创建 Flex 容器。
  • 项目：容器内部的直接子元素称为 Flex 项目。

容器属性 ​

  1. flex-direction：定义主轴方向。

    • row（默认）：从左到右
    • row-reverse：从右到左
    • column：从上到下
    • column-reverse：从下到上
    css
    .container {
    display: flex;
    flex-direction: row;
}

  2. flex-wrap：定义是否换行。

    • nowrap（默认）：不换行
    • wrap：换行
    • wrap-reverse：反向换行
    css
    .container {
    flex-wrap: wrap;
}

  3. justify-content：定义主轴上的对齐方式。

    • flex-start：起始对齐
    • flex-end：结束对齐
    • center：居中对齐
    • space-between：均匀分配，首尾对齐
    • space-around：均匀分配，间隔相等
    css
    .container {
    justify-content: center;
}

  4. align-items：定义交叉轴上的对齐方式。

    • stretch（默认）：拉伸以填满容器
    • flex-start：起始对齐
    • flex-end：结束对齐
    • center：居中对齐
    • baseline：按文本基线对齐
    css
    .container {
    align-items: center;
}

  5. align-content：多行对齐（在有换行的情况下使用）。

    • 类似于 align-items，但用于多行。

项目属性 ​

  1. flex-grow：定义项目的放大比例，默认值为 0。

    css
    .item {
    flex-grow: 1;
}

  2. flex-shrink：定义项目的缩小比例，默认值为 1。

    css
    .item {
    flex-shrink: 0;
}

  3. flex-basis：定义项目的初始大小，可以是长度单位（如 px、em）或 auto。

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

  4. flex：是 flex-grow, flex-shrink, flex-basis 的简写属性。

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

  5. align-self：允许单个项目覆盖容器的 align-items 属性。

    css
    .item {
    align-self: flex-end;
}

示例 ​

以下是一个简单的 Flexbox 布局示例：

html
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
css
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.item {
    background-color: lightblue;
    padding: 20px;
    flex: 1;
    margin: 5px;
}

总结 ​

Flexbox 使得复杂的布局变得简单且灵活，尤其适合于响应式设计。通过组合不同的属性，你可以很轻松地实现各种布局需求。

参考 ​