CSS Flexbox 縱橫比

Question

我希望有人可以幫助我結束 16 小時的搜索。 我必須做

• 2 x 3 柵格中的六個響應方塊。
• 在廣場內必須有一個響應圈。
• 在圓圈內必須有一個居中的字母。
• 我必須使用 Flexbox。
• 我不允許使用網格和/或表格。
• 正方形和圓形需要保持它們的縱橫比並且必須填滿容器。
• 純 CSS

 div { display: flex; flex: 1; justify-content: space-between; font-size: 10rem; }.blokrij { flex-direction: column; width: 50%; }.vierkant { background-color: hsla(26, 100%, 50%, 1.00); flex: 1 1 auto; max-width: 100%; border-radius: 10%; margin 1px; }.rond { background-color: blue; border-radius: 50%; }

 <div class="container"> <div class="blokrij"> <div class="vierkant"> <div class="rond"></div>L</div> <div class="vierkant"> <div class="rond"></div>O</div> <div class="vierkant"> <div class="rond"></div>I</div> </div> <div class="blokrij"> <div class="vierkant"> <div class="rond"></div>L</div> <div class="vierkant"> <div class="rond"></div>O</div> <div class="vierkant"> <div class="rond"></div>I</div> </div> </div>

我很沮喪，我不知道我到底要做什么。 特別是因為我知道如何使用 GRID 來修復它。

感謝您提前提供幫助！

Answer 1

最好為自己的部分分配不同的代碼

• 文字未寫在圓圈內

• 比率設置不正確

• 尺寸設置不正確

我設置margin: 10px; 和padding: 10px; 為了更好，更清晰。

你可能會說圓不精確，更像橢圓

這是真的，因為它們是相對於屏幕測量的

它們可能有不同尺寸的不同尺寸

 .container{ width:100%; height: 100vh; display: flex; }.blokrij { display: flex; flex-direction: column; width: 50%; height: 100%; }.vierkant { background-color: hsla(26, 100%, 50%, 1.00); border-radius: 10%; margin 1px; height: 100%; margin: 10px; padding: 10px; }.rond { height: 100%; background-color: blue; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10rem; }

 <div class="container"> <div class="blokrij"> <div class="vierkant"> <div class="rond">L</div> </div> <div class="vierkant"> <div class="rond">O</div> </div> <div class="vierkant"> <div class="rond">I</div> </div> </div> <div class="blokrij"> <div class="vierkant"> <div class="rond">L</div> </div> <div class="vierkant"> <div class="rond">O</div> </div> <div class="vierkant"> <div class="rond">I</div> </div> </div> </div>

如果您希望圓形和正方形與圓形和正方形完全相同，您可以使用px 、 rem 、...

例如：

 .container{ width:400px; height: 400px; display: flex; }.blokrij { display: flex; flex-direction: column; width: 50%; height: 100%; }.vierkant { background-color: hsla(26, 100%, 50%, 1.00); border-radius: 10%; margin 1px; height: 100%; margin: 5px; padding: 5px; }.rond { height: 100%; background-color: blue; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10rem; }

 <div class="container"> <div class="blokrij"> <div class="vierkant"> <div class="rond">L</div> </div> <div class="vierkant"> <div class="rond">O</div> </div> <div class="vierkant"> <div class="rond">I</div> </div> </div> <div class="blokrij"> <div class="vierkant"> <div class="rond">L</div> </div> <div class="vierkant"> <div class="rond">O</div> </div> <div class="vierkant"> <div class="rond">I</div> </div> </div> </div>

Answer 2

你必須給圓圈一個專門的寬度和高度，把字母放在里面，並用justify-content和align-items為所有彈性項目定義居中。 對於響應性，您應該定義圓形的寬度和高度以及具有相同響應尺寸的字體大小，例如vw 。 列的寬度不是必需的。

工作示例：

 div { display: inline-flex; flex: 1; justify-content: center; align-items: center; font-size: 10vw; }.blokrij { flex-direction: column; }.vierkant { background-color:hsla(26,100%,50%,1.00); border-radius: 10%; margin: 1px; }.rond { width: 20vw; height: 20vw; background-color: blue; border-radius: 50%; }

 <div class="container"> <div class="blokrij"> <div class="vierkant"> <div class="rond">L</div> </div> <div class="vierkant"> <div class="rond">O</div> </div> <div class="vierkant"> <div class="rond">I</div> </div> </div> <div class="blokrij"> <div class="vierkant"> <div class="rond">L</div> </div> <div class="vierkant"> <div class="rond">O</div> </div> <div class="vierkant"> <div class="rond">I</div> </div> </div> </div>

Answer 3

我很忙於同一主題，並且我有與上述相同的問題。 我想知道“Kopshot”的答案是否有幫助。 正方形必須保持相同的形式。 我不允許使用網格。 它必須響應從 320 到 1044 像素的大小。 我嘗試在 CSS 中使用百分比和縱橫比，但它不起作用。 它必須流暢地移動。 鄉紳必須成長以填補空白，所以我不認為固定尺寸是答案。 圖像應該如何看。 我看到該片段看起來不正確，圖像是它在我的計算機上的樣子。

謝謝如果有人可以幫助我......

 .Letterblokjes_blok { margin: auto; display: flex; } @media screen and (min-width:1024px) {.Letterblokjes_blok { margin: auto; display: flow-root; inline-size: 100%; } }.blokjes { display: flow-root; margin: 0; inline-size: 49%; } @media screen and (min-width:768px) {.blokjes { display: flow-root; margin: 0; inline-size: 49%; float: left; } } @media screen and (min-width:1024px) {.blokjes, .blokjes2 { display: flex; flex-direction: row; justify-content: space-between; margin: 0; inline-size: 100%; } }.blokjes2 { float: right; } @media screen and (min-width:768px) {.blokjes2 { float: right; } }.letterblokje, .letterblokje2 { display: flex; float: left; inline-size: 148px; block-size: 148px; margin: 0 0 9px 0; background-color: cornflowerblue; justify-content: center; align-items: center; border-radius: 20%; border: 2px black solid; }.letterblokje2 { float: right; } @media screen and (min-width:768px) {.letterblokje, .letterblokje2 { inline-size: 360px; block-size: 360px; margin: 0 0 30px 0; } } @media screen and (min-width:1024px) {.letterblokje, .letterblokje2 { inline-size: 320px; block-size: 320px; margin: 0 0 21px 0; } } @media screen and (min-width:1044px) {.letterblokje, .letterblokje2 { inline-size: 330px; block-size: 330px; margin: 0 0 21px 0; } }.cirkel { display: flex; border:0.3px solid rgba(220, 220, 220); border-radius: 50%; inline-size: 90%; block-size: 90%; background-color: rgba(200, 200, 200); box-shadow: 0em 0em 0.4em 0.05em rgb(150, 150, 150) inset; align-items: center; justify-content: center; font: 700 60px 'Cabin Sketch', cursive; color: cornflowerblue; font-size: 80px; padding: 30px; } @media screen and (min-width:1044px) { body { inline-size: 1032px; margin:8px auto; } }

 <section class="Letterblokjes_blok"> <article class=blokjes> <div class="letterblokje"><div class="cirkel">L</div></div> <div class="letterblokje"><div class="cirkel">O</div></div> <div class="letterblokje"><div class="cirkel">I</div></div> </article> <article class="blokjes2"> <div class="letterblokje2"><div class="cirkel">L</div></div> <div class="letterblokje2"><div class="cirkel">O</div></div> <div class="letterblokje2"><div class="cirkel">I</div></div> </article> </section>