Flexbox包装 - 最后一行的不同对齐方式 [英] Flexbox wrap - different alignment for last row

问题描述

我使用弹性框将两个项目对齐到容器的左侧和右侧，而垂直居中对齐它们。这是一个非常简单的例子，我试图实现。

HTML：

 < div class =container> 
< div class =first>< / div> 
< div class =second>< / div> 
< / div> 
  

CSS：

  .container {
 width：100％; 
 display：flex; 
 flex-direction：row; 
 flex-wrap：wrap; 
 justify-content：space-between; 
 align-items：center; 
} 
 
 .first {
 background-color：yellow; 
 width：200px; 
 height：100px; 
} 
 
 .second {
 background-color：blue; 
 width：200px; 
 height：100px; 
 
  

这里是 jsfiddle的例子。

如果屏幕足够宽以适应内部div，一排。但是，当屏幕尺寸很小（如手机），divs包装到第二行时，第二个也将对齐到左侧（即 flex-start ）。我怎么能强制第二个div总是与右边界对齐，不管是在第一行还是在第二行上？

编辑：在示例中，我将固定宽度分配给两个子元素 - 这仅仅是为了简单。在现实生活中，所有宽度都是根据运行时从数据库中读取的内容动态变化的。因此，任何基于固定大小的解决方案都将无法工作。

解决方案

您可以尝试添加一些左边距， c $ c> .second 元素：
$ b

 。第二个{
 margin-left：auto; 
 
 
 
 $ b 
 
 
 
  .container {width： 100％;显示：flex; flex-direction：row; flex-wrap：wrap;证明内容：空间之间; align-items：center;}第一个{background-color：yellow;宽度：200px; height：100px;}。second {background-color：blue;宽度：200px; height：100px; margin-left：auto;}  

< div class = 容器 > < div class =first>< / div> < div class =second>< / div>< / div>

或者，类似地，将所有元素向右对齐，但向左侧推入 .first 元素：



.container {
justify-content：flex-end;
}
.first {
margin-right：auto;



$ b

.container {width： 100％;显示：flex; flex-direction：row; flex-wrap：wrap; justify-content：flex-end; align-items：center;}第一个{background-color：yellow;宽度：200px; height：100px; margin-right：auto;}。second {background-color：blue;宽度：200px; height：100px;}

< div class =container > < div class =first>< / div> < div class =second>< / div>< / div>

I'm using flex box to align two items to left and right of the container, while vertically centre-aligning them. Here's a very simple example of what I'm trying to achieve.

HTML:

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>

CSS:

.container {
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
}

Here's the jsfiddle of the example.

This works perfectly well if the screen is wide enough to fit both internal divs on one row. However when the screen size is small (e.g. a mobile phone) and the divs wrap onto the second line, the second one also becomes aligned to the left side (i.e. flex-start). How can I force the second div to always be aligned against the right border, regardless of whether it's on the first row or wrapped onto the second one?

EDIT: In the example, I assigned fixed width to the two child elements - this is for simplicity only. In the real life application, all widths are dynamically changing based on the content read from the database at run-time. Hence, any solution that's based on fixed sizes will not work.

解决方案

You can try adding some left margin to push your .second element to the right:

.second {
    margin-left: auto;
}

.container {
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.first {
  background-color: yellow;
  width: 200px;
  height: 100px;
}
.second {
  background-color: blue;
  width: 200px;
  height: 100px;
  margin-left: auto;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

Or, similarly, justify all elements to the right but push .first element to the left:

.container {
    justify-content: flex-end;
}
.first {
    margin-right: auto;
}

.container {
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.first {
  background-color: yellow;
  width: 200px;
  height: 100px;
  margin-right: auto;
}
.second {
  background-color: blue;
  width: 200px;
  height: 100px;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

这篇关于Flexbox包装 - 最后一行的不同对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！