гибкие элементы не растягиваются и не сжимаются при использовании flex-grow - PullRequest
Новая
       6

гибкие элементы не растягиваются и не сжимаются при использовании flex-grow

4 голосов
/ 07 января 2020

Я пытаюсь создать эффект, когда рядом расположены несколько вертикальных частей изображений, и когда вы наводите курсор на изображение, контейнер увеличивается, в то время как другие контейнеры уменьшаются, чтобы «раскрыть» полное изображение. Я хочу, чтобы единственное масштабирование изображения состояло в том, чтобы оно помещалось в окне браузера, когда оно полностью «раскрыто».

Вот фрагмент этого эффекта без изображений: 

* {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.row {
  flex-basis: 0;
  display: flex;
  flex-direction: row;
}

.column {
  flex-grow: 1;
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

.column:hover {
  flex-grow: 4.3;
}
<div class="row">
  <div class="column">
  </div>
  <div class="column">
  </div>
  <div class="column">
  </div>
</div>

Но теперь, если я оставлю все то же самое и просто добавлю теги img в div "column", любое сокращение или увеличение полностью прекращается. 

* {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.row {
  flex-basis: 0;
  display: flex;
  flex-direction: row;
}

.column {
  flex-grow: 1;
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

.column:hover {
  flex-grow: 4.3;
}
<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/2194261/pexels-photo-2194261.jpeg" />
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/1276553/pexels-photo-1276553.jpeg" />
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/774731/pexels-photo-774731.jpeg" />
  </div>
</div>

Я новичок в CSS, поэтому я уверен, что просто незнаком с какой-то очевидной концепцией о flexbox, но все мои поиски в Google были напрасны , Будем весьма благодарны за любые ответы, указания или рекомендации по изучению сайта.

1 Ответ

2 голосов
/ 07 января 2020

В этой головоломке отсутствуют две части.

  1. У вас установлена ​​ширина столбца flex-grow: 1. Это означает, что flex-basis по-прежнему имеет значение по умолчанию, auto (на основе содержимого). Таким образом, размер столбца зависит от размера изображения. Вы можете добавить flex-basis: 0, или просто использовать flex: 1.

    Полное объяснение: Сделать флекс-растянуть расширяемые элементы, основываясь на их оригинальном размере

Элементы Flex по умолчанию не могут сжиматься ниже размера их содержимого. Их начальная настройка min-width: auto. Вам необходимо переопределить это значение по умолчанию с помощью min-width: 0.

Полное объяснение: Почему элементы сгиба не сжимаются до размера содержимого? 

.row {
  display: flex;
  height: 100vh;
}

.column {
  min-width: 0; /* new */
  flex: 1;      /* adjustment */
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

.column:hover {
  flex-grow: 4.3;
}

body {
  margin: 0;
}
<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/2194261/pexels-photo-2194261.jpeg">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/1276553/pexels-photo-1276553.jpeg">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/774731/pexels-photo-774731.jpeg">
  </div>
</div>
...