使用Css flexbox對齊項目

Question

我想對齊這樣的項目。

把4個項目放在1行和3個項目在下一行，但我想對齊中心。

雖然我固定爲25％，但它不能正常工作。

請看看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元素你行希望，在自己的柔性盒。確保你給每個.quarterflex:1;屬性，而不是width:25%屬性。

例如，這是您的第一行HTML。參考小提琴的所有代碼，包括將flex:1;屬性放在哪裏。在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

放4項和下一行的3個項目，但我想居中對齊。

不知道是什麼，我們想與第八項做，但...

首先，我們使用box-sizing:border-box包括在寬度計算填充/邊界和我們可以設置寬度（或Flex物業）到：

.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>