【每天一个小笔记】05 Vue项目的Flex布局

原创已于 2025-11-02 20:39:16 修改 · 837 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #vue.js #前端

于 2025-11-02 20:34:29 首次发布

VUE 专栏收录该内容

6 篇文章

订阅专栏

Flex布局

Flex布局（弹性盒子布局）是一种一维布局模型，用于在单个轴线上（水平或垂直）排列元素。它通过弹性容器（flex container）和弹性项目（flex items）的属性控制布局方式，适合处理局部或线性排列的场景。

核心概念

主轴（main axis）与交叉轴（cross axis）：主轴方向由 flex-direction 定义（默认水平方向），交叉轴垂直于主轴。

容器属性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
项目属性：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self

适用场景：

导航栏、卡片列表等需要弹性对齐的组件。
单行或单列布局，动态调整项目间距或对齐方式。

容器属性

flex-direction

“flex-direction” 是 CSS（层叠样式表）中用于 Flexbox 布局模型的一个属性。它主要用来决定弹性容器内弹性项目的排列方向。具体来说：

row：默认值，弹性项目将从左到右水平排列。
row - reverse：弹性项目从右到左水平排列，与 “row” 方向相反。
column：弹性项目从上到下垂直排列。
column - reverse：弹性项目从下到上垂直排列，与 “column” 方向相反。

flex-wrap

“flex-wrap” 是 CSS（层叠样式表）中用于弹性盒子布局的属性。它主要控制弹性项目在弹性容器内是否换行以及换行的方式。

nowrap：弹性项目不会换行，会尽量在一行内显示，可能会导致项目被压缩以适应容器宽度。
wrap：弹性项目在容器宽度不足时会换行显示。
wrap-reverse：弹性项目同样会换行，但换行的方向与 “wrap” 相反，是从下往上换行。

flex-flow

在 CSS（层叠样式表）中，flex-flow是一个复合属性，它是flex-direction和flex-wrap两个属性的简写形式。

flex-direction用于决定弹性容器内项目的排列方向

flex-wrap则用来控制当弹性容器空间不足时，项目是否换行以及换行的方式

例如，当设置display: flex; flex-flow: row wrap;时，表示弹性容器内的项目水平排列，并且当空间不足时会换行。

justify-content

"justify-content"用于在 Flexbox（弹性盒模型）或 Grid（网格布局）布局中，定义项目在主轴上的对齐方式。通过该属性可以控制元素在水平方向（默认主轴方向）上的分布和对齐，比如使元素靠左、居中、靠右对齐，或均匀分布等，以此来实现不同的页面布局效果。常见取值有：

flex-start：项目位于容器的开头
flex-end：项目位于容器的结尾
center：项目位于容器的中心
space-between：项目均匀分布在容器中，两端不留空白
space-around：项目均匀分布在容器中，两端留有一半的空白。

align-items

“align-items” 用于设置弹性容器内项目在交叉轴（与主轴垂直的轴）上的对齐方式。它主要有以下几种常见取值及含义：

stretch：默认值。项目被拉伸以适应容器的高度或宽度（取决于交叉轴方向）。比如一个弹性容器中有几个弹性项目，若项目没有设置明确的高度，在 “align-items: stretch” 作用下，它们会自动拉伸至填满容器的交叉轴空间。
center：项目在交叉轴上居中对齐。假设有一个水平方向的弹性容器，内部项目高度不一，设置 “align-items: center” 后，这些项目会在垂直方向（交叉轴方向）上居中排列。
flex-start：项目在交叉轴起点对齐。例如在一个垂直方向的弹性容器中，使用 “align-items: flex-start”，项目会在水平方向（交叉轴方向）的起始位置对齐。
flex-end：项目在交叉轴终点对齐。如在水平弹性容器中，设置 “align-items: flex-end”，项目会在垂直方向（交叉轴方向）的末尾位置对齐。
baseline：项目根据它们的基线对齐。比如一行文本和一个按钮在弹性容器内，设置 “align-items: baseline”，文本和按钮会以文本的基线为基准对齐。

align-content

“align-content” 主要用于控制多轴线的对齐方式。在 Flexbox 中，当存在多行弹性项目且有多余空间时，“align-content” 决定这些行在交叉轴方向上如何分布空间，取值如:

flex-start：子项向交叉轴的起点对齐。

flex-end：子项向交叉轴的终点对齐。

center：子项在交叉轴上居中对齐。

space-between：子项在交叉轴上均匀分布，首尾子项贴紧容器边缘。

space-around：子项在交叉轴上均匀分布，每个子项两侧间距相等。

space-evenly：子项在交叉轴上均匀分布，所有间距（包括边缘）相等。

stretch：子项在交叉轴上拉伸以填满容器（默认值）。

项目属性

order

order 是 CSS Flexbox 和 Grid 布局中的一个属性，用于控制项目在容器中的排列顺序。默认情况下，Flex 或 Grid 项目的 order 值为 0，数值越大，项目越靠后排列；数值越小，项目越靠前排列。

<div class="example-section">
    <div class="example-container">
        <div class="flex-item order-3">1 (order: 3)</div>
        <div class="flex-item order-1">2 (order: 1)</div>
        <div class="flex-item order-2">3 (order: 2)</div>
    </div>
    <div class="example-label">不同order值的效果</div>
</div>

注意事项

order 仅影响视觉顺序，不会改变 DOM 结构或键盘导航顺序。
负值也是有效的，例如 order: -1 会让项目排在默认值（0）之前。
多个相同 order 值的项目会按照它们在 DOM 中的顺序排列

flex-grow

flex-grow” 它定义了项目在 Flex 容器剩余空间中的增长比例。当 Flex 容器有剩余空间时，设置了 “flex-grow” 属性的项目会按照指定的比例分配这些剩余空间，值越大，项目占据的剩余空间就越多。例如，若一个 Flex 容器中有三个项目，第一个项目 “flex-grow” 设为 1，第二个设为 2，第三个设为 3 ，那么在分配剩余空间时，第三个项目得到的空间是第一个项目的 3 倍，是第二个项目的 1.5 倍。如果所有项目 “flex-grow” 都为 1，则它们将平均分配剩余空间。

flex-shrink

flex-shrink” 它定义了项目在弹性容器空间不足时的收缩规则。其值为一个数字，默认值是 1。当值为 0 时，表示该项目不收缩；值越大，相对其他项目越容易收缩。比如有三个弹性项目，第一个项目的 flex-shrink 为 1，第二个为 2，第三个为 3，当容器空间不足时，第三个项目收缩的比例会大于第二个，第二个又大于第一个。

flex-basis

“flex-basis” 它主要用来设置弹性项目在主轴方向上的初始大小。

具体来说，“flex-basis” 决定了在分配剩余空间之前，弹性项目所占据的空间大小。如果设置了具体的长度值（如 px、em 等），弹性项目会按照这个值来确定初始大小；若设置为 “auto”，则弹性项目会基于自身内容的大小来确定初始尺寸；而当设置为 “0%” 时，弹性项目将不占用额外空间，所有剩余空间会根据 “flex-grow” 等属性来分配。

例如，在一个弹性容器中有三个弹性项目，为其中一个项目设置 “flex-basis: 200px”，那么这个项目在主轴方向上一开始就会占据 200 像素的空间，其他两个项目会根据剩余空间和它们自身的 “flex-basis” 及相关弹性属性来进行布局。它在创建复杂且灵活的网页布局，尤其是响应式布局时，起着重要作用，能帮助开发者更好地控制弹性项目的初始尺寸，以适应不同屏幕大小和设备。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self

“align-self” 是 CSS（层叠样式表）中的一个属性，用于设置弹性盒子（Flexbox）或网格布局（Grid Layout）中单个项目（子元素）的对齐方式。它允许你覆盖父容器设置的默认对齐方式，从而更精确地控制单个元素在交叉轴（与主轴垂直的轴）上的对齐表现。例如在弹性盒子布局中，父容器设置为水平排列（主轴为水平方向），使用 “align-self: center;” 可使某个子元素在垂直方向（交叉轴）上居中对齐。常见的取值有：