fIex
flex 是 CSS 的一个属性,用于定义弹性盒模型(flexbox)布局中的弹性项的属性。通过使用 flex 属性,可以控制弹性项在弹性容器中的伸缩、对齐和空间分配等行为。
fIex的属性值
有三个属性值,分别是:
- flex-grow: 定义了弹性项目的放大比例,默认值为 0。如果所有弹性项目都设置为 1,则它们会等分可用空间。如果一个项目设置为 2,其他项目为 1,则后者占据的空间将是前者的两倍。
- flex-shrink: 定义了弹性项目的缩小比例,默认值为 1。当空间不足时,弹性项目根据 flex-shrink 的比例减少尺寸。如果所有弹性项目都设置为 1,则它们会等比例缩小。如果一个项目设置为 0,其他项目为 1,则空间不足时,后者会缩小而不是前者。
- flex-basis: 定义了弹性项目在分配多余空间之前的初始尺寸,默认值为 auto。可以设置为固定值(如像素或百分比)或 auto。
- 这三个值可以组合使用,形成 flex 属性的完整语法:flex: flex-grow flex-shrink flex-basis。
示例用法
下面是一些示例用法:
.flex-item {
flex: 1; /* 相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}
.flex-item2 {
flex: 2 1 200px; /* 相当于 flex-grow: 2; flex-shrink: 1; flex-basis: 200px; */
}
.flex-item3 {
flex: 0 0 auto; /* 相当于 flex-grow: 0; flex-shrink: 0; flex-basis: auto; */
}
常见属性
当使用 flex 属性时,还可以结合其他属性来更精确地控制弹性盒模型布局。以下是一些与 flex 属性搭配使用的常见属性:
-
flex-direction: 定义了主轴的方向,默认为 row。可以设置为 row(水平方向)、row-reverse(水平反向)、column(垂直方向)或 column-reverse(垂直反向)。
-
justify-content: 定义了弹性项在主轴上的对齐方式,默认为 flex-start。可以设置为 flex-start(起始位置对齐)、flex-end(末尾位置对齐)、center(居中对齐)、space-between(两端对齐,项目之间间隔相等)、space-around(每个项目周围间隔相等)或 space-evenly(每个项目和周围间隔相等)。
-
align-items: 定义了弹性项在交叉轴上的对齐方式,默认为 stretch。可以设置为 flex-start(起始位置对齐)、flex-end(末尾位置对齐)、center(居中对齐)、baseline(基线对齐)或 stretch(拉伸填充)。
-
align-self: 定义了单个弹性项在交叉轴上的对齐方式。可以覆盖 align-items 的设置。可以设置为 auto(继承 align-items 值)、flex-start(起始位置对齐)、flex-end(末尾位置对齐)、center(居中对齐)、baseline(基线对齐)或 stretch(拉伸填充)。
-
align-content: 当弹性容器内的行或列有多余空间时,定义了多个行(对于水平方向)或多个列(对于垂直方向)在交叉轴上的对齐方式。可以设置为 flex-start(起始位置对齐)、flex-end(末尾位置对齐)、center(居中对齐)、space-between(两端对齐,行或列之间间隔相等)、space-around(每行或列周围间隔相等)或 stretch(拉伸填充)。
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flex-item {
flex: 1;
}
在上述示例中,.flex-container 是一个弹性容器,设置为水平方向布局(flex-direction: row)。弹性项(.flex-item)的样式设置为 flex: 1,表示它们会等分水平空间。同时,使用 justify-content: space-between 将弹性项之间的空间均匀分配,并使用 align-items: center 将弹性项在垂直方向上居中对齐。
总结
在上述示例中,我们使用 flex 属性设置了不同的弹性项样式。.flex-item 的 flex 值为 1,表示它会根据可用空间等分剩余空间。.flex-item2 的 flex 值为 2 1 200px,表示它会占据其他项目的两倍空间,初始尺寸为 200px。.flex-item3 的 flex 值为 0 0 auto,表示它不会伸缩,初始尺寸根据内容自动确定。
通过设置不同的 flex 值,可以控制弹性项目在弹性容器中的布局和尺寸分配。