CSS Flexbox 布局（Flexible Box Layout）是现代前端开发中常用的一种布局方式。与传统布局方式相比，Flexbox 布局更加灵活，并且可以更方便地实现响应式设计。在使用 Flexbox 布局时，理解选择器和权重的概念非常重要。本文将详细讲解 Flexbox 布局中的选择器和权重的相关知识，以及如何正确地使用它们。
选择器
Flexbox 布局中最常用的选择器是容器选择器和项目选择器。容器选择器用于选择 Flexbox 布局的容器，而项目选择器用于选择容器中的项目。
容器选择器
容器选择器通常是一个带有 display: flex; 属性的元素，它定义了 Flexbox 布局的容器。在容器选择器中，可以使用以下属性进行样式设置：
display: flex;：定义元素为 Flexbox 布局容器。flex-direction: row | row-reverse | column | column-reverse;：定义 Flexbox 布局的主轴方向。flex-wrap: nowrap | wrap | wrap-reverse;：定义换行排列的方式。justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;：定义 Flexbox 布局在主轴上如何分配空间。align-items: stretch | flex-start | flex-end | center | baseline;：定义 Flexbox 布局在交叉轴上如何对齐。align-content: flex-start | flex-end | center | space-between | space-around | stretch;：在一行多列的情况下，定义交叉轴上如何对齐多行。
例如，下面的代码片段定义了一个 Flexbox 布局的容器，并将其子元素沿着横向排列。
.container {
display: flex;
flex-direction: row;
}项目选择器
项目选择器指的是容器内容里的所有项目元素。在项目选择器中，可以使用以下属性进行样式设置：
flex-grow: <number>;：定义项目的放大比例。flex-shrink: <number>;：定义项目的缩小比例。flex-basis: <length> | auto;：定义项目的初始大小。flex: none | [flex-grow] [flex-shrink] [flex-basis];：同时定义flex-grow、flex-shrink和flex-basis属性值。align-self: auto | stretch | flex-start | flex-end | center | baseline;：定义单个项目在交叉轴上的对齐方式。
例如，下面的代码定义了一个 Flexbox 布局的容器，并且这个容器里有三个项目元素。这些元素在主轴上的大小比例为 1:2:1，它们在交叉轴上对齐方式为 center。
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- - ------ - ----- -- - ------ - ----- -- - ------ - ----- -- - ---------- - - - ----------- ------- -
权重
在 CSS 中，选择器权重用于确定哪一个规则将优先地应用于元素。权重值是在样式表中定义选择器的顺序，不同的选择器拥有不同的权重值，它们的优先级从高到低排序为：
!important：这个关键字的优先级最高。- 行内样式：使用
style属性定义的样式，它会覆盖任何其他样式设置。 - ID 选择器：使用
#符号定义的选择器。 - 类选择器/属性选择器/伪类选择器：使用
.符号或[attr=value]或:pseudo-class等方式定义的选择器。 - 类型选择器/伪元素选择器：使用元素名称或
::pseudo-element等方式定义的选择器。 - 通配符选择器、属性选择器（没有值）、组合符和存在性选择器：
*、[attr]、+、>、,等。
如果多个规则具有相同的权重值，则最后一个规则将覆盖之前的规则。
例如，下面的代码片段使用类选择器 .btn 定义按钮的样式，但是使用 !important 关键字使这个样式更加高优先级。
.btn {
background-color: #f00;
color: #fff;
}
.btn {
color: #000 !important;
}总结
了解和掌握 Flexbox 布局中的选择器和权重可以帮助我们更好地掌握该布局方式，加强对布局的控制和理解。正确使用选择器和权重可以有效地优化样式表，避免出现冗余代码和样式出现混淆的问题。在实际开发中，我们应该根据具体情况，灵活使用各种选择器和权重，以达到最优的布局效果。
示例代码
以下为一个简单的 Flexbox 布局的示例代码，它包含了容器选择器和项目选择器的样式设置，以及权重的应用。
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- - ----- - ------ ------ ------- ------ ----------------- ----- ------ ----- ----------- ------- - ------ - ----------------- ---- ----------- - ------ - ----------------- ----- - ------ - ----------------- ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483d47348841e9894311cac