Css Flex & spacearound 与内容相交

发布于12月21日

我有一个容器，它水平滚动，里面有复选框.选中复选框后，将显示文本.我想保持项目的功能从两边都在增长.问题是，当一些复选框被选中时，第一个复选框是隐藏的，您无法滚动到它:

.container {
  white-space: nowrap;
  text-align: center;
  display: flex;
  overflow-x: scroll;
  justify-content: space-around;
  align-items: stretch;
}

.item {
  transition: 0.5s ease;
  height: 40px;
  justify-content: center;
  text-align: center;
}

label {
  font-size: 0;
  transition: 0.5s ease;
}

input:checked~label {
  font-size: 20px;
}

<div class="container">
  <div class="item">
    <input type="checkbox" id="1"></input>
    <label for="1">1111111111111111111111111</label>
  </div>
  <div class="item">
    <input type="checkbox" id="1"></input>
    <label for="2">22222222222222222222222222222222222</label>
  </div>
  <div class="item">
    <input type="checkbox" id="1"></input>
    <label for="3">333333333333333333333333333333</label>
  </div>
</div>

有没有一种方法可以让过渡保持从中心开始，同时仍然让用户一直滚动到开始和结束？

谢谢!

.container { white-space: nowrap; text-align: center; overflow-x: scroll; display: flex; align-items: stretch; justify-content: flex-start; /* ••• this one ••• */ } .item { transition: 0.5s ease; height: 40px; text-align: center; display: flex; justify-content: center; flex-grow: 1; /* ••• and this one ••• */ } label { font-size: 0; transition: 0.5s ease; } input:checked~label { font-size: 20px; }

<div class="container"> <div class="item"> <input type="checkbox" id="1"></input> <label for="1">1111111111111111111111111</label> </div> <div class="item"> <input type="checkbox" id="2"></input> <label for="2">22222222222222222222222222222222222</label> </div> <div class="item"> <input type="checkbox" id="3"></input> <label for="3">333333333333333333333333333333</label> </div> </div>

Css Flex & spacearound 与内容相交

推荐答案

Css相关问答推荐

通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出

如何仅以WooCommerce单一产品页面为目标？

将CSS更改为Mat-Form-Field，其中包含搜索框

CSS媒体查询不显示所需的输出

滚动弹性盒

Angular Material - 将 matsnackbar 置于所有对话框之上

使用 place-content： center 的全宽 CSS 网格项目

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

如何禁用 Angular Material Pagination 按钮的波纹效果？

网格区域即使使用 fr 也不会减小其宽度

对 CSS 容器查询使用多个条件

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

更改组件中 css 的值

如何通过单击
激活 HTML 链接？

滚动到该 div 后如何使 div 固定？

CSS：在图像周围创建白光

如果容器 div 较小，如何将子 div 扩展到 100% 屏幕宽度？

仅当将 Div 悬停在上方时才显示滚动条？

使用 HTML data-attribute 设置 CSS background-image url

从 textarea 中删除所有样式(边框、发光)