2
在學習flexbox的過程中，對於擁有完美的CSS界面感到困惑。我怎麼做？就目前而言，我現在的代碼有100個寬度和高度的circle1，circle2和circle3。我不想對它們的高度進行硬編碼，而是使其響應。有沒有辦法在％中有一個完美的圓圈？所以每次瀏覽器調整大小時都會縮放？如何有一個完美的響應CSS圈？
或者媒體查詢是解決這個問題的唯一選擇嗎？
謝謝你的幫助。
\t \t \t * {
\t \t \t \t box-sizing: border-box;
\t \t \t }
\t \t \t html, body {
\t \t \t \t height: 100%;
\t \t \t \t font-family: sans-serif;
\t \t \t \t font-weight: 100;
\t \t \t }
\t \t \t body {
\t \t \t \t display: flex;
\t \t \t \t margin: 0;
\t \t \t \t flex-direction: column;
\t \t \t }
\t \t \t main {
\t \t \t \t display: flex;
\t \t \t \t flex: 1 0 100%;
\t \t \t \t /*for content and sidebar */
\t \t \t \t flex-direction: row;
\t \t \t }
\t \t \t /* main */
\t \t \t #content {
\t \t \t \t flex: 1 0 80%;
\t \t \t \t /* for header/logo and description */
\t \t \t \t display: flex;
\t \t \t \t flex-direction: column;
\t \t \t }
\t \t \t #description img {
\t \t \t \t display: block;
\t \t \t }
\t \t \t #header {
\t \t \t \t flex: 1 0 5%;
\t \t \t \t padding: 10px;
\t \t \t \t /* for test */
\t \t \t \t display: flex;
\t \t \t \t justify-content: center;
\t \t \t }
\t \t \t #test {
\t \t \t \t display: flex;
\t \t \t \t flex-direction: row;
\t \t \t }
\t \t \t #header h1 {
\t \t \t \t text-align: center;
\t \t \t \t font-size: 5em;
\t \t \t \t padding: 0;
\t \t \t \t margin: 0;
\t \t \t font-family: 'Satisfy', cursive;
\t \t \t }
\t \t \t h1 {
\t \t \t \t font-family: 'Satisfy', cursive;
\t \t \t }
\t \t \t #description {
\t \t \t \t flex: 1 0 10%;
\t \t \t \t padding: 30px;
\t \t \t \t display: flex;
\t \t \t }
\t \t \t #description p {
\t \t \t \t padding-left: 20px;
\t \t \t \t font-size: 20px;
\t \t \t }
\t \t \t #description img {
\t \t \t \t width: 250px;
\t \t \t \t height: 250px;
\t \t \t \t border-radius: 50%;
\t \t \t \t border: 6px solid #db6525;
\t \t \t \t border: 6px solid #00B2AC;
\t \t \t }
\t \t \t #name {
\t \t \t \t font-size: 35px;
\t \t \t \t color: #db6525;
\t \t \t \t font-family: 'Satisfy', cursive;
\t \t \t }
\t \t \t #test img {
\t \t \t \t display: inline;
\t \t \t \t vertical-align: text-top;
\t \t \t \t width: 100px;
\t \t \t \t height: 100px;
\t \t \t \t /* for the following image and description */
\t \t \t \t display: flex;
\t \t \t \t flex-direction: row;
\t \t \t \t align-content: center;
\t \t \t \t align-items: center;
\t \t \t }
\t \t
\t \t \t #sidebar {
\t \t \t \t flex: 1 0 20%;
\t \t \t \t /* background-color: green; */
\t \t \t \t text-align: center;
\t \t \t \t line-height: 90%;
\t \t \t \t /* for sidebar contents */
\t \t \t \t display: flex;
\t \t \t \t flex-direction: column;
\t \t \t }
\t \t \t #js {
\t \t \t \t flex: 1 0 33.33333%;
\t \t \t \t /* background-color: red; */
\t \t \t \t background-color: #db6525;
\t \t \t \t border: 20px solid #00B2AC;
\t \t \t \t padding: 10px;
\t \t \t }
\t \t \t #js h1 {
\t \t \t \t font-size: 50px;
\t \t \t }
\t \t \t #forms {
\t \t \t flex: 1 0 33.33333%;
\t \t \t \t /* background-color: gray; */
\t \t \t \t background-color: #db6525;
\t \t \t \t border: 20px solid #00B2AC;
\t \t \t \t padding: 10px;
\t \t \t }
\t \t \t #forms h1 {
\t \t \t \t font-size: 50px;
\t \t \t }
\t \t \t #sites {
\t \t \t flex: 1 0 33.33333%;
\t \t \t \t /* background-color: Chartreuse; */
\t \t \t \t background-color: #db6525;
\t \t \t border: 20px solid #00B2AC;
\t \t \t padding: 10px;
\t \t \t }
\t \t \t #sites h1 {
\t \t \t \t font-size: 50px;
\t \t \t }
\t \t \t .circles {
\t \t \t \t flex: 0 0 5%;
\t \t \t \t /* for circles within */
\t \t \t display: flex;
\t \t \t justify-content: center;
\t \t \t align-items: center;
\t \t \t width: 100%;
\t \t \t }
\t \t \t .circle1 {
\t \t \t \t flex: 0 1 33.33333%;
\t \t \t \t display: flex;
\t \t \t \t justify-content: center;
\t \t \t }
\t \t \t .circle1 h1{
\t \t font-size: 12px;
\t \t color: #fff !important;
\t \t background-color: #db6525;
border: 4px solid #00B2AC;
\t \t \t \t border-radius:50%;
\t \t \t \t height: 100px;
width: 100px;
\t \t \t \t text-align: center;
\t \t \t \t vertical-align: middle;
\t \t \t }
\t \t \t .circle2 {
\t \t \t \t flex: 0 1 33.33333%;
\t \t \t \t display: flex;
\t \t \t \t justify-content: center;
\t \t \t }
\t \t \t .circle2 h1 {
\t \t font-size: 12px;
\t \t color: #fff !important;
\t \t background-color: #db6525;
border: 4px solid #00B2AC;
\t \t \t \t border-radius:50%;
\t \t \t \t height: 100px;
width: 100px;
\t \t text-align: center;
\t \t \t \t vertical-align: middle;
\t \t \t }
\t \t \t .circle3 {
\t \t \t \t flex: 0 1 33.33333%;
\t \t \t \t display: flex;
\t \t \t \t justify-content: center;
\t \t \t }
\t \t \t .circle3 h1 {
\t \t font-size: 12px;
\t \t color: #fff !important;
\t background-color: #db6525;
border: 4px solid #00B2AC;
\t \t \t \t border-radius:50%;
\t \t \t \t height: 100px;
width: 100px;
text-align: center;
\t \t \t \t vertical-align: middle;
\t \t \t }\t \t <main>
\t \t \t <section id="content">
\t \t \t \t <article id="header">
\t \t \t \t \t <section id="test">
\t \t \t \t \t \t <h1>My Website</h1>
\t \t \t \t \t </section>
\t \t \t \t </article>
\t \t \t \t <article id="description">
\t \t \t \t \t <img src='images/profilePic.png' />
\t \t \t \t \t
\t \t \t \t \t <p></p>
\t \t \t \t </article>
\t \t \t \t \t <article class="circles">
\t \t \t \t \t \t <div class="circle1">
\t \t \t \t \t \t \t <h1>Twitter</h1>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="circle2">
\t \t \t \t \t \t \t \t <h1>Blog</h1>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="circle3">
\t \t \t \t \t \t \t \t <h1>Contact</h1>
\t \t \t \t \t \t </div>
\t \t \t \t </article>
\t \t \t </section>
\t \t \t <section id="sidebar">
\t \t \t \t <article id="js">
\t \t \t \t \t <h1>Javascript</h1>
\t \t \t \t \t <p>Mini JS Projects</p>
\t \t \t \t \t <p class="subtitle">Work in progress
\t \t \t \t </article>
\t \t \t \t <article id="forms">
\t \t \t \t \t <h1>Free Forms</h1>
\t \t \t \t \t <p>Feel free to download the forms</p>
\t \t \t \t </article>
\t \t \t \t <article id="sites">
\t \t \t \t \t <h1>Portfolio</h1>
\t \t \t \t \t <p>Combination of previous work and additional sites</p>
\t \t \t \t </article>
\t \t \t </section>
\t \t </main>
只是想知道根據你的觀察，由於H1不是直接後代，所以如果我做了CIRCLE1，CIRCLE2和CIRCLE3'顯示：flex'，這將「擴大」？對於它的價值，在我上面顯示的代碼中，我確實這麼做了......我誤解了你的意思嗎？ – user273072545345
所以你做了，但你嵌套幾個柔性容器，他們被設置爲'flex-grow：0'。 「flex-grow」和「flex-shrink」都應設置爲1，以便圓圈可以調整大小。我更新了這個例子，將h1用作'circle'的flex-item，並用'circle h1'選擇器來設置樣式。 – jfeferman
上面的代碼片段工作。如果您全屏顯示並調整窗口大小，您會看到這些圓圈完美響應。應用示例時，上游柔性容器可能存在問題。我發現以下一個方便的flex指南：[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a -guide-to-flexbox /） – jfeferman