CSSフレックスと動的スペース間

私のCSSコードはここにあります。

.flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: space-between;
}

.column {
    padding: 10px;
    border: 1px solid red;

    width: 47%;
}

<div class="flex">
    <div class="column">Hi</div>
    <div class="column">Hi</div>

    <div class="column">Hi</div> <!-- This should be a new row... -->
    <div class="column">Hi</div>
</div>

Here is an example: https://jsfiddle.net/htf931bq/

今は4列のdivが表示されています。各divの幅は47%です。 2列のdivしかない場合、それは完璧に機能します。

しかし、4列のdivがある場合、 "flex" divを閉じてから別の "flex" divを開かずに、1行に2 divになるようにするにはどうすればよいでしょうか。

12列のdivがある場合、1行に2 divしかないところで動的にそれを実行するにはどうすればよいですか。

0
nl ru de
jsfiddleが空です。しかし、コード例を共有しないでくださいjfiddleが、stackoverflowコードスニペットを使用してください
追加された 著者 Mihai T,
コメントで述べたとおりです。 jsfiddleでコードを共有しないで、コードスニペットに追加してください。
追加された 著者 Mihai T,
あなたのフィドルリンクはちょうどJSFIDDLEのホームページです:)
追加された 著者 Plastic,
jsフィドルリンクを編集して申し訳ありません。
追加された 著者 Timmy Balk,

4 答え

すべての列に47%のフレックス基準を設定し、コンテナにwrap属性を追加するよりも、ラッパーのディメンションを設定する必要があります。

フィドル

.flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 100%;
    flex-wrap: wrap;
}

.column {
    padding: 10px;
    border: 1px solid red;
    flex: 0 0 47%;  
}

<div class="flex">
<div class="column">Hi</div>
<div class="column">Hi</div>

<div class="column">Hi</div> <!-- This should be a new row... -->
<div class="column">Hi</div>
1
追加された

私は答えを得ました...

このようにflexクラスに flex-wrap:wrap; を追加しました。

.flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
1
追加された
はい、しかし列に幅を使用せず、単にフレックスベースの値を指定してください
追加された 著者 Plastic,

あなたは付け加えられます:

.flex {
    flex-wrap: wrap;
    flex-direction: row;
}

だから今、あなたは2つの列、それぞれ47%幅を持っているでしょう。 しかし、モバイルデバイスで使いやすくするためには、メディアクエリを追加する必要があります。

このメディアクエリを追加します。

@media only screen and (max-width: 600px) {
    .column {
         width: 100%;
    }
}
0
追加された
flex と共に width を使用するのは良い方法ではありません。
追加された 著者 Sankar,
それが実際に正しい答えであることを確認せずに答えを受け入れるように要求するのは良い行動ではありません。
追加された 著者 Plastic,
@Timmy Balk、これを正しい答えとして確認できますか?ありがとうございます。
追加された 著者 Dennis Perremans,

flex-wrap:wrap;.flex に追加する

And flex-basis:47%; to .column

https://jsfiddle.net/bt5shL6o/5/

0
追加された