水平滚动容器中的中心响应元素 [英] Center responsive elements in horizontal scroll container

问题描述

我创建了一个容器(红色边框，其中心线表示中心)，如果发生溢出，该容器将水平滚动.

I have created a container (red border with line denoting the center) that scrolls horizontally if there is overflow.

此容器的第一个子项(紫色块)始终是一个按钮.

The first child (purple block) of this container is always a button.

当您单击此按钮时，它将向容器中添加其他子项.

When you click this button, it adds additional children to the container.

我想做的是找出一种使用纯CSS的方法，以便在加载应用程序时第一个孩子始终居中，而容器中的最后一个孩子元素(如果有多个孩子)可以也可以滚动到容器的正中央.

What I am trying to do is figure out a way with pure CSS, so that the first child is always centered when the app is loaded, and the last child element in the container, if there is more than one child, can also be scrolled to the very center of the container.

我很难弄清楚这一点，因为除了对子元素响应了width(即25vw)之外，我还应用了min-width(即100px).

I am having difficulties figuring this out because I have applied a min-width (i.e. 100px) in addition to a responsive width (i.e. 25vw) to the child elements.

我最初计划实现此目标的方法是将padding-left应用于父容器，然后将::after伪元素应用于:not(.first-child).children:last-child，但是后来我意识到，如果我愿意的话，该方法是不够的完全响应.但是，我知道我可以手动计算将触发哪个宽度min-width，然后使用@media查询，但是我希望有更好的方法.

The way I was initially planning on achieving this was by applying a padding-left to the parent container, and then an ::after pseudo element to :not(.first-child).children:last-child, but then I realized the approach is not sufficient if I want it to be completely responsive. However, I know I can manually calculate at which width min-width will be triggered and then use a @media query, but I am hoping there is a better way.

#container {
  width: 100%;
  height: 100%;
  padding-left: ; /* Half the window width minus half the width of the child. */
  overflow-x: scroll;
  display: flex;
  align-items: center;
  background: skyblue;
  box-sizing: border-box;
  border: solid red 2px;
}

#container::-webkit-scrollbar {
  display: none;
}

.children {
  width: 25vw;
  min-width: 100px;
  height: 50%;
  min-height: 200px;
  position: relative;
  margin-right: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: purple;
}

:not(.first-child).children:last-child::after {
  content: '';
  width: ; /* Half the window width minus half the width of the child. */
  height: 100%;
  position: relative; /* relative or absolute      */
  left: ;             /* and offset appropriately. */
  transform: ;        /*                           */
}

有人对此有任何想法吗?

Does anybody have any ideas of how to do this?

推荐答案

即使我将vh用作子级的width，我仍然能够使用calc创建严格响应的解决方案. CSS是救星.

I was able to create a strictly responsive solution using calc, even though I am using vh as the width of the children. CSS is a savior.

#container {
--offset: calc(50vw - ((100vh / 100) * 20);
  padding-left: var(--offset);
  background: skyblue;
}

.children {
  min-width: 40vh; /* vh is used for width to account for the height of window. */
  min-height: 60vh;
  position: relative;
  background: purple;
}

:not(.first-child).children:last-child::after {
  content: '';
  width: var(--offset);
  height: 1px;
  position: absolute;
  left: 100%;
}

这篇关于水平滚动容器中的中心响应元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！