css Flex和周围空白与内容交叉

atmip9wb 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(120)

我有一个水平滚动的容器，里面有复选框。当一个复选框被选中时，一个文本出现。我想保持项目的功能从两边增长。问题是，当一些复选框被选中时，第一个复选框被隐藏，你不能滚动到它：

.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>

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

css

来源：https://stackoverflow.com/questions/74875532/flex-space-around-are-intersecting-the-content

3条答案

按热度按时间

djmepvbi1#

仅通过2个操作完成：
1.从.container中删除justify-content: space-around;
1.将margin:auto;添加到您的.item。

（请注意，className已替换为class，因为CSS无法识别类名）*

演示

.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;
  margin:auto;
}

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" />
    <label for="1">1111111111111111111111111</label>
  </div>
  <div class="item">
    <input type="checkbox" id="1" />
    <label for="2">22222222222222222222222222222222222</label>
  </div>
  <div class="item">
    <input type="checkbox" id="1" />
    <label for="3">333333333333333333333333333333</label>
  </div>
</div>

赞(0）回复(0）举报 2022-12-24

zrfyljdw2#

噢！
这是一个很好的..
以前我花了好几个月才解开。
这很简单，也很棘手，兄弟。
只要做你的justify-content: flex-start;，然后为你的孩子添加这个flex-grow: 1;，它是.item，它会像space-around效果一样接缝。
这是密码

.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>

赞(0）回复(0）举报 2022-12-24

6qfn3psc3#

理由内容：周围空间并使用justify-content：间隔而不是。

赞(0）回复(0）举报 2022-12-24