使用flexbox定位特定元素 [英] Centering a specific element among others with flexbox

问题描述

我在flexbox中有一个包含三个元素的布局，如下：

  .flex-container {
 display：柔性; 
 justify-content：space-between; 
 align-items：center; 
} 
 
< div class =flex-container> 
< div class =flex-item>计算宽度为50像素< / div> 
< div class =flex-item plz-center>计算宽度为25px< / div> 
< div class =flex-item>计算宽度为150像素< / div> 
< / div> 
  

我想将中间的项目 plz-center 并且其他项目停留在任一侧，如下图所示：

它们在flex行中工作正常，但如果结束项目的宽度不同，中间项目不会保持居中。我最好还是让 plz-center 修复？

解决方案

margin-left：auto 和您最后一个框 margin-left：

更复杂的解决方案在构建网格系统时经常被网站使用，将每个这些flex-item包装在另一个也是flex-box的DIV中。然后使这些新的柔性盒平均地共享主包装柔性盒的宽度（每个宽度的1/3）。然后在每个这些框内，你可以根据需要放置你的元素。这里有一个例子（我在新的折叠弹出框周围留下了黑色边框，因此你可以更好地看到这个行为）：

  body {margin：0;}。flex-container {display：flex; align-items：center;}。flex1，.flex2，.flex3 {display：flex; flex：1 1 0; border：1px solid black;}。flex2 {justify-content：space-around;} flex3 {justify-content：flex-end;}。 height：50px; background：orange;}。flex-item.plz-center {width：25px;}。flex-item.big {width：150px;}  snippet-code-html lang-html prettyprint-override> < div class =flex-container> < div class =flex1> < div class =flex-item>< / div> < / div> < div class =flex2> < div class =flex-item plz-center>< / div> < / div> < div class =flex3> < div class =flex-item big>< / div> < / div>< / div>  

I have a layout with three elements in flexbox like so:

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="flex-container">
  <div class="flex-item"> computed width of 50px </div>
  <div class="flex-item plz-center"> computed width of 25px </div>
  <div class="flex-item"> computed width of 150px </div>
</div>

I'd like to center the middle item plz-center and have the other items stay on either side, like this image:

They work fine in the flex row, but if the widths of the end items are different, the middle item doesn't stay centered. Am I better off making plz-center fixed?

解决方案

A simple solution to this problem would be to give your first box margin-right:auto and your last box margin-left:auto, the flex-box will sort out the rest and calculate spacing for you.

A more complex solution that is often used by websites when building grid systems, would be to wrap each of these flex-items in another DIV that is also a flex-box. Then make these new flex-boxes equally share the width of the master wrapping flex-box (1/3 of the width to each). Then inside of each of these boxes you can position your elements as you need. Here's an example (I've left black borders around the new wrapping flex-boxes so you can better see how this behaves):

body {
  margin: 0;
}
.flex-container {
  display: flex;
  align-items: center;
}
.flex1,
.flex2,
.flex3 {
  display: flex;
  flex: 1 1 0;
  border: 1px solid black;
}
.flex2 {
  justify-content: space-around;
}
.flex3 {
  justify-content: flex-end;
}
.flex-item {
  width: 50px;
  height: 50px;
  background: orange;
}
.flex-item.plz-center {
  width: 25px;
}
.flex-item.big {
  width: 150px;
}

<div class="flex-container">
  <div class="flex1">
    <div class="flex-item"></div>
  </div>
  <div class="flex2">
    <div class="flex-item plz-center"></div>
  </div>
  <div class="flex3">
    <div class="flex-item big"></div>
  </div>
</div>

这篇关于使用flexbox定位特定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！