CSS伸缩盒模子(弹性盒子)

伸缩盒模子（Flexbox，Flexible Box Layout）是 CSS 中一种一维结构模子，用于更高效地处置惩罚元素的对齐、分布和相应式结构。其核心头脑是让容器内的子元素（称为“项目”）可以大概机动地自动调解巨细和位置以顺应差别屏幕尺寸和内容变革。

1.​核心特性

1.1​容器与项目

​        容器：利用 display: flex 或 display: inline-flex 界说的父元素。 ​
        项目：容器内的直接子元素，默认沿容器的主轴分列。 ​
1.2主轴与交织轴

​        主轴​（默认程度方向）：项目分列的方向。
        ​交织轴​（垂直于主轴）：项目对齐的方向。 ​
1.3关键属性

​        flex-direction：界说主轴方向（如 row, column）。 ​
        justify-content：控制项目在主轴上的对齐方式（如 flex-start, center, space-between）。
​        align-items：控制项目在交织轴上的对齐方式（如 stretch, center）。
        ​flex-wrap：答应项目换行（如 nowrap, wrap）。
        ​align-self：单独调解某个项目的对齐方式。
1.4​弹性伸缩

项目可通过 flex: grow/shrink 或 flex-basis 控制巨细比例，默认均分可用空间。 比方：flex: 1 体现项目可等比例扩展，flex: 2 0 auto 体现优先放大两倍。

​2.上风

简化复杂结构：无需浮动或定位即可实现程度/垂直居中、多栏等效果。
​相应式计划：自动顺应屏幕尺寸变革，恰当移动端开辟。 ​
代码轻便：镌汰冗余样式，进步维护性。 ​

3.常见场景：

        3.1导航栏（横向菜单）
        3.2相应式图片轮播
        3.3多栏结构（如博客侧边栏）
        3.4表单位素对齐
4.示例代码

2. .container {
3.   display: flex;
4.   justify-content: space-between; /* 主轴两端对齐 */
5.   align-items: center;           /* 交叉轴居中对齐 */
6. }
7. .item {
8.   flex: 1; /* 等比例占据剩余空间 */
9.   min-width: 200px;
10. }

复制代码