Детский изгиб занимает 100% высоты, не работает - PullRequest
Новая
       4

Детский изгиб занимает 100% высоты, не работает

1 голос
/ 06 мая 2020

Я пытаюсь сделать так, чтобы дочерние элементы гибкого контейнера занимали одинаковую высоту (чтобы отформатировать все на более крупный). Я пробовал с flex: 1, с height: 100%, он не работает. Я не понимаю, почему. Примечание: это происходит только тогда, когда я изменяю размер до маленького экрана, а не в полноэкранный режим (но когда вы так сильно меняете размер, гибкое направление меняется от строки к столбцу, поэтому эта проблема возникает только тогда, когда вы изменяете его размер (примечание: заголовок был без обтекания, и это должно быть так).

У меня есть весь код в этом коде, чтобы вам было легче мне помочь. Большое спасибо!

Codepen: https://codepen.io/mongolhippie/pen/yLYvXeB?editors=1100

HTML: 

<div class="extra-margin">


<p class="title-big" style="margin-top: 20px;">Made with ❤️ by</p>
  <div class="flex-center-team mod-home-container center">
    <div class="flex-center-col-team mod-home aos-init aos-animate" data-aos="zoom-out-up">
      <div class="">
      <img src="https://image.freepik.com/vector-gratis/perfil-avatar-hombre-icono-redondo_24640-14046.jpg" class="image-rounded-team img-zoom" alt=""> 
        <p class="title-team">Qui ipsorum </p>
        <p class="area-team"> appellantur.
          asfdgfhfjgkhf</p>
        <p class="web-text text-person">Quis aute iure reprehenderit in voluptate velit esse. Quam temere in vitiis, legem sancimus haerentia. Me non paenitet nullum festiviorem excogitasse ad hoc..</p> 
        </div>
       <div class="social">
                  <a href="" target="_blank"> <img src="https://scotiabankgillerprize.ca/wp-content/uploads/2018/05/LinkedIn-Icon-300x300.png" alt=""> </a>
                  <a href="" target="_blank">   <img src="https://cdn4.vectorstock.com/i/1000x1000/40/18/flat-mail-icon-white-envelope-red-back-vector-24324018.jpg" alt="">  </a>
                  <a href="" target="_blank">   <img src="https://image.shutterstock.com/image-vector/internet-go-website-symbol-vector-260nw-1599063517.jpg" alt="">  </a>
                </div> 
        </div>
        <div class="flex-center-col-team mod-home aos-init aos-animate" data-aos="zoom-out-up">
          <img src="https://image.freepik.com/vector-gratis/perfil-avatar-hombre-icono-redondo_24640-14046.jpg" class="image-rounded-team img-zoom" alt=""> 
            <p class="title-team">aute iure </p>
            <p class="area-team">legem sancimus<br></p>
            <p class="web-text text-person">Quis aute iure reprehenderit in voluptate velit esse. Quam temere in vitiis, legem sancimus haerentia. Me non paenitet nullum festiviorem excogitasse ad hoc..</p> 
            <div class="social">
                  <a href="" target="_blank"> <img src="https://scotiabankgillerprize.ca/wp-content/uploads/2018/05/LinkedIn-Icon-300x300.png" alt=""> </a>
                  <a href="" target="_blank">   <img src="https://cdn4.vectorstock.com/i/1000x1000/40/18/flat-mail-icon-white-envelope-red-back-vector-24324018.jpg" alt="">  </a>
                  <a href="" target="_blank">   <img src="https://image.shutterstock.com/image-vector/internet-go-website-symbol-vector-260nw-1599063517.jpg" alt="">  </a>
                </div> 
          </div>

            <div class="flex-center-col-team mod-home aos-init aos-animate" data-aos="zoom-out-up">
              <img src="https://image.freepik.com/vector-gratis/perfil-avatar-hombre-icono-redondo_24640-14046.jpg" class="image-rounded-team img-zoom" alt=""> 
                <p class="title-team">Cum sociis.</p>
                <p class="area-team">sancimus haerentia<br></p>

                <p class="web-text text-person">Quis aute iure reprehenderit in voluptate velit esse. Quam temere in vitiis, legem sancimus haerentia. Me non paenitet nullum festiviorem excogitasse ad hoc..</p> 
                <div class="social">
                  <a href="" target="_blank"> <img src="https://scotiabankgillerprize.ca/wp-content/uploads/2018/05/LinkedIn-Icon-300x300.png" alt=""> </a>
                  <a href="" target="_blank">   <img src="https://cdn4.vectorstock.com/i/1000x1000/40/18/flat-mail-icon-white-envelope-red-back-vector-24324018.jpg" alt="">  </a>
                  <a href="" target="_blank">   <img src="https://image.shutterstock.com/image-vector/internet-go-website-symbol-vector-260nw-1599063517.jpg" alt="">  </a>
                </div> 
              </div>
  </div>

</a></div>

CSS: 

 .flex-center-team{
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: flex-start;
  align-items: stretch; 
}
.mod-home-container{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 3rem;
}
.center {
    text-align: center;
}.flex-center-col-team{
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  flex-direction: column;
  flex-grow : 1;

}

.flex-center-team{
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: flex-start;

}

...