如何使用嵌套的flexbox在<li>中将2个div与动态内容垂直对齐

Question

所有div都有动态内容，高度不同。 我们使用flexboxes使每个li的高度相同。

我们现在需要定位div class =＆＃34; 2＆＃34;这样每个div的顶部都是相互对齐的。

我们已经尝试过flexboxes来定位div class =＆＃34; 2＆＃34;正确但但目前他们都在每个李的底部。

＆＃13;

＆＃13;

    ul{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:stretch;
    }
    ul li{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:flex-start;
    }
    ul li div.1{
        align-self:flex-start;
    }
    ul li div.2{
        align-self:flex-end;
    }

＆＃13;

<div>
<ul>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

提前感谢您的帮助！

Answer 1

您可以使用javascript执行此操作。如果您使用class="one"向三个div中的任何一个添加内容，那么它们的高度将始终相同

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".one").length;i++){
    if($(".one").eq(i)){
      var currentHeight = $(".one").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".one").height(maxHeight);
});

ul{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:stretch;
}
ul li{
  flex-wrap:wrap;
  list-style-type:none;
  align-items:flex-start;
  margin:10px;
}
ul li div.one{
  background-color:green;
  padding:10px;
  min-height:30px;
}
ul li div.two{
  background-color:red;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
        <li>
            <div class="one">Some content</div>
            <div class="two">Some content</div>
        </li>
        <li>
            <div class="one">Some content<br>Some content<br>Some content</div>
            <div class="two">Some content</div>
        </li>
        <li>
            <div class="one">Some content</div>
            <div class="two">Some content</div>
        </li>
    </ul>
</div>

Answer 2

您可以将min-height添加到包含照片的div.1;

＆＃13;

＆＃13;

    ul{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:stretch;
    }
    ul li{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:flex-start;
    }
    ul li div.1{
        align-self:flex-start;
        min-height: 400px;
    }
    ul li div.2{
        align-self:flex-end;
    }

＆＃13;

<div>
<ul>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;