列をグリッドに揃えて最後の行を中央に配置するにはどうすればよいですか？

Question

は、私は次のようなレイアウトを実現するにはどうすればよい：

私はフレキシボックスを使用しようとしてきた、jusitfy-content: space-around;を使用してコンテンツを正当化します。ほとんどの場合動作しますが、最初の行を除いて各列はコンテナに揃えられます。

さらに、これは6つの項目で動作する必要があります。その場合、一番下の行は一番上の行と同じになるはずです。

項目は動的に生成されます。

これはすべて可能ですか？どうすればこれを達成できますか？

Answer 1

フレックスボックスにclass "thing"という数のボックスを生成するために使用できるボタンが追加され、レイアウトがどのように変わるかがわかります。それが役に立てば幸い。 :)

$("button").click(function(){ 
 
    $(".things").append("<div class='thing'></div>"); 
 
});

.things { 
 
    padding: 0; 
 
    margin: 0; 
 
    flex-flow:row wrap; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.thing { 
 
    border:1px solid black; 
 
    padding: 10px; 
 
    margin:30px; 
 
    flex:1 0 300px; 
 
    min-width:300px; 
 
    max-width:350px; 
 
    height:300px; 
 
    background:red; 
 
    align-items:center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button>CLick me to make boxes!</button> 
 

 
<div class="things"> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
</div>

Answer 2

あなたは私に私が私の例でそれをやったかのコードが、これを提供する場合、私はこれを更新することができます。

の作業例 - https://codepen.io/anon/pen/dJodeZが

.item { 
    width: 350px; 
    border-bottom: 1px solid black; 
    padding: 10px 0px 50px 0px; 
    margin-bottom: 50px; 
    margin-left: 25px; 
    display: inline-block; 
} 
.wrapper{ 
    text-align: center; 
    justify-content: center; 
    width: 95%; 
    margin-top: 100px; 
    margin-left: 2.5%; 
} 

Answer 3

あなたはこのために、ブートストラップを使用することができます。あなたのウェブサイトの先頭にhttps://getbootstrap.com/docs/4.0/getting-started/introduction/ のリンクを入れてください。次に、あなたの体に次のコードを書くことができます：

<div class="col-lg-4 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div> 
<div class="col-lg-4 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div> 
<div class="col-lg-4 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div><br> 
<div class="col-lg-6 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div> 
<div class="col-lg-6 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div> 

これはあなたが探しているレイアウトを実現します。大画面では、最初の3つの<div>要素がそれぞれ画面の3分の1を占め、最後の2つの要素はそれぞれ半分になります。

編集 - div内の要素にtext-align:center;を使用します。