时间戳

首页 > 解决方案 > 创建居中的可滚动容器

html - 创建居中的可滚动容器

问题描述

我有一个具有灵活宽度（100%）的容器和动态添加的块元素。

<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
</div>


.main {
  display: flex;
  justify-content: center;
  overflow: scroll;
  width: 100%;
}

.block-element {
    display: flex;
    align-items: center;
    border: 1px solid blue;
    padding: 5px;
    margin-left: 20px;
}

问题是保持容器内的元素居中，并在其块元素的大小变得大于容器的大小时使容器可滚动。

主要问题是我只能使用 flexbox 保持元素居中，但在这种情况下，左侧的可滚动内容会被剪切（众所周知的 flex 布局问题）。

我曾经做过的一个问题仍然存在。工作示例在这里：https ://jsfiddle.net/kypLg2cm/3/

示例 2 显示了如何在左侧截断内容。

标签： htmlcss

解决方案

为避免 的副作用justify-content:center，您可以margin对孩子使用：

例子 ：

.main {
  display: flex;
  overflow: scroll;
  width: 100%;
}

.block-element {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  padding: 5px;
  margin-left: 20px;
}

.block-element:first-of-type {
  margin-left: auto;
}

.block-element:last-of-type {
  margin-right: auto;
}
<!-- EXAMPLE 1 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

<!-- EXAMPLE 2 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element3</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element4</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element5</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element6</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element7</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element8</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element9</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element10</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

<!-- EXAMPLE 3 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element3</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

https://jsfiddle.net/za3ks0xo/

推荐阅读