CSS弹性布局学习笔记：从基础开始搞懂弹性布局

一、什么是弹性布局——解决传统布局的痛点

传统的块级/行内块级排列、浮动和定位在面对以下需求时会显得力不从心：

• 水平居中+垂直居中同时实现。
• 子元素等分宽度或高度。怎么说呢，
• 响应式场景下子元素自动换行。
• 不想为每个浏览器写大量。

Flexbox正是为了解决这些痛点而生。只需在父容器上声明：

.container {
display: flex;}

此时父容器成为弹性容器其直接子元素自动成为弹性子项默认沿主轴排列。

1

2

3

.container {
display: flex;border: 1px dotted #666;}
.box {
再看width，200px;height: 100px;
font-size: 30px;
text-align: center;line-height: 100px;}
再看.box，nth-child { background:#ee4d4d;}
.box这方面，nth-child { background:#bdf046;}
至于.box，nth-child { background:#35e88c;}

效果说明：三个宽 200 px 的盒子紧挨着水平排列，容器宽度由内容撑开。

二、主轴与交叉轴——先理清方向。再玩属性

主轴: 默认水平，子项沿此方向排布。交叉轴: 与主轴垂直，默认是垂直方向。

很多 Flex 属性都是围绕“沿着主轴”还是“沿着交叉轴”来工作的。弄清这两个概念后你就不会再为“为什么 justify-content 不起作用”而抓狂了。

三、控制子项放大——flex-grow

Pain point：当容器有剩余空间时想让某些盒子自动拉伸占满，却不知道该写哪条属性？答案是 #flex-grow#.

.container {
display:flex;}
.box {
flex-grow:0;/* 默认不放大 */
再看height，100px;font-size:30px;text-align:center;其实，line-height:100px;}
.box的观点是，nth-child{ flex-grow:1;} /* 第一个占剩余空间的 1/2 */
至于.box，nth-child{ flex-grow:1;} /* 第二个占剩余空间的 1/2 */
.box的观点是，nth-child{ flex-grow:0;width:200px，} /* 第三固定宽度 */

效果说明：红色和绿色盒子等分剩余空间，蓝色盒子保持固定 200 px 宽度。

四、控制子项缩小——flex-shrink

Pain point：If container becomes narrower,some items get squashed and become unreadable. You need a way to “protect” certain elements from shrinking.

.container{
display:flex;}
.box{
至于width，200px;height:100px;按理说，}
说到.box。nth-child{ flex-shrink:0;} /* 不会被压缩 */
再看.box，nth-child{ flex-shrink:1;} /* 正常按比例缩小 */
.box的观点是，nth-child{ flex-shrink:1;}

The first box keeps its 200 px width even when viewport is very narrow.

五、设置子项默认尺寸——flex-basis

Pain point：You often set width/height,but Flex will ignore m when distributing space.

.box{
flex-basis:200px;说起来，/* 在分配多余空间前。这个盒子的理想尺寸 */
}

The shorthand .box{ flex:0 0 200px;}` combines #flex-grow#,#flex-shrink#。#flex-basis#.

六、允许换行——#flex-wrap#

Pain point：You have many items and don’t want m all squeezed onto one line.

...

.container{
display:flex;flex-wrap:wrap;/* 自动换行 */
}
.box{
从width来看，200px;height:100px;margin:5px，display:flex;
不过，justify-content:center;align-items:center;按理说，}
至于.box。nth-child{background:#ee4d4d;}
再看.box，nth-child{background:#bdf046;话说回来，}
/* 第三个颜色示例 */
至于.box。nth-child{background:#35e88c;不过，}

效果说明：Certain number of boxes per row automatically wrap when y exceed container width.

七、实战案例——三栏自适应布局

This is classic “fixed‑sidebars + fluid content” layout that many beginners struggle with using floats.

 p主体内容 p;
 p; p，说起来，
 p; p，
 p; p，

.page{
height :500px;display:flex;其实，}
/* 左右侧栏固定宽度 */
.left。.right{
flex :0 0 200px;按理说，/* 不放大、不缩小。基准宽度200 */
background:#aqua;}
/* 中间内容自适应剩余空间 */
.content{
flex :1;/* 等价于 1 1 0%，占满剩余空间 */
background:#eb8989;}
/* 为了 SEO 把 .content 放在最前，但视觉上想让它居中
* 使用 order 调整渲染顺序
*/
.left{ order:-1;}
.right{ order :1;}
.content{ order :0;}

EFFECT:The pink area expands/shrinks with viewport while both sidebars stay at exactly 200 px.

八、控制排列顺序——#order#


The property lets you change visual order without touching HTML structure—great for SEO and accessibility.

.item{ order :0;} /* 默认 */
.item这方面，first-of-type{order:-1;按理说，}/* 提前显示 */
说到.item。last-of-type{order :999;}/* 放到最终 */

九、属性速查表



属性 
作用 
默认值 




display:flex 
开启弹性容器 
— 


flex‑grow 
有剩余空间时是否放大 
0 


flex‑shrink 
空间不足时是否收缩 
1 


flex‑basis 
在分配多余空间前的基准尺寸 
auto 


flex 




grow  shrink  basis 的组合
 


0  1  auto 
 



flex‑wrap 
是否允许换行
nowrap / wrap / wrap‑reverse

nowrap


justify‑content 

 


flex-start / center / space-娱乐ween …控制所有项目在主轴上的分布方式


---Oops--- we need correct table rows

Let's rewrite table properly 

前言这方面。最近在学 CSS 弹性布局，发现它真的太好用了！以前写布局要靠 #float# 、 #clear# 、 #position# 等方式，经常遇到以下痛点：


左浮动后元素难以垂直居中；

A/B 两列高度不一致导致底部对齐困难；

“等分”+“自适应” 的需求往往需要写大量媒体查询；

bFC 清除浮动导致代码臃肿。说起来，

Shrink 时内容被压扁。看不清文字，


Simplify all se problems with Flexbox—just a few lines of CSS can replace dozens of old s.

\​\​\​\​\​\​\​\​\​\​\​\​\​\​\​\​\
​​​
​​​
​​​
​​​
​​​
​​​
​​​
​​​

​​​

​​

①

②



css
.container {
display:flex;border:1px dotted #666;}
.box{
width的观点是，200px;height:auto，padding:.5rem;其实，background:#f5f5f5;话说回来，border-radius:.25rem;怎么说呢，text-align:center;font-size:.875rem;margin:.25rem;}



一、什么是弹性布局——解决传统 float 布局的痛点？理解 Flex 前，需要先明白它诞生的根本原因：


*Float* 和 *inline-block* 在「等分」和「垂直居中」上力不从心；

*position:absolute* 脱离文档流后会导致后续元素重叠；

*媒体查询* 太多导致维护成本高。<\/ul>\
Flex 把「父容器」变成 **弹性容器**。其 **直接子元素** 成为 **弹性项目**，默认沿 **水平方向** 排列。---