时间戳

首页 > 解决方案 > 如何在弹性行之间设置相等的高度

html - 如何在弹性行之间设置相等的高度

问题描述

我正在努力制作相同高度的 flex-direction: 列布局。问题是我正在尝试制作一个包含多行列的表。完成后，我发现行在 flexbox 列之间的高度不相等。

问题是如何使它们在列之间相等（例如，第一列中的第一行等于第二列中的第一行 - 高度）？

#container {
  display: flex;
  box-sizing:border-box
}

#container .col {
    display: flex;
  flex-direction: column;
  flex: 1;
}

#container .col .row {
    display: flex;
  background: #eee;
  border: 1px solid #ddd;
  flex: 1 1 100%;
}
<div id="container">
  <div class="col">
    <div class="row">asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdf</div>
    <div class="row">asdf</div>
    <div class="row">asdf</div>
    <div class="row">asdf</div>
  </div>
  <div class="col">
    <div class="row">asdf</div>
    <div class="row">asdf</div>
    <div class="row">asdf</div>
    <div class="row">asdf</div>
  </div>
</div>

标签： htmlcssflexbox

解决方案

    while using flex direction column there wont be any direct relation between 2 columns so height will be different Instead you can try the above answer or you can do something like this.
    
     
                   
        <div id="container">
  
  <div class="col">
    <div class="row">asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdfasdf asdf asdf asdf asdfasdf asdf</div>
    <div class="row">asdf</div>
    <div class="row">asdf</div>
    <div class="row">asdf</div>
  </div>
  
  <div class="col">
    <div class="row">asdf</div>
    <div class="row">asdf</div>
    <div class="row">asdf</div>
    <div class="row">asdf</div>
  </div>
</div>

     
        #container {
          display: flex;
          box-sizing:border-box;
          flex-wrap: wrap;
        }
        
        #container .col {
          display: flex;
          flex-direction: row;
          flex: 0 0 100%;
          
        }
        
        #container .col .row {
            display: flex;
          background: #eee;
          border: 1px solid #ddd;
          flex: 1 1 100%;
        }
    
    
        
       



I the code snippet do not work try opening [this][1]


  [1]: https://codepen.io/sam-123/pen/ExmGpWW

推荐阅读