flex-direction:columnを特定のレイアウトに使用したいと思います。列のコンテナに折り返さないフレックスアイテム
私は通常、標準flex-direction:rowを使用していますので、columnを使用していくつか問題があります。私はあまりそれを制御する方法を知らないし、グーグル上で有用な何かを見つけられませんでした。
私は定期的にULリストを持って、私がしたいことはこれですしました：
1 3 5 7
2 4 6
私は現在、取得すると、このです：
1
2
3
4
5
6
7
私の現在の単純化されたコードはこれです：
.ul{
display: flex;
flex-direction: column;
li{
width: 25%;
}
}
が含まれていることができるはずですulとし、wrapとします。
次にをul li（これはflex-direction: columnを適用したため、高さです）に50％適用してください。同様に：
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100px;
}
ul li {
flex-basis: 50%;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>・ホープ、このことができます：
ul {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100px;
}
ul li {
flex-basis: 50%; /* which in this case will be '50px' */
}
は、以下のスニペットを見てください！複数の列にまたがるリストについて
フレックスコンテナの高さを指定する必要があります。
コンテナの高さが固定されていないと、アイテムはラップする場所がわかりません。
フレックスコンテナの初期設定はnowrapであるため、flex-wrap: wrapも追加する必要があります。
まず、高さをflex-containerに設定し、さらにflex-wrap: wrapに設定する必要があります。次に、flex-basis: 50%をflex-itemに設定すると、望ましい結果が得られます。 ul上
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
li {
flex-basis: 50%;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>使用flex-wrap:wrap;。あなたは厳密に1つの値に高さを設定する必要がいけないが、それは高さが一度に2以上のものを含めることはできないはずだが、総height上の適用2.
li{
width:50px;
list-style-type:none;
height:50px;
margin:5px;
background-color:green;
color:white;
}
ul{
height:150px;
display:flex;
flex-direction:column;
flex-wrap:wrap;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>：
あなたは定義され高さを指定する必要があります。それは
（それはnowrapに設定されているデフォルトで）flex-wrap: wrapを使用してラップする
セットのデモは、以下を参照してください：
ul {
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50px;
}
li {
width: 25%;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>