Question

我有一个 flexbox布局，如下所示：

.container {
  display: flex;
  flex-direction: row;
}

.item1, .item2 {
  border: 1px solid black;
}

.nested_left {
  display: flex;
  flex-direction: column;
  border: 2px solid green;
}

.nested_right {
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

<div class="container">
  <div class="nested_left">
    <div class="item1">
      <img src="https://placeimg.com/240/180/any" alt="">
    </div>
    <div class="item1">
      <img src="https://placeimg.com/240/180/any" alt="">
    </div>
  </div>
  <div class="nested_right">
    <img src="https://placeimg.com/640/480/any" alt="">
  </div>
</div>

我试图让左栏在图像之间留有空间，以便顶部图像在顶部对齐，而底部图像在底部对齐。

我可以在使用flex-direction: row时执行此操作，但在使用column时则无法执行此操作。

我哪里错了？

Answer 1

您可以使用justify-content: space-between div 上的.nested_left进行操作，这样可以尽可能地将它们分开：

＆＃13;

.container {
  display: flex;
  /*flex-direction: row; by default*/
}
 
.item1, .item2 {
  border: 1px solid black;
}
 
.nested_left {
  display: flex;
  flex-direction: column;
  border: 2px solid green;
  justify-content: space-between;
}
 
img {display: block} /* to remove bottom margin/whitespace */
 
.nested_right {
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

＆＃13;

<div class="container">
  <div class="nested_left">
    <div class="item1">
      <img src="https://placeimg.com/240/180/any" alt="">
    </div>
    <div class="item1">
      <img src="https://placeimg.com/240/180/any" alt="">
    </div>
  </div>
  <div class="nested_right">
    <img src="https://placeimg.com/640/480/any" alt="">
  </div>
</div>

＆＃13;

值得一提的是，在使用flex-direction: column时，主和交叉轴切换，然后生成{{1} } property 影响 y轴。

Answer 2

给予

.nested-left { 
   justify-content: space-between; 
}

 .container {
   display:flex;
   flex-direction:row;
 }
 
 .item1,.item2{
   border:1px solid black;
 }
 
 .nested_left {
   display:flex;
   flex-direction:column;
    border:2px solid green;
    justify-content: space-between;
 }
 .nested_right {
   display:flex;
   flex-direction:column;
   border:2px solid red;
 }

<div class="container">
  <div class="nested_left">
    <div class="item1">
      <img src="https://placeimg.com/240/180/any">
    </div>
    <div class="item1">
      <img src="https://placeimg.com/240/180/any">
    </div>
  </div>
  <div class="nested_right">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

Flexbox - 在列中分配项目

2 个答案: