Блог

Главная - Вопросы по программированию - Flex-shrink не работает, даже когда у меня есть дополнительное пространство

Flex-shrink не работает, даже когда у меня есть дополнительное пространство

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я пытаюсь сделать свой слайдер отзывчивым, но он не работает. Я могу попробовать это, 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>

Ответ №1:

Вам нужно изменить размер ваших элементов width или min-width отложить flex-shrink в сторону, если это также необходимо. высоту можно удалять большую часть времени, позволяя браузеру управлять ею.

<a> содержит изображение и является прямым дочерним элементом .images с шириной сгиба, но отображается только треть его, поэтому <a> оно должно иметь 33.33% ширину (или 2400 пикселей / 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/456amp;text=slide1.jpg"></a>
      <a href="#"><img src="https://dummyimage.com/800x250/ac8amp;text=images/slide2.jpg"></a>
      <a href="#"><img src="https://dummyimage.com/800x230/f90amp;text=images/slide3.jpg"></a>
      <a href="#"><img src="https://dummyimage.com/800x180/cc5amp;text=images/slide4.jpg"></a>
      <a href="#"><img src="https://dummyimage.com/700x200/beeamp;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>

вы также можете превратить 2400 пикселей в 300% и использовать процентное значение else где (width, translate() … , так что тогда вы можете использовать также процент для контейнера вместо 800 пикселей с в конечном итоге максимальной шириной и минимальной шириной в пикселях, чтобы избежать его слишком большого уменьшения или увеличения.

Комментарии:

1. Я попробовал ваш код, но он не реагирует, в этом весь смысл моего вопроса. Я хотел, чтобы он уменьшал свой размер при использовании flex-shrink: (

2. @Self-Coder Итак, прочитайте, что находится под фрагментом, все дело в изменении размера в соответствии с размером окна. вместо этого используйте% с фиксированными значениями пикселей. Я думаю, вы можете сделать это сами.