### CSS `display:
flex` 属性详解
#### 定义与基本概念
`display:
flex` 是一种用于创建灵活布局的方式，能够更方便地设计响应式的网页结构。当容器设置此属性后，其子元素会自动成为
弹性盒子模型中的项目，并遵循一系列特定的行为规则[^1]。
#### 基本语法
要使某个HTML元素作为
Flexbox容器，只需简单地将其样式表中的`display`属性设为`
flex`：
```css
.container {
display:
flex;
}
```
这行简单的声明即可开启强大的布局能力。
#### 主轴与交叉轴的概念
在
理解具体属性之前，先来认识两个重要术语——主轴(main axis) 和 交叉轴(cross axis)，它们定义了项目的排列方向。默认情况下：
- **主轴**是从左到右；
- **交叉轴**则是从上至下；
可以通过改变某些属性来自由调整这两个维度的方向。
#### 关键属性介绍
#####
Flex Container Properties (作用于父级)
######
flex-direction
决定主轴的方向以及项目的排列顺序，默认值为row即横向排布。其他可能取值包括column（纵向）、row-reverse（反向横排）和column-reverse（反向纵排）。例如：
```css
.container {
flex-direction: row | column | row-reverse | column-reverse;
}
```
###### justify-content
控制沿主轴上的空间分配方式，影响的是每项之间的间距分布情况。常见选项有start、end、center、space-between、space-around等。比如让所有子元素居中显示可以这样写：
```css
.container {
justify-content: center;
}
```
###### align-items
设定侧轴上的对齐模式，适用于整个容器内的所有项目。可用参数如stretch（拉伸填充剩余空间），
flex-start（顶部对齐），
flex-end（底部对齐），center（垂直居中）等等。如果希望所有的孩子都位于中间位置则应采用下面的形式：
```css
.container {
align-items: center;
}
```
#####
Flex Item Properties (作用于子级)
###### order
指定项目的排序次序，默认数值为0，越小越靠前。通过修改这个值可以让不同级别的组件按照需求重新排序而不必改动DOM树的位置关系。
######
flex-grow
决定了该项目在其所在行内未被占用的空间里所占的比例大小。接受任意非负实数输入，缺省状态下等于零意味着不增长也不收缩。
######
flex-shrink
规定缩小因子，在总宽度不足时按比例减少尺寸以适应容器边界。同样是一个正整型常量，默认也是0表示不允许压缩。
######
flex-basis
初始长度或宽高基数，通常配合百分比单位一起使用以便更好地实现自适应效果。
###### align-self
允许单独配置某一项相对于兄弟节点的不同对齐策略，从而覆盖掉全局性的`align-items`设定。有效枚举列表包含auto、
flex-start、
flex-end、center、baseline、stretch六种情形之一[^2]。
#### 实际案例解析
考虑这样一个例子：构建一个具有左侧固定栏加右侧动态变化区域的页面框架。这里就可以利用上述提到的知识点轻松搞定！
```html
<div class="main-content">
<div class="left-content"></div>
<div class="right-content"></div>
</div>
```
对应的CSS代码片段如下所示：
```css
.main-content {
width: 100%;
height: 100%;
background-color: #72f884;
display:
flex; /* 启动弹性盒 */
}
.left-content {
box-sizing: border-box;
width: 200px;
height: 100%;
background-color: rgb(238, 119, 34);
}
.right-content {
box-sizing: border-box;
flex: 1;
height: 100%;
background-color: rgb(68, 133, 255);
}
```
这段样例展示了如何借助`display:
flex`快速搭建起两列式布局方案，其中左边部分保持定宽而右边随窗口缩放自动调节自身范围。
扫一扫
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
