html - Flexbox 挑战 : how to get row wrapping with children identical and uniform margins in full rows

Question

好的，所以我想使用 flexbox 创建一个完全统一的子网格，该网格使用屏幕尺寸来确定子元素的宽度以及在一行中放置多少个子元素。

我想要统一的东西:

1. 所有 child 的宽度。在所有行中应该是相同的并且由“完整”行确定。
2. “完整”行中的所有边距必须在子项之间以及左侧和右侧外侧保持一致。
3. 至少是同一行中所有子项的高度(如果某些行比其他行高也没关系，尽管最好的实现确实会使所有行的高度相同)。
4. 文本应在所有子项中垂直居中。

如果未填充，我希望元素在最后一行居中，因此在该行中，如果子项外部的极端边距在左侧和右侧较大，则很好(并且确实是首选)。

我有三个接近但没有一个达到目标的解决方案。

1. 除了 child 的宽度，这个版本有我想要的一切。如果您注意到最左边和最右边的边距比整行的子项之间的边距大。理想情况下，我希望 children 足够拉伸(stretch)，以便他们在整行上的边距在两侧(组外)和 child 之间是相同的，然后将相同的宽度应用于最后一行溢出的 child (谁可以左边和右边的边距更大)。

#container{
  list-style-type: none !important;
  display: flex;
 flex-flow: row wrap;
 justify-content:center;
 /*style*/
 padding: 0.5em;
 background-color: royalblue;

}

.child {
  display: flex;
   justify-content: center;
   align-items: center;
   /*style*/
   margin: 0.5em;
   padding: 1em;
 /*  min-height: 80px;*/
   width: 100px;
   background-color: lightblue;
}

<ul id ="container">
        <li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li>
</ul>

1. 此版本具有正确的宽度/边距，但当一个框的文本多于其行中的其他文本时，文本未垂直居中。

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

li {
  min-width: 40px;
  text-align: center;
  flex-grow: 1;
  flex-basis: 100px;
  max-width: 100%;
}
@media (min-width: 200px) {
  li {
    max-width: 50%;
  }
}
@media (min-width: 300px) {
  li {
    max-width: 33.33333%;
  }
}
@media (min-width: 400px) {
  li {
    max-width: 25%;
  }
}
@media (min-width: 500px) {
  li {
    max-width: 20%;
  }
}
@media (min-width: 600px) {
  li {
    max-width: 16.66667%;
  }
}
@media (min-width: 700px) {
  li {
    max-width: 14.28571%;
  }
}
@media (min-width: 800px) {
  li {
    max-width: 12.5%;
  }
}
@media (min-width: 900px) {
  li {
    max-width: 11.11111%;
  }
}
@media (min-width: 1000px) {
  li {
    max-width: 10%;
  }
}
@media (min-width: 1100px) {
  li {
    max-width: 9.09091%;
  }
}
@media (min-width: 1200px) {
  li {
    max-width: 8.33333%;
  }
}
@media (min-width: 1300px) {
  li {
    max-width: 7.69231%;
  }
}
@media (min-width: 1400px) {
  li {
    max-width: 7.14286%;
  }
}
@media (min-width: 1500px) {
  li {
    max-width: 6.66667%;
  }
}
@media (min-width: 1600px) {
  li {
    max-width: 6.25%;
  }
}
@media (min-width: 1700px) {
  li {
    max-width: 5.88235%;
  }
}
@media (min-width: 1800px) {
  li {
    max-width: 5.55556%;
  }
}
@media (min-width: 1900px) {
  li {
    max-width: 5.26316%;
  }
}
@media (min-width: 2000px) {
  li {
    max-width: 5%;
  }
}
@media (min-width: 2100px) {
  li {
    max-width: 4.7619%;
  }
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  background-color: tomato;
}

li .content {
  margin: 0.5em;
  background-color: darkgreen;
}
li img {
  width: 100%;
  opacity: 0.5;
}
li figure, li img {
  margin: 0;
  padding: 0;
}

    <ul>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          I am taller then the other children on this row        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
      <li>
        <div class="content">
          hi there
        </div>
      </li>
</ul>

1. 此版本使边距和高度正确，但未使未填充行中的子项的宽度与已填充行的子项的宽度保持相同的大小。 这实际上非常重要。我更喜欢第一个版本(边距不相等)，而不是这个。

ul, li {
  border: 1px solid black;
}
#container{
  list-style-type: none !important;
  display: flex;
 flex-flow: row wrap;
 justify-content:center;

 /*style*/
 padding: 0.5em;
 background-color: royalblue;

}

.child {
  display: flex;
   justify-content: center;
   align-items: center;
   /*style*/
   margin: 0.5em;
   padding: 1em;
   min-height: 80px;
  min-width: 80px;  
  flex-grow: 1;
  /* width: 25%;*/
   background-color: lightblue;
}

<ul id ="container">
        <li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li><li class ="child"><a href="http://www.google.com"><span class="tf"></span><div class="tf2">Name 1<br>location</div></a></li>

</ul>

Answer 1

在@michaPau 的帮助下，通过使用 sass，我能够得到我想要的一切。我按照他/她的建议将这段代码添加到我的“版本 2”中并且它有效。

/* this is the additional code that gets it to work: thanks to @michaPau */

li    
  display: flex
  justify-content: center 
  align-items: center

/*  --- end of michaPau's code --- */

这是带有功能代码的codepen。您需要点击编译按钮才能从 sass 转换为纯 css: http://codepen.io/ihatecoding/pen/KzyjrE

这是 html:

<ul>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      I am taller then the other children on this row        </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>
  <li>
    <div class="content">
      hi there
    </div>
  </li>

这是完整的 sass(包括@michaPau 的修复):

<!-- language: lang-css -->


=flex-wrap-fix($flex-basis, $max-viewport-width)
  flex-grow: 1
  flex-basis: $flex-basis
  max-width: 100%

  $multiplier: 1
  $current-width: 0px

  @while $current-width < $max-viewport-width
    $current-width: $current-width + $flex-basis
    $multiplier: $multiplier + 1

    @media (min-width: $flex-basis * $multiplier)
      max-width: percentage(1 / $multiplier)

ul
  display: flex
  flex-wrap: wrap
  justify-content: center

li
  // I want the width to be between the following two sizes
  min-width: 40px
  text-align: center
  //max-width: 100px
  // this keeps all the elements the same size
  // **as long as they are on the same row**
  // but I want them to all the same width everywhere
  //flex: 1 0 0

  +flex-wrap-fix(100px, 2000px)

// demo styles

ul, li
  margin: 0
  padding: 0
  list-style: none

ul
  background-color: tomato

li  
  .content 
    margin: .5em
    background-color: darkgreen

/* this is the extra new code thanks to @michaPau */

li    
  display: flex
  justify-content: center 
  align-items: center

/*  ---end of michaPau's code --- */

  // the image may have variable width, I want it to take the entire space calculated by flexbox
  img
    width: 100%
    opacity: .5

  figure, img
    margin: 0
    padding: 0