代码之家 › 专栏 › 技术社区 › Boky

如果只有两个div,如何将左div与flex对齐

flexbox css html

Boky · 技术社区 · 6 年前

我有一个父div,样式如下:

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

每个孩子都有:

flex: 0 1 32%;

如果我有三个孩子,看起来是这样的:

那很好。这是小提琴 https://jsfiddle.net/2sc7amL1/1/

但问题是当我只有子元素时

这是小提琴 https://jsfiddle.net/2sc7amL1/2/

如果只有两个子div与照片上的左对齐,如何使用flex实现这一点

4 回复 | 直到 6 年前

Fabrizio Calderan 6 年前

检查是否 :last-child 也是 :nth-child(2) . 在这种情况下,更改元素的边距

.parent{
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%; 
    background-color: yellow;
}

.child{
  flex: 0 1 32%;
  background-color: red;
  height: 400px;
}

.parent > div:last-child:nth-child(2) {
  margin: 0 auto 0 2%;
}

<div class="parent">
  <div class="child">
    Child
  </div>
  
  
  <div class="child">
    Child
  </div>
</div>


<br /> <br />

<div class="parent">
  <div class="child">
    Child
  </div>
  
  <div class="child">
    Child
  </div>
  
  <div class="child">
    Child
  </div>
</div>

Loi Nguyen Huynh 6 年前

如果你不想 justify-content: flex-start 就像其他答案一样。你想要的技术可能是:

.parent::after {
  content: '';
  flex: 0 1 32%;
}

尝试下面的代码,分别有2个和3个孩子。技术来源: https://haizdesign.com/css/flexbox-align-last-item-grid-left/

.parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%; 
  background-color: yellow;
}

.parent::after {
  content: '';
  flex: 0 1 32%;
}

.child{
  flex: 0 1 32%;
  background-color: red;
  height: 400px;
}

<div class="parent">
  <div class="child"> Child </div>
  <div class="child"> Child </div>
  <div class="child"> Child </div>
</div>

<div class="parent">
  <div class="child"> Child </div>
  <div class="child"> Child </div>
</div>

louie kim 6 年前

添加justify content:flex start到父类名称。如果子div之间需要空格,则向子元素添加边距。

.parent{
    justify-content: flex-start;
}
.child:nth-child(even){
    margin: 0 20px;
}

这是你的 https://jsfiddle.net/v8wnruxc/1/

A. Meshu James Shuttler 6 年前

也许是那样的?

.parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;;
  width: 100%; 
  background-color: yellow;
}

.child{
  flex: 0 1 32%;
  margin: 0 0.5%;
  background-color: red;
  height: 400px;
}
.child:nth-child(3n) {   flex-grow: 1;} /* fix as for comment */

这里是片段:

.parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;;
  width: 100%; 
  background-color: yellow;
}

.child{
  flex: 0 1 32%;
  margin: 0 0.5%;
  background-color: red;
  height: 400px;
}
.child:nth-child(3n) {   flex-grow: 1;}

<div class="parent">
  <div class="child">
    Child 1
  </div>      
  
  <div class="child">
    Child 2
  </div>
  
  <div class="child">
    Child 3
  </div>

  <div class="child">
    Child 4
  </div>
    
  <div class="child">
    Child 5
  </div>
  
  <div class="child">
    Child 6
  </div>
</div>

This link 有助于获得所有的可能性。

Nethra 6 年前

.parent > div:last-child:nth-child(2) {
  margin:0 auto 0 30px;
 }

你可以用 nth-child 也