我一直在尋找一些示例（here）來幫助指導我使用 CSS 繪制兩個圓圈，它們之間有一條線（有點像 A 點到 B 點的圖形）。我對自定義 CSS 很陌生，所以如果這是我的配置中缺少的簡單內容，請原諒我。
我用網頁上顯示的圖形創建了 CSS，但根據螢屏尺寸，我的外圈可能會變形 - 我認為這與我的display: flex可能有關？請看以下截圖：
好的設計
糟糕的設計
這是我專門用于制作圖形的 CSS 代碼
.circuit-graphic {
display: flex;
align-items: center;
justify-content: center;
}
.circuit-graphic .circle {
width: 60px;
height: 60px;
border: 2px solid #dc3545;
border-radius: 50%;
position: relative;
}
.circuit-graphic .circle:before {
display: block;
content: '';
width: 40px;
height: 40px;
background: #dc3545;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circuit-graphic .line {
width: 100%;
border: 5px solid #dc3545;
}
我把它設定在我的 HTML 中，就像在偽中一樣
<div class="row align-items-center">
<div class="col-auto">
[.........]
</div>
<div class="col">
<div class="circuit-graphic">
<div class="circle"></div>
<div class="line"></div>
<div class="circle"></div>
</div>
</div>
<div class="col-auto">
[.........]
</div>
</div>
我試圖實作的目標是在螢屏的兩側有兩個框，它們之間的這個圖形可以根據螢屏大小動態改變它的寬度。
在這里查看我的作業示例。
uj5u.com熱心網友回復：
問題出在您的行中，該行試圖占據 100% 的空間，在這些情況下，您需要的是填充，這是通過制作元素來實作的flex，并且flex: 1，像這樣
.circuit-graphic .line {
display: flex;
flex: 1;
}
你可以在這里更好地看到這一點
.circuit-graphic {
display: flex;
align-items: center;
justify-content: space-between;
}
.circuit-graphic .circle {
width: 60px;
height: 60px;
border: 2px solid #dc3545;
border-radius: 50%;
position: relative;
}
.circuit-graphic .circle:before {
display: block;
content: '';
width: 40px;
height: 40px;
background: #dc3545;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circuit-graphic .line {
border: 5px solid #dc3545;
display: flex;
flex: 1;
}<div class="row align-items-center">
<div class="col-auto">
</div>
<div class="col">
<div class="circuit-graphic">
<div class="circle"></div>
<div class="line"></div>
<div class="circle"></div>
</div>
</div>
<div class="col-auto">
</div>
</div>uj5u.com熱心網友回復：
我剛剛通過添加最小寬度和最大寬度來設定最小和最大寬度。
UPD：上面的解決方案在 flex-shrink 和 flex-grow 中添加值會更好，但球仍會在最小螢屏尺寸時開始收縮。所以，我的解決方案解決了這個問題。但我猜最小和最大寬度的硬編碼并不是最好的解決方案。
.circuit-graphic .circle {
min-width: 60px;
max-width: 60px;
height: 60px;
border: 2px solid #dc3545;
border-radius: 50%;
position: relative;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/455026.html
標籤：css
上一篇：在React引導程式中更改Accordion.Header樣式
下一篇：如何從盒子中移除這個黑色陰影？