当前位置：首页 > news >正文

Flex弹性布局

news 2025/9/14 23:25:10

Flexible Box（弹性盒子）布局是CSS3中引入的一种强大的布局模式，它能够更高效地处理容器内项目的排列、对齐和空间分配问题，特别适合构建响应式设计。

基本属性

Flex容器：设置了display: flex或display: inline-flex的父元素
Flex项目：Flex容器的直接子元素
主轴：Flex项目的默认排列方向
副轴：与主轴垂直的方向

/* 定义一个Flex容器 */
.container {display: flex; /* 或 inline-flex */
}

拥有flex属性的容器内的直接子元素自动成为Flex项目

##Flex容器属性详解

1. flex-direction

设置主轴的方向，元素跟着主轴排列
默认主轴为x水平向右，侧轴为y水平向下

.container {flex-direction: row | row-reverse | column | column-reverse;
}

在这里插入图片描述

2. flex-wrap

控制项目是否充满后换行

.container {flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行，会在充满后压缩项目
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

3. flex-flow

flex-direction和flex-wrap的简写

.container {flex-flow: column wrap;
}

4. justify-content

定义项目在主轴上的对齐方式

.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

在这里插入图片描述

5. align-items

定义项目在副轴上的对齐方式（单行有效）

.container {align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch（默认）：拉伸填满容器高度
flex-start：顶部对齐
flex-end：底部对齐
center：垂直居中
baseline：项目的第一行文字基线对齐

6. align-content

定义多根轴线的对齐方式（多行有效）

.container {align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

属性值与justify-content类似->多了一个stretch
在这里插入图片描述

Flex子元素属性

1. order

定义项目的沿主轴的前后排列顺序，而不是显示权重排列顺序，数值越小越靠前，可以为负整数。

.item {order:number; /* 默认0 */
}

2. flex

用来代表分配剩余空间所占份数

.item {flex: number;
}

若flex为1，则代表该项目在剩余空间（父元素空间-已写死空间）占有1份。

3. align-self

允许单个项目在侧轴有与其他项目不一样的对齐方式

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Flex布局注意事项

1. 误区

不是所有场景都适合Flex：简单的一维布局用Flex，复杂二维布局考虑Grid
过度使用flex: 1：可能导致内容挤压。

2. 性能考量

大规模使用Flex布局（尤其是嵌套）可能影响渲染性能
避免在滚动容器内使用复杂的Flex布局

3. flex常用技巧

垂直居中：

.container {display: flex;<!--在主轴上居中-->justify-content: center;<!--在副轴上居中-->align-items: center;
}

等高分栏：

.container {display: flex;
}
.item {
<!--多个item均占一份则可以实现等宽/等高-->flex: 1;
}

底部对齐：

        .container {display: flex;flex-direction: column;background-color: blue;height: 400px;}.content {flex: 1;background-color: aqua;}

<body>
<div class="container">123<div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div>123
</div>
</body>

效果：
在这里插入图片描述
删去4后：

Flex布局实战案例

1. 经典三栏布局（圣杯布局）

<div class="container"><header>Header</header><main><article>Main Content</article><nav>Navigation</nav><aside>Sidebar</aside></main><footer>Footer</footer>
</div>

css：
在这里插入图片描述

跟随视口而变化

2. 响应式导航栏

<nav class="navbar"><div class="logo">Logo</div><ul class="nav-links"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul><div class="menu-toggle">☰</div>
</nav>

.navbar {display: flex;justify-content: space-between;align-items: center;padding: 1rem;background-color: pink;}
.nav-links {display: flex;gap: 1rem;list-style: none;background-color: aqua;}
.menu-toggle {display: none;
}@media (max-width: 768px) {.nav-links {display: none;}.menu-toggle {display: block;}
}