在flex容器中右对齐项目 [英] Right-align items in a flex container

问题描述

我有一个div容器（黑色轮廓），其中包含4个相等的长度和高度的div。

我想要4个彩色的div对齐， （假设每个彩色div的大小约为容器高度的49.5％，每个div的宽度约为容器的25％）。 b
$ b

我试图用flex做这个，但是我没有得到我想要的。

有人可以帮我吗？非常感谢你提前。

 < div class =container> 
< div class =blue>< / div> 
< div class =red>< / div> 
< div class =purple>< / div> 
< div class =green>< / div> 
< / div> 
 
 .container {} 
 .blue {} 
 .red {} 
 .purple {} 
 .green {} 
 < code $ <$ $ p 
 
解决方案
因为看起来你在一行内有两列，所以我建议你使用< 
 
 
这是如何工作的：
  .container（外部flexbox，flex-direction：row）
 --------------------------- ---------------------------------------- 
 | .innerContainer | .innerContainer | .innerContainer | 
 ---------------------------------------------- --------------------- 
 
 .innerContainer（内部柔性盒，柔性方向：列）
 ----- ---------- --------------- -------------- 
 | （空）| | .blue | | .red | 
 --------------- | .purple | | .green | 
 --------------- -------------- 
  
另外，所有 flex-box 子元素都被设置为 flex-grow：1 ，所以它们都是相同的尺寸，并填满整个空间。
 
 
 
 
 
 
  .container {display：flex; flex-direction：row; background-color：＃e9e9e9; height：100px;}。innerContainer {display：flex; flex-direction：column;}。blue，.red，.purple，.green，.innerContainer {flex-grow：1; margin：2px 1px;}。blue {background-color：blue;}。red {background-color：red;}。purple {background-color：purple;}。green {background-color：green;}  < div class =container> $ c>  
 
 
 
 
I have a div container (black outline) which contains 4 divs of equal length and height.

I want the 4 colored divs to be aligned right with equal spaces between them (assuming that each colored div is about 49.5% the height of container and width of each div is about 25% of container).



I tried to do this with flex but I'm not getting what I want.

Can someone please help me? Thank you so much in advance.  
<div class="container">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="purple"></div>
  <div class="green"></div>    
</div>

.container { }
.blue { }
.red { }
.purple { }
.green { }

解决方案
Because it seems that you have two columns inside a row, I suggest you use three flexboxes for this occasion.

Here is how this works:
.container (outer flexbox, flex-direction: row)
-------------------------------------------------------------------
|   .innerContainer   |   .innerContainer   |   .innerContainer   |
-------------------------------------------------------------------

.innerContainer (inner flexbox, flex-direction: column)
---------------   ---------------   --------------
|   (empty)   |   |    .blue    |   |    .red    |
---------------   |   .purple   |   |   .green   |
                  ---------------   --------------
Also, all flex-box children were set to flex-grow: 1 so that they are all equal dimensions and they fill up the entire space.



.container {
  display: flex;
  flex-direction: row;
  background-color: #e9e9e9;
  height: 100px;
}
.innerContainer {
  display: flex;
  flex-direction: column;
}
.blue, .red, .purple, .green, .innerContainer {
  flex-grow: 1;
  margin: 2px 1px;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.purple {
  background-color: purple;
}
.green {
  background-color: green;
}

<div class="container">
  <div class="innerContainer"></div>
  <div class="innerContainer">
    <div class="blue"></div>
    <div class="purple"></div>
  </div>
  <div class="innerContainer">
    <div class="red"></div>
    <div class="green"></div>
  </div>
</div>





                        
这篇关于在flex容器中右对齐项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！