代码之家 › 专栏 › 技术社区 › Sam JvdBerg

Flexbox证明内容不适用于flex flow列

flexbox css html

Sam JvdBerg · 技术社区 · 7 年前

我有一个简单的flexbox网格,有3列。

每一列都有不同数量的内容。链接应始终位于每列的底部。

我通过改变 flex-direction 和 justify-content 可以解决这个问题,但没有奏效。

/* Switches on flexbox */
.grid,
.content {
  display: flex;
}

/* Makes each column equal */
.col {
  flex: 1;
  margin: 12px;
  padding: 12px;
  background: #eaeaea;
}

.content {
  flex-direction: column; /* Changes flex direction from row to column */
  justify-content: space-between; /* I'm expecting this to position <h2>, <p> and <a> */
}

<div class="grid">
  
  <div class="col">
    
    <div class="content">
      <h2>Item One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
 
 <div class="col">
    
    <div class="content">
      <h2>Item Two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit. Etiam ac hendrerit mi. Aliquam sagittis metus urna. Nulla venenatis porttitor elit, at scelerisque lorem semper eu. Nullam fringilla, mauris a commodo dignissim, tortor neque maximus ante, et consectetur nunc nibh non erat. Donec scelerisque tortor sed mi ornare laoreet. Fusce eget tristique neque, quis condimentum augue. Nulla feugiat molestie nunc, a imperdiet eros. Vivamus at justo nec ligula imperdiet placerat in non erat. Nam vitae rutrum massa. Proin condimentum id metus quis aliquam. Aliquam a tortor velit. Pellentesque aliquet, est a tincidunt imperdiet, nunc nisi aliquam urna, ac auctor mauris massa et nibh.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
  
  <div class="col">
  
    <div class="content">
      <h2>Item Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit. Etiam ac hendrerit mi. Aliquam sagittis metus urna. Nulla venenatis porttitor elit, at scelerisque lorem semper eu. Nullam fringilla, mauris a commodo dignissim, tortor neque maximus ante, et consectetur nunc nibh non erat. Donec scelerisque tortor sed mi ornare laoreet. Fusce eget tristique neque, quis condimentum augue. Nulla feugiat molestie nunc, a imperdiet eros. Vivamus at justo nec ligula imperdiet placerat in non erat. Nam vitae rutrum massa. Proin condimentum id metus quis aliquam. Aliquam a tortor velit. Pellentesque aliquet, est a tincidunt imperdiet, nunc nisi aliquam urna, ac auctor mauris massa et nibh.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
  
</div><!-- .grid -->

它与 flex-direction: row;

/* Switches on flexbox */
.grid,
.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="grid">
  
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  
</div><!-- .grid -->

0 回复 | 直到 7 年前

Michael Benjamin William Falcon 7 年前

你没有设定容器的高度。因此,布局会回落到默认高度,即基于内容的高度( height: auto ),而且没有额外的空间供 justify-content 工作。

将以下内容添加到代码中:

.grid,
.content {
  display: flex;
  height: 100vh; /* new */
}

/* Switches on flexbox */
.grid,
.content {
  display: flex;
  height: 100vh; /* new */
}

/* Makes each column equal */
.col {
  flex: 1;
  margin: 12px;
  padding: 12px;
  background: #eaeaea;
  overflow: auto; /* demo */
}

.content {
  flex-direction: column; /* Changes flex direction from row to column */
  justify-content: space-between; /* I'm expecting this to position <h2>, <p> and <a> */
}

<div class="grid">
  
  <div class="col">
    
    <div class="content">
      <h2>Item One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
 
 <div class="col">
    
    <div class="content">
      <h2>Item Two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit. Etiam ac hendrerit mi. Aliquam sagittis metus urna. Nulla venenatis porttitor elit, at scelerisque lorem semper eu. Nullam fringilla, mauris a commodo dignissim, tortor neque maximus ante, et consectetur nunc nibh non erat. Donec scelerisque tortor sed mi ornare laoreet. Fusce eget tristique neque, quis condimentum augue. Nulla feugiat molestie nunc, a imperdiet eros. Vivamus at justo nec ligula imperdiet placerat in non erat. Nam vitae rutrum massa. Proin condimentum id metus quis aliquam. Aliquam a tortor velit. Pellentesque aliquet, est a tincidunt imperdiet, nunc nisi aliquam urna, ac auctor mauris massa et nibh.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
  
  <div class="col">
  
    <div class="content">
      <h2>Item Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit. Etiam ac hendrerit mi. Aliquam sagittis metus urna. Nulla venenatis porttitor elit, at scelerisque lorem semper eu. Nullam fringilla, mauris a commodo dignissim, tortor neque maximus ante, et consectetur nunc nibh non erat. Donec scelerisque tortor sed mi ornare laoreet. Fusce eget tristique neque, quis condimentum augue. Nulla feugiat molestie nunc, a imperdiet eros. Vivamus at justo nec ligula imperdiet placerat in non erat. Nam vitae rutrum massa. Proin condimentum id metus quis aliquam. Aliquam a tortor velit. Pellentesque aliquet, est a tincidunt imperdiet, nunc nisi aliquam urna, ac auctor mauris massa et nibh.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
  
</div><!-- .grid -->

更多详情:

By default, most elements are the height of their content ( height: auto ).