使子元素拉伸父元素宽度的三分之一（在轮播中）答案

【问题标题】：Make child elements stretch one third of the parent's width (in a carousel)使子元素拉伸父元素宽度的三分之一（在轮播中）
【发布时间】：2018-05-28 20:42:30
【问题描述】：

我正在制作一个（某种）旋转木马，其中的项目水平对齐。

每个子元素（大约有十几个）应该拉伸父元素宽度的三分之一。任何时候都应显示三个项目。

我使用过 Bootstrap 4 和一些自定义 CSS。不需要 JavaScript，轮播依靠手动滚动来显示其项目。

如您所见，为列表项设置width: 33.333% 不适用于非常小或非常大的分辨率。我还希望这些项目以超小分辨率拉伸全宽。

什么是可行的、特定于 flex-box 的替代方案？

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.page-wrapper {
  min-height: 100%;
}

.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}

#carousel {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  justify-content: left;
  align-items: center;
}

#carousel li {
  padding: 0 0 70px 0;
  width: 33.333%;
}

#carousel li a {
  text-decoration: none;
  color: #fff;
}

#carousel li img {
  display: block;
  width: 100%;
}

#carousel li .caption {
  padding-top: 20px;
}

#carousel li h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}

#carousel li p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="page-wrapper">
  <div class="hero d-flex">
    <ul id="carousel" class="d-flex">
      <li class="col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/people" alt="">
          <div class="caption">
            <h2>Lorem ipsum dolor</h2>
            <p>A true story</p>
          </div>
        </a>
      </li>
      <li class="col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
          <div class="caption">
            <h2>Lorem</h2>
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
        </a>
      </li>
      <li class="col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
          <div class="caption">
            <h2>My neighborhood</h2>
            <p>Lorm ipsum dolor</p>
          </div>
        </a>
      </li>
      <li class="col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
          <div class="caption">
            <h2>Into the wild</h2>
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

【问题讨论】：

标签： html twitter-bootstrap css flexbox

【解决方案1】：

添加 col-4 类而不是 col-md-4。对于屏幕的所有分辨率，这将使 div 的宽度保持在 33.3%

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}
#carousel {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
}
#carousel li a {
  text-decoration: none;
  color: #fff;
}
#carousel li img {
  display: block;
  width: 100%;
}
#carousel li .caption {
  padding-top: 20px;
}
#carousel li h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel li p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <div class="hero d-flex">
    <ul id="carousel" class="d-flex">
      <li class="col-4">
        <a href="#"><img src="https://placeimg.com/300/200/people" alt="">
        <div class="caption">
          <h2>Lorem ipsum dolor</h2>
          <p>A true story</p>
        </div>
        </a>
      </li>
      <li class="col-4">
        <a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
      </li>
      <li class="col-4">
        <a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
        <div class="caption">
          <h2>My neighborhood</h2>
          <p>Lorm ipsum dolor</p>
        </div>
        </a>
      </li>
      <li class="col-4">
        <a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
      </li>
    </ul>
  </div>
</div>

编辑评论中的问题（未在工作答案中更新）

试试这个 HTML 标记，它应该可以按您的预期工作。

<div class="hero container-fluid">
    <ul id="carousel" class="row">
      <li class="col-12 col-sm-6 col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/people" alt="">
        <div class="caption">
          <h2>Lorem ipsum dolor</h2>
          <p>A true story</p>
        </div>
        </a>
      </li>
      <li class="col-12 col-sm-6 col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
      </li>
      <li class="col-12 col-sm-6 col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
        <div class="caption">
          <h2>My neighborhood</h2>
          <p>Lorm ipsum dolor</p>
        </div>
        </a>
      </li>
      <li class="col-12 col-sm-6 col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
      </li>
    </ul>
  </div>

【讨论】：

<li class="col-xs-12 col-sm-6 col-md-4"> 无法按预期工作：列表项不会以极小的分辨率堆叠，也不会拉伸 100%。我该怎么做才能让它们伸展 100%？
因为您没有正确使用它，我的意思是您没有以引导方式使用它，您没有容器 div ！没有行 div 等。我会尝试修复它，但可能需要一些时间时间
在上面的答案中检查我的编辑

【解决方案2】：

弹性容器的初始设置是flex-shrink: 1。这意味着允许弹性项目收缩，这样它们就不会溢出容器。这就是您在布局中看到的内容。

您需要禁用flex-shrink。

而不是这个：

#carousel li {
    padding: 0 0 70px 0;
    width: 33.333%;
}

试试这个：

#carousel li {
    padding: 0 0 70px 0;
    width: 33.333%;
    flex-shrink: 0;
}

或者，甚至更好（为了提高效率），试试这个：

#carousel li {
    padding: 0 0 70px 0;
    flex: 0 0 33.333%; /* flex-grow, flex-shrink, flex-basis */
}

【讨论】：

【解决方案3】：

我已经能够完全获得想要的效果，感谢 o 社区的 2 位成员：

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}
#carousel {
  display: flex;
  list-style-type: none;
  overflow-x: scroll;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
  flex-shrink: 0;
}
#carousel a {
  text-decoration: none;
  color: #fff;
}
#carousel img {
  display: block;
  width: 100%;
}
#carousel .caption {
  padding: 20px 20px 0 20px;
}
#carousel h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}

<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <div class="hero d-flex">
      <ul id="carousel">
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/people" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>A true story</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/nature" alt="">
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum. Dolor sit amet.</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/arch" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum. Dolor sit amet</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
        </li>
      </ul>
  </div>
</div>

【讨论】：