时间戳

首页 > 解决方案 > 如何让 flex 容器不缩小内容更多的项目？

html - 如何让 flex 容器不缩小内容更多的项目？

问题描述

我有一个 flex 容器，它在一行中设置了项目，当它到达视口宽度的末尾时，我希望它溢出-x：滚动。相反，它会缩小所有项目，并添加更多项目以适应屏幕。

我怎样才能让它溢出并仍然在 x 方向滚动，同时防止项目收缩？

.footer-container {
  width: 100%;
  height: 12rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  overflow-x: scroll;
  padding: 1rem;
  animation: slide-up;
  animation-duration: 1s;
  visibility: hidden;
  opacity: 0;
}

.footer-items {
  background-color: rgb(214, 218, 219);
  width: 17rem;
  list-style-type: none;
  border-radius: 4px;
  margin-right: 1.5rem;
  padding: 1rem;
  font-size: 1.5rem;
  position: relative;
  animation: fade-in;
  animation-duration: 2s;
  display: flex;
}

.side-col {
  display: flex;
  flex-direction: column;
}

.cart-image {
  min-width: 10rem;
  height: 6rem;
}

.cart-price {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-weight: 600;
}
<footer class="footer">
  <ul class="footer-container">
    <li class="footer-items">
      <div class="side-col">
        <p>Bike<p/>
        <img class="cart-image" src="bike.png"/>
      </div> 
    <span class="cart-price">$2345</span> 
    </li> 
  </ul>
</footer>

这是没有溢出项目的外观https://i.stack.imgur.com/ZUrZS.png

和溢出的项目 https://i.stack.imgur.com/18obq.png

标签： htmlcssflexbox

解决方案

如果我没听错，只需添加flex-shrink: 0;到您不想缩小的项目即可。如果需要其他东西，请告诉我。

你可以看看flex-shrink这里。

.footer-container {
  width: 100%;
  height: 12rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  overflow-x: scroll;
  padding: 1rem;
  animation: slide-up;
  animation-duration: 1s;
}

.footer-items {
  background-color: rgb(214, 218, 219);
  width: 17rem;
  flex-shrink: 0; /*add this property only*/
  list-style-type: none;
  border-radius: 4px;
  margin-right: 1.5rem;
  padding: 1rem;
  font-size: 1.5rem;
  position: relative;
  animation: fade-in;
  animation-duration: 2s;
  display: flex;
}

.side-col {
  display: flex;
  flex-direction: column;
}

.cart-image {
  min-width: 10rem;
  height: 6rem;
}

.cart-price {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-weight: 600;
}
<footer class="footer">
  <ul class="footer-container">
    <li class="footer-items">
      <div class="side-col">
        <p>Bike<p/>
        <img class="cart-image" src="bike.png"/>
      </div> 
    <span class="cart-price">$2345</span> 
    </li> 
    <li class="footer-items">
      <div class="side-col">
        <p>Bike<p/>
        <img class="cart-image" src="bike.png"/>
      </div> 
    <span class="cart-price">$2345</span> 
    </li> 
    <li class="footer-items">
      <div class="side-col">
        <p>Bike<p/>
        <img class="cart-image" src="bike.png"/>
      </div> 
    <span class="cart-price">$2345</span> 
    </li> 
    <li class="footer-items">
      <div class="side-col">
        <p>Bike<p/>
        <img class="cart-image" src="bike.png"/>
      </div> 
    <span class="cart-price">$2345</span> 
    </li> 
    <li class="footer-items">
      <div class="side-col">
        <p>Bike<p/>
        <img class="cart-image" src="bike.png"/>
      </div> 
    <span class="cart-price">$2345</span> 
    </li> 
  </ul>
</footer>

推荐阅读