我可以使用 flex-direction 以与浮动相同的方式水平打印元素吗？

Question

原谅标题。我有一个如下所示的列表：

我想按字母顺序排列，这样 Character 就是 Injury 的位置：Eye 是，Food 是 times_hunted 的位置，Hungry 是 Character 的位置。当然，CSSfloats/flows喜欢行。我曾希望我可以使用 flex-direction: column; 让 CSS 理解 "floating left" 意味着 x 项目将被放置在顶部而不是一个 max-width 在容器上，我会使用 max-height 并且我会很开心。不完全是。

Fiddle 这里：https://jsfiddle.net/5kkLwgat/1/

有什么方法可以垂直 "print CSS out" 吗？我试图避免使用 PHP 来解决这个问题，因为它相当微不足道，但不是最好的解决方案。

.megitsune {
  float: left; 

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

  width: 1320px; font-size: 11px; margin-bottom: 18px;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

 .holder {
  width: 160px; cursor: default; position: relative; margin: 0px 16px 4px 0px; border: 1px solid #666;
  padding: 2px 5px; font-size: 12px;
 }
  
  .objchange {
  width: 26px;
  padding-left: 2px !important;
  position: absolute; top: -1px; right: -1px; 
  height: 20px;
 }

<div class="megitsune">
 <h2 title="Equippable item names are highlighted in blue.">Items</h2>
 <div class="holder" title="Original value: 1" style="background: #DFEDF7">
    Bow <input type="text" value="1" data-obj="5" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 1">
    Character <input type="text" value="1" data-obj="2" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    Food <input type="text" value="0" data-obj="7" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 3" style="background: #DFEDF7">
    Hungry <input type="text" value="3" data-obj="22" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Back <input type="text" value="0" data-obj="19" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Broken Arm <input type="text" value="0" data-obj="16" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Broken Leg <input type="text" value="0" data-obj="17" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Eye <input type="text" value="0" data-obj="18" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Iron Axe <input type="text" value="0" data-obj="4" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Iron Sword <input type="text" value="0" data-obj="3" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 5">
    Meat <input type="text" value="5" data-obj="9" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 2">
    temp <input type="text" value="2" data-obj="10" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    temp2 <input type="text" value="0" data-obj="21" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 8">
    times_gathered <input type="text" value="8" data-obj="15" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    times_hunted <input type="text" value="0" data-obj="14" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    time_day <input type="text" value="0" data-obj="11" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    time_night <input type="text" value="0" data-obj="12" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    Wet Wood <input type="text" value="0" data-obj="8" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 1">
    Wood <input type="text" value="1" data-obj="6" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    z_youwin <input type="text" value="0" data-obj="20" data-type="item" class="objchange">
  </div>
</div>

Answer 1

使用 flex-direction: column 您可以使布局正常工作。

请记住，您需要在容器上定义高度。

没有高度限制，弹性项目没有理由换行。

revised fiddle

Answer 2

如果需要列，请使用 CSS columns。

设置容器：

.megitsune {
  width: 1320px;
  font-size: 11px;
  margin-bottom: 18px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
}

设置项目：

.holder {
  cursor: default;
  position: relative;
  margin: 0px 16px 4px 0px;
  border: 1px solid #666;
  padding: 2px 5px;
  font-size: 12px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.megitsune {
  width: 1320px;
  font-size: 11px;
  margin-bottom: 18px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
}
.holder {
  cursor: default;
  position: relative;
  margin: 0px 16px 4px 0px;
  border: 1px solid #666;
  padding: 2px 5px;
  font-size: 12px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.objchange {
  width: 26px;
  padding-left: 2px !important;
  position: absolute;
  top: -1px;
  right: -1px;
  height: 20px;
}

<h2 title="Equippable item names are highlighted in blue.">Items</h2>

<div class="megitsune">
  <div class="holder" title="Original value: 1" style="background: #DFEDF7">
    Bow
    <input type="text" value="1" data-obj="5" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 1">
    Character
    <input type="text" value="1" data-obj="2" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    Food
    <input type="text" value="0" data-obj="7" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 3" style="background: #DFEDF7">
    Hungry
    <input type="text" value="3" data-obj="22" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Back
    <input type="text" value="0" data-obj="19" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Broken Arm
    <input type="text" value="0" data-obj="16" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Broken Leg
    <input type="text" value="0" data-obj="17" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Eye
    <input type="text" value="0" data-obj="18" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Iron Axe
    <input type="text" value="0" data-obj="4" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Iron Sword
    <input type="text" value="0" data-obj="3" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 5">
    Meat
    <input type="text" value="5" data-obj="9" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 2">
    temp
    <input type="text" value="2" data-obj="10" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    temp2
    <input type="text" value="0" data-obj="21" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 8">
    times_gathered
    <input type="text" value="8" data-obj="15" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    times_hunted
    <input type="text" value="0" data-obj="14" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    time_day
    <input type="text" value="0" data-obj="11" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    time_night
    <input type="text" value="0" data-obj="12" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    Wet Wood
    <input type="text" value="0" data-obj="8" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 1">
    Wood
    <input type="text" value="1" data-obj="6" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    z_youwin
    <input type="text" value="0" data-obj="20" data-type="item" class="objchange">
  </div>
</div>

Answer 3

您可以使用带有强制换行符的列弹性容器，例如每三项：

.holder:nth-of-type(3n) {
  break-after: always;
}

请注意，它尚未得到广泛支持，仅适用于使用旧 page-break-after 别名的 Firefox。

.megitsune {
  float: left;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  flex-wrap: wrap;
  width: 1320px;
  font-size: 11px;
  margin-bottom: 18px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.holder {
  width: 160px;
  cursor: default;
  position: relative;
  margin: 0px 16px 4px 0px;
  border: 1px solid #666;
  padding: 2px 5px;
  font-size: 12px;
}
.holder:nth-of-type(3n) {
  page-break-after: always;
  break-after: always;
}
.objchange {
  width: 26px;
  padding-left: 2px !important;
  position: absolute;
  top: -1px;
  right: -1px;
  height: 20px;
}

<div class="megitsune">
  <h2 title="Equippable item names are highlighted in blue.">Items</h2>
  <div class="holder" title="Original value: 1" style="background: #DFEDF7">
    Bow <input type="text" value="1" data-obj="5" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 1">
    Character <input type="text" value="1" data-obj="2" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    Food <input type="text" value="0" data-obj="7" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 3" style="background: #DFEDF7">
    Hungry <input type="text" value="3" data-obj="22" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Back <input type="text" value="0" data-obj="19" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Broken Arm <input type="text" value="0" data-obj="16" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Broken Leg <input type="text" value="0" data-obj="17" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Injury: Eye <input type="text" value="0" data-obj="18" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Iron Axe <input type="text" value="0" data-obj="4" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0" style="background: #DFEDF7">
    Iron Sword <input type="text" value="0" data-obj="3" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 5">
    Meat <input type="text" value="5" data-obj="9" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 2">
    temp <input type="text" value="2" data-obj="10" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    temp2 <input type="text" value="0" data-obj="21" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 8">
    times_gathered <input type="text" value="8" data-obj="15" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    times_hunted <input type="text" value="0" data-obj="14" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    time_day <input type="text" value="0" data-obj="11" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    time_night <input type="text" value="0" data-obj="12" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    Wet Wood <input type="text" value="0" data-obj="8" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 1">
    Wood <input type="text" value="1" data-obj="6" data-type="item" class="objchange">
  </div>
  <div class="holder" title="Original value: 0">
    z_youwin <input type="text" value="0" data-obj="20" data-type="item" class="objchange">
  </div>
</div>

我可以使用 flex-direction 以与浮动相同的方式水平打印元素吗？

Can I use flex-direction to print elements horizontally in the same manner as floats?

html

css

css-float

flexbox