flexbox - 如何根據列的寬度調整居中橢圓的命題？

Question

我在柔性父級中保留了一個圓圈。 flex父母調整得很好。我怎樣才能調整父母內的內容？

我試圖用流體設置圓的大小，但也失敗了。

.parent { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border: 1px solid red; 
 
    align-items: center; 
 
} 
 

 
.child { 
 
    border-right: 1px solid gray; 
 
    width: 50%; 
 
} 
 

 
.last { 
 
    text-align: center; 
 
} 
 

 
.circle { 
 
    border: 1px solid gray; 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 

 

 
/* my try but not works*/ 
 

 

 
/* 
 

 
.circle{ 
 
    border:1px solid gray; 
 
    border-radius:50%; 
 
    width:50%; not works! 
 
    height:50%; not works! 
 
    display:inline-block; 
 
    margin:0 auto; 
 
} 
 

 
*/

<div class="parent"> 
 
    <div class="first child"> 
 
    <p>Some text</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptate laborum at soluta maiores molestiae minus pariatur voluptas tempore illo, alias, atque deserunt, ex architecto necessitatibus vel nobis fugit consequuntur.</p> 
 
    </div> 
 
    <div class="child last"> 
 
    <div class="circle"></div> 
 
    </div> 
 
</div>

Answer 1

使用本

.circle { 
    border: 1px solid gray; 
    border-radius: 50%; 
    width: 40%; 
    padding-bottom: 40%; 
    height:auto; 
    display: inline-block; 
    margin: 0 auto; 
} 

.parent { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border: 1px solid red; 
 
    align-items: center; 
 
} 
 

 
.child { 
 
    border-right: 1px solid gray; 
 
    width: 50%; 
 
} 
 

 
.last { 
 
    text-align: center; 
 
} 
 

 
.circle { 
 
    border: 1px solid gray; 
 
    border-radius: 50%; 
 
    width: 40%; 
 
    padding-bottom: 40%; 
 
    height:auto; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 

 

 

 

 
/* my try but not works*/ 
 

 

 
/* 
 

 
.circle{ 
 
    border:1px solid gray; 
 
    border-radius:50%; 
 
    width:50%; not works! 
 
    height:50%; not works! 
 
    display:inline-block; 
 
    margin:0 auto; 
 
} 
 

 
*/

<div class="parent"> 
 
    <div class="first child"> 
 
    <p>Some text</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptate laborum at soluta maiores molestiae minus pariatur voluptas tempore illo, alias, atque deserunt, ex architecto necessitatibus vel nobis fugit consequuntur.</p> 
 
    </div> 
 
    <div class="child last"> 
 
    <div class="circle"></div> 
 
    </div> 
 
</div>