移动端flex布局样式详解

一、基础设置
html
<!-- HTML 结构 -->
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
</div>

css
/* 关键设置 */
.container {
display: flex; /* 启用 Flex 布局 */
flex-direction: row; /* 主轴方向（默认水平） */
justify-content: space-between; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
gap: 10px; /* 元素间距 (现代浏览器支持) */
min-height: 100vh; /* 容器高度撑满屏幕 */
}

 

二、核心属性详解

1. 容器属性
属性 移动端常用值 作用

`flexdirection` `row` (默认), `column` 主轴方向（横向/纵向）
`flexwrap` `wrap` 允许换行（移动端多列布局必备）
`justifycontent` `flexstart`, `center`, `spacearound` 主轴对齐方式
`alignitems` `center`, `flexstart` 交叉轴对齐方式
`aligncontent` 多行时使用 多行整体对齐

2. 项目属性
属性 移动端技巧

`flex` `flex 1` 让元素自动填充剩余空间
`flexgrow` 控制元素拉伸比例
`flexshrink` 控制元素压缩比例（默认1）
`alignself` 单独控制某个项目对齐方式

---

三、典型移动端布局示例

示例1：顶部导航栏
css
.nav-bar {
display: flex;
justify-content: space-between; /* 左右元素分开 */
align-items: center;
padding: 0 20px;
height: 60px;
background: fff;
}

.logo { flex: 0 0 80px; } /* 不伸缩，固定宽度 */
.menu { flex: 1; } /* 占据剩余空间 */
.search { flex: 0 0 60px; }

示例2：垂直瀑布流布局
css
.gallery {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}

.item {
flex: 1 1 30%; /* 每个项目占30%宽度 */
min-height: 100px;
margin: 5px;
}

示例3：响应式按钮组
css
.btn-group {
display: flex;
flex-wrap: wrap; /* 小屏幕时自动换行 */
gap: 8px;
}

.btn {
flex: 1 1 100px; /* 最小宽度100px，可伸缩 */
min-width: 80px;
}

---

四、移动端特别优化
1. 视口设置
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 使用 `min-height: 100vh`
确保容器高度适配屏幕

3. 结合媒体查询
css
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

4. 避免溢出
设置 `overflow: hidden` 或合理使用 `min-width/max-width`

---

五、常见问题解决
1. 元素不均分
使用 `flex: 1` 让所有项目等分剩余空间

2. 底部固定元素
css
.footer {
position: fixed;
bottom: 0;
width: 100%;
}

3. 文本溢出处理
css
.text {
flex-shrink: 0; /* 禁止文字容器收缩 */
overflow: hidden;
text-overflow: ellipsis;
}

 

掌握这些技巧后，可以轻松实现移动端的各种复杂布局。Flexbox 的弹性特性特别适合应对不同屏幕尺寸的适配需求。