Flexbox не центрируется на justify-content, элементы div занимают слишком много места, я думаю, но почему? - PullRequest
0 голосов
/ 26 февраля 2020

Я пытался расположить эти объекты по центру, и когда я использовал тег <a href>, я мог видеть, что я мог щелкнуть далеко от картинки, но ссылка все равно активировалась. Я предполагаю, что это означает, что дочерние контейнеры занимают по 50% ширины каждый, несмотря на то, что заполнена только крошечная часть контейнера. Почему есть пустое пространство, которое мешает мне выровнять мои объекты?

RELEVANT HTML:

<div class="container">
  <div class="previous">
      <img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
      <p>Previous Project </p>
  </div>
  <div class="next"> 
    <img class="containerimg"  src="https://i.imgur.com/s11MTLc.png"> 
      <p> Next Project</p>
  </div>
</div>

RELEVANT CSS:

.container {
  display: flex; 
  justify-content: center;
}
.containerimg {
  width: 30%;
  height: auto;
}
.next {
  display: flex;
  flex-direction: column;
}
.previous{
  display: flex;
  flex-direction: column;
}

CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100

Ответы [ 4 ]

1 голос
/ 26 февраля 2020

Ваш вопрос немного расплывчат, но я предполагаю, что вы хотите центрировать .previous и .next деления.

Поскольку оба они уже используют display: flex, вам просто нужно добавить align-items: center к классам. previous и .next, чтобы сделать их центрированными по горизонтали . Если вы также хотите, чтобы содержимое (изображение и текст) располагались по центру по вертикали , вам необходимо добавить justify-content: center. Вот результат:

.next {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.previous {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Если вы пытаетесь заставить изображения в этих элементах div занимать больше места, вам нужно увеличить правило width ниже. Поскольку вы отметили, что вам нужно 100%, вам нужно изменить это на:

.containerimg {
  width: 100%;
  height: auto;
}
0 голосов
/ 26 февраля 2020

.container {
   display: flex; 
   justify-content: center;
   width:100vw;
}
.previous, .next{
   width:30%;
   display:flex;
   flex-direction:column;
   align-items:center;  
}

img{
   width:100%;
}
<div class="container">
  <div class="previous">
      <img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
      <p>caption 1</p>
      
  </div>
  <div class="next"> 
    <img class="containerimg"  src="https://i.imgur.com/s11MTLc.png"> 
    <p>caption 2</p>
     
  </div>
</div>
0 голосов
/ 26 февраля 2020

Я обнаружил проблему, мне нужно, чтобы мои изображения содержали 100% пространства, и мне нужно было назначить элемент ширины дочерним контейнерам.

0 голосов
/ 26 февраля 2020

Вы должны быть в состоянии решить эту проблему, добавив «align-items: center» в ваши классы .next и .previous. Причина этого заключается в том, что при переключении flex-direction на столбец, который также переключает методы align-items и justify-content, по сути, обращая их вспять.

    .next {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .previous{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
...