html - 在移动视口上居中 flexbox 包装
问题描述
如何在移动视口上居中堆叠项目?
这是我的片段:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.space-between {
justify-content: space-between;
}
.space-between div {
background: pink;
}
.flex-item {
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container space-between ">
<div class="flex-item">very long text 1</div>
<div class="flex-item">very long text 2</div>
<div class="flex-item">very long text 3</div>
</div>
解决方案
您应该@media-query
用于移动视图。重构您的 HTML 和 CSS 后,这是您更新的代码
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media only screen and (max-width: 768px) {
.flex-container {
justify-content: center;
}
}
.flex-container div {
background: pink;
}
.flex-item {
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
HTML
<div class="flex-container space-between ">
<div class="flex-item">very long text 1</div>
<div class="flex-item">very long text 2</div>
<div class="flex-item">very long text 3</div>
</div>
推荐阅读
- php - 如何从一个表中的php laravel中的两个表中获取多个值?
- android - 卡在 Gradle 上:在 android studio 中下载 maven-metadata.xml
- c# - 将 NT AUTHORITY\System 添加到 SQL Server 之外的 SQL Server 中的 Sysadmin 角色
- python - SQLalchemy 空列定义模型
- python - 用逗号分割字符串,除非后跟空格或“+”
- python - 如何将 chart.y_axis 类别更改为数字
- hibernate - 在 5.4 中是否有任何选项可以控制模式验证?具体来说,序列分配大小验证
- java - 如何使用 Jib 为多模块 Spring Boot 应用程序构建 Docker 映像
- office365 - Excel 内部自定义功能的使用(一次性购买许可证)
- c++ - SplitEmptyFunction 不拆分空函数