Cssを使ってアイテムを整列するflexbox

Question

このようなアイテムを整列したいと思います。

1列に4つの項目を、次の行に3つの項目を入れますが、中央に揃えたいです。

私は25％で修正しましたが、正しく動作しません。

私は自分のフレックスボックスには、あなたがラインにしたい.quarter要素の各セットを包むだろう見here

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.quarter { 
 
    width: 24.6%; 
 
    padding: 20px; 
 
    background-color: #b5d46e; 
 
    border: 3px solid white; 
 
    color: white; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
}

<div class='flex-container'> 
 
    <div class='quarter flex-item'> 
 
    <h3>1</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>2</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>3</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>4</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>5</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>6</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>7</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>8</h3> 
 
    </div> 
 
</div>

Answer 1

を持っていてください。各.quarterにwidth:25%プロパティの代わりにflex:1;プロパティを指定してください。

たとえば、これが最初の行のHTMLです。 flex:1;プロパティを入れる場所を含む、すべてのコードのためのフィドルへの参照。

<div class='flex-container'> 
    <div class='quarter flex-item'> 
    <h3>1</h3> 
    </div> 
    <div class='quarter flex-item'> 
    <h3>2</h3> 
    </div> 
    <div class='quarter flex-item'> 
    <h3>3</h3> 
    </div> 
    <div class='quarter flex-item'> 
    <h3>4</h3> 
    </div> 

https://jsfiddle.net/ogho96cf/

Answer 2

1行目の4つの項目と次の行の3つの項目を入れて、私は中心を整列します。

我々は8項目をどうするとしているかわからない

けど...まず

、我々は幅の計算でパディング/ボーダーを含めるようにbox-sizing:border-boxを使用して、我々は、幅を設定（またはフレックスことができますプロパティ）を

.quarter { 
    flex: 0 1 25%; 
} 

としています。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    width: 100%; 
 
} 
 
.quarter { 
 
    flex: 0 1 25%; 
 
    padding: 20px; 
 
    background-color: #b5d46e; 
 
    border: 3px solid white; 
 
    color: white; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
}

<div class='flex-container'> 
 
    <div class='quarter flex-item'> 
 
    <h3>1</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>2</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>3</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>4</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>5</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>6</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>7</h3> 
 
    </div> 
 
</div>