禁用弯曲包装间距

或Betzalel

我有一个要显示的项目列表,我正在使用flex-wrap。

但是我的问题是(第一列之后的)列在剩余空间的中心对齐,而不是粘在第一列上。

.items {
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 500px;
}

.items .item {
  font-size: 5rem;
  border: 1px solid grey;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem;
  width: 20rem;
  text-align: center;
}
<div class="items">
  <div class="item">
    #1
  </div>
  <div class="item">
    #2
  </div>
  <div class="item">
    #3
  </div>
  <div class="item">
    #4
  </div>
  <div class="item">
    #5
  </div>
</div>

https://codepen.io/anon/pen/oyjmaV

有解决问题的想法吗?

妮基·马瑟

发生这种情况的原因是因为flex容器的初始设置被设置为align-content: stretch,然后填充了剩余的全部空间。

您可以添加align-content: flex-start以覆盖此默认行为。

更新的Codepen:https ://codepen.io/anon/pen/wXKOQy

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

给包装好的Flexbox项目垂直间距

警告:file_get_contents():服务器配置中禁用了https://包装器

临时启用和禁用cmocka中的功能包装的正确方法?

更改包装的弯曲方向

填充包装在TextInputLayout中的EditText字段时如何禁用浮动标签动画

空格:预包装会引起额外的间距

如何在Visual Studio 2017中的一种类型后禁用*的自动间距设置?

在图(R)中围绕一个圆圈包装/弯曲文本

如何禁用强制软包装?

边界弯曲的css-弯曲端的圆

显示弯曲导致混合间距问题

弯曲包装并在行之间均匀分布

如何使用百分比宽度列1px间距修复显示弯曲?

DreamFactory如何在Docker容器中禁用包装器``资源''

带多列的乳胶表文本包装-保持间距的方法?

IDEA和如何禁用Gradle包装器生成?

为什么NavigationLink按钮在自定义UIViewControllerRepresentable包装器中显示为“禁用”

如何禁用子图乳胶包装中的缩放比例?

在Svelte中禁用包装链接

成对弯曲包装元件

有单个链接ahref链接如何在移动模式下控制此包装的链接之间的间距?

Bootstrap cols(flex-nowrap)占用更多空间,然后在子元素溢出时隐藏:隐藏和单词间距:不包装

HTML电子邮件中的包装器表之间的水平间距-尝试了各种修复

显示屏包装盒:可弯曲

在Braintree v3.2.0的卡号字段中禁用号码间距

CSS:在可弯曲包装的按钮内居中放置文本

CakePHP 3.4 在输入字段上禁用包装 DIV

警告:include(): http:// 包装器在服务器配置中被禁用

如何禁用 MPI 的 C++ 包装器?