CSS控制一排上彈性項目的數量

在這個例子中，我有一個包含div項目的塊div，div項目被設計爲圓形。CSS控制一排上彈性項目的數量

我想用flex將它們顯示爲三行兩列。

我有他們顯示在兩行中的三個，但項目被拉伸變形。

我如何才能讓項目爲圓並將其顯示爲三個

body{ 
 
    background: grey; 
 
} 
 

 
.block{ 
 
    background: white; 
 
    display: flex; 
 
    height: 400px; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    padding: 20px; 
 
    position: absolute; 
 
    right: 40px; 
 
    top: 80px; 
 
    width: 540px; 
 
    z-index: 1000; 
 
} 
 

 
.block__item{ 
 
    background: red; 
 
    border-radius: 80px; 
 
    color: white; 
 
    flex-basis: 33%; 
 
    height: 80px; 
 
    text-align: center; 
 
    width: 80px; 
 
    }

<div class="block"> 
 
    <div class="block__item">1</div> 
 
    <div class="block__item">2</div> 
 
    <div class="block__item">3</div> 
 
    <div class="block__item">4</div> 
 
    <div class="block__item">5</div> 
 
    <div class="block__item">6</div> 
 
</div>

來源

2017-10-15 ttmt

如果您嵌套這些圓圈並將「flex-box」值應用於包含的父元素，則可以解決此問題，例如：https://jsfiddle.net/oq6prk1p/847/ – UncaughtTypeError

我認爲對此一個最好嘗試'grid'，因爲這裏你使用的是具有行和列的二維繫統。 – Krusader

現在如何支持網格？ – ttmt

兩行如果您嵌套block--item類中的圓圈，你可以在裏面居中他們不扭曲其形狀：

body { 
 
    background: grey; 
 
} 
 

 
.block { 
 
    background: white; 
 
    display: flex; 
 
    height: 400px; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    padding: 20px; 
 
    position: absolute; 
 
    right: 40px; 
 
    top: 80px; 
 
    width: 540px; 
 
    z-index: 1000; 
 
} 
 

 
.block__item { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 33%; 
 
} 
 

 
.block__item_circle { 
 
    display: flex; 
 
    background: red; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border-radius: 80px; 
 
    color: white; 
 
    height: 80px; 
 
    text-align: center; 
 
    width: 80px; 
 
}

<div class="block"> 
 
    <div class="block__item"> 
 
    <div class="block__item_circle">1</div> 
 
    </div> 
 
    <div class="block__item"> 
 
    <div class="block__item_circle">2</div> 
 
    </div> 
 
    <div class="block__item"> 
 
    <div class="block__item_circle">3</div> 
 
    </div> 
 
    <div class="block__item"> 
 
    <div class="block__item_circle">4</div> 
 
    </div> 
 
    <div class="block__item"> 
 
    <div class="block__item_circle">5</div> 
 
    </div> 
 
    <div class="block__item"> 
 
    <div class="block__item_circle">6</div> 
 
    </div> 
 
</div>

來源

2017-10-15 14:18:30

CSS控制一排上彈性項目的數量

回答

相關問題