响应式 Flexbox Div

Question

我希望所有包含文本和背景颜色的内部 div 与外部 div (col) 高度相同。

有没有办法不用 jQuery？

.row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
}

.col {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 1em;
    border: solid;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.col img{
    width:100%;
    height:auto;
}

   <div class="row">
    <div class="col"> 
        <div><img src="" alt="" /></div>
        <div style="background-color:#ff0000;">  
           This is a short text.
        </div>
    </div>
    
    <div class="col">
        <div><img src="" alt="" /></div> 
        <div style="background-color:#ff3654;" > 
            This is a text about how much I hate fucking around ith CSS when I'm not a pro. I wasted so much time on this issue I don't even mind writing this text. Sure you could use lorem ipsum but why bother, time you enjoy wasting is not wasted.
        </div> 
    </div>

        <div class="col"> 
        <div><img src="" alt="" /></div>
        <div style="background-color:#ff0000;">  
          This is CSS, just wanted to let you know that you suck.
        </div>
    </div>
       
</div>

https://jsfiddle.net/hcmnztof/1/

Answer 1

您可以再次为 .col 使用灵活的盒子：

.col {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* default value */
}
.col > :last-child {
  flex-grow: 1;
}

.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}
.col {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 1em;
  border: solid;
  justify-content: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.col > :last-child {
  flex-grow: 1;
}
.col img {
  width: 100%;
  height: auto;
}

<div class="row">
  <div class="col">
    <div>
      Image1
    </div>
    <div style="background-color:#ff0000;">
      Lorem ipsum.
    </div>
  </div>
  <div class="col">
    <div>
      Image2 <br/> Image2
    </div>
    <div style="background-color:#ff3654;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.
    </div>
  </div>
  <div class="col">
    <div>
      Image3 <br/> Image3 <br/> Image3
    </div>
    <div style="background-color:#ff0000;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
    </div>
  </div>

</div>

Answer 2

感谢您的意见。我使用这个页面来获得一些关于 flexbox 的基本知识。 CSS-Tricks A guide to flexbox 然后我从头开始，想出了我想要的：jsfiddle

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:row;
    padding: 10% 0 10% 0;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row img{
    width:100%;
    height:auto;
}

.col {
    -webkit-box-flex:1;
    -moz-box-flex:1;
    flex:1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:column;
    align-items:stretch;
    margin-right:3%;
     
}
.subcol{
   -webkit-box-flex:1;
   -moz-box-flex:1;
   flex:1 auto;
   margin-top:-1%;

   -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}


.subcol h2{
    text-align:center;
    color:#ffffff;
    padding: 10% 10% 0 10%;
    font-weight:200;
    font-size:2.2em;
    line-height:1;
    text-transform:uppercase;
    margin-bottom:13%;
}

.subcol p{
    text-align:center;
    padding: 0 10% 10% 10%;
    margin-top:-1.2%;
    color:#ffffff;
    font-size:0.9em;
}

   <div class="row">
    <div class="col"> 
        <img src="http://lorempixel.com/50/50" alt="" />
        <div  class="subcol" style="background-color:#ff0000;">  
            <h2>Test headline</h2>
            <p>This is a short text.</p>
        </div>
    </div>
    
    <div class="col">
        <img src="http://lorempixel.com/120/150" alt="" />
        <div  class="subcol" style="background-color:#ff3654;" > 
            <h2>Test headline</h2>
            <p>This is a text about how much I hate fucking around ith CSS when I'm not a pro. I wasted so much time on this issue I don't even mind writing this text. Sure you could use lorem ipsum but why bother, time you enjoy wasting is not wasted.</p>
        </div> 
    </div>

        <div class="col"> 
            <img src="http://lorempixel.com/100/150" alt="" />
        <div class="subcol" style="background-color:#ff0000;">  
            <h2>Test headline</h2>
            <p>This is CSS, just wanted to let you know that you suck.</p>
        </div>
    </div>
       
</div>

响应式 Flexbox Div

Responsive Flexbox Divs

html

css

responsive-design

flexbox