时间戳

首页 > 解决方案 > 即使我有一些额外的空间，Flex-shrink 也不起作用

html - 即使我有一些额外的空间，Flex-shrink 也不起作用

问题描述

我试图让我的图像滑块响应，但它不工作。我可以尝试一下，media query但是代码很多，而且我认为它效率不高。它显示了一些空白，但仍然无法正常工作。我还看了另一个关于堆栈溢出的问题，它说我应该有空格。就我而言，“flex-shrink”似乎不起作用。

.recipes {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
}

.recipes h1 {
  text-align: center;
  font-family: var(--section-heading);
  font-size: 2rem;
}

.btns-image-slider label[for] {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  border: 2px solid black;
  display: inline-block;
  transition: 200ms background-color;
  cursor: pointer;
}

.btns-image-slider label[for]:hover {
  background-color: dodgerblue;
  border: none;
}

.container {
  margin: auto;
  max-width: 800px;
  max-height: 600px;
  overflow: hidden;
  flex-shrink: 2;
}

.container input {
  display: none;
}

#r1:checked~.images {
  transform: translateX(0);
}

#r2:checked~.images {
  transform: translateX(-800px);
}

#r3:checked~.images {
  transform: translateX(-1600px);
}

#r4:checked~.images {
  transform: translateX(-2400px);
}

#r5:checked~.images {
  transform: translateX(-3200px);
}

.images {
  margin: 0;
  padding: 0;
  display: flex;
  width: 2400px;
  height: 600px;
  transition-property: transform;
  transition-duration: 1000ms;
}

.center {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.images a {
  position: relative;
}

.images a:hover::after {
  content: url(../images/overlay-6.png);
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translate(-70%, -49.55%);
  animation-name: appear;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.services>h1 {
  font-family: var(--section-heading);
  text-align: center;
}
<section class="recipes">
  <h1>Popular recipes</h1>
  <div class="container">

    <input type="radio" name="r" checked id="r1">
    <input type="radio" name="r" id="r2">
    <input type="radio" name="r" id="r3">
    <input type="radio" name="r" id="r4">
    <input type="radio" name="r" id="r5">


    <div class="images">

      <a href="images/1.png"><img src="images/slide1.jpg"></a>
      <a href="#"><img src="images/slide2.jpg"></a>
      <a href="#"><img src="images/slide3.jpg"></a>
      <a href="#"><img src="images/slide4.jpg"></a>
      <a href="#"><img src="images/slide5.jpg"></a>

    </div>


  </div>

  <div class="center">
    <div class="btns-image-slider">
      <label for="r1"></label>
      <label for="r2"></label>
      <label for="r3"></label>
      <label for="r4"></label>
      <label for="r5"></label>
    </div>

</section>

标签： htmlcssflexbox

解决方案

您需要调整元素的大小，width或者在需要时min-width将其放在一边flex-shrink 。高度大部分时间都可以去掉，让浏览器管理它。

<a>保存图像并且是.images具有 hudge 宽度的直接子级，但仅显示了三分之一，因此<a>需要33.33%具有宽度（或 2400px/3）。

如果您的图像具有不同的比例，object-fit也可以提供帮助（如果所有图像都具有相同的大小并且没有缩小/扩展，请不要介意

来自您的代码的可能示例，其中包含不同比例的图像以显示bject-fit使用

.recipes{
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
}

.recipes h1 {
  text-align: center;
  font-family: var(--section-heading);
  font-size: 2rem;
}

.btns-image-slider label[for]{
  border-radius: 50%;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  border: 2px solid black;
  display: inline-block;
  transition: 200ms background-color;
  cursor: pointer;
}

.btns-image-slider label[for]:hover{
  background-color: dodgerblue;
  border: none;
}


.container{
  margin: auto;
  max-width: 800px;
  max-height: 300px;
  overflow: hidden;
  flex-shrink: 2;
}



.container input{
  display: none;
}

#r1:checked ~ .images{
  transform: translateX(0);
}

#r2:checked ~ .images{
  transform: translateX(-800px);
}

#r3:checked ~ .images{
  transform: translateX(-1600px);
}

#r4:checked ~ .images{
  transform: translateX(-2400px);
}

#r5:checked ~ .images{
  transform: translateX(-3200px);
}

.images{
  margin: 0;
  padding: 0;
  display: flex;
  width: 2400px;
  transition-property: transform;
  transition-duration: 1000ms; 
}

.center{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}


.images a{
  position: relative;
  min-width:33.33%;
}

.images a img {width:100%;height:100%;object-fit:cover}
.images a:hover::after{
  content: url(../images/overlay-6.png);
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translate(-70%,-49.55%);
  animation-name: appear;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}



@keyframes appear {
  from{
    opacity: 0;
  }

  to{
    opacity: 1;
  }
}


.services > h1{
  font-family: var(--section-heading);
  text-align: center;
}
<section class="recipes">
  <h1>Popular recipes</h1>
  <div class="container">

    <input type="radio" name="r" checked id="r1">
    <input type="radio" name="r" id="r2">
    <input type="radio" name="r" id="r3">
    <input type="radio" name="r" id="r4">
    <input type="radio" name="r" id="r5">


    <div class="images">

      <a href="#"><img src="https://dummyimage.com/800x200/456&text=slide1.jpg"></a>
      <a href="#"><img src="https://dummyimage.com/800x250/ac8&text=images/slide2.jpg"></a>
      <a href="#"><img src="https://dummyimage.com/800x230/f90&text=images/slide3.jpg"></a>
      <a href="#"><img src="https://dummyimage.com/800x180/cc5&text=images/slide4.jpg"></a>
      <a href="#"><img src="https://dummyimage.com/700x200/bee&text=images/slide5.jpg"></a>

    </div>


  </div>

  <div class="center">
    <div class="btns-image-slider">
      <label for="r1"></label>
      <label for="r2"></label>
      <label for="r3"></label>
      <label for="r4"></label>
      <label for="r5"></label>
    </div>

</section>

您还可以将 2400px 转换为 300% 并在其他位置使用百分比 (width, translate() ... ，因此您也可以将百分比用于容器而不是 800px 最终以像素为单位的最大宽度和最小宽度来避免它缩小或增长太多。

推荐阅读