Question

在学习flexbox的过程中，并且对于具有响应性的完美CSS圈子感到困惑。我怎么做？就目前而言，我当前的代码在100宽度和高度处有circle1，circle2和circle3。我不想硬编码他们的高度，而是让它反应灵敏。有没有办法在％中有一个完美的圆圈？那么每次调整浏览器大小时它都会缩放？

或媒体查询是解决此问题的唯一方法吗？

感谢您的帮助。

＆＃13;

			* {
				box-sizing: border-box;
			}

			html, body {
				height: 100%; 
				font-family: sans-serif;
				font-weight: 100;
			}

			body {
				display: flex;
				margin: 0;
				flex-direction: column;
			}

			main {
				display: flex;
				flex: 1 0 100%;

				/*for content and sidebar */
				flex-direction: row; 
			}

			/* main */
			#content {
				flex: 1 0 80%;

				/* for header/logo and description */
				display: flex;
				flex-direction: column;
			}

			#description img {
				display: block;
			}

			#header {
				flex: 1 0 5%;
				padding: 10px;
				/* for test */
				display: flex;
				justify-content: center;
			}

			#test {
				display: flex;
				flex-direction: row;
			}

			#header h1 {
				text-align: center;
				font-size: 5em;
				padding: 0;
				margin: 0;
			    font-family: 'Satisfy', cursive;
			}

			h1 {
				     font-family: 'Satisfy', cursive;
			}

			#description {
				flex: 1 0 10%;
				padding: 30px;
				display: flex;
			}

			#description p {
				padding-left: 20px;
				font-size: 20px;
			}

			#description img {
				 width: 250px;
				 height: 250px;

				 border-radius: 50%;
				  border: 6px solid #db6525;
				  border: 6px solid #00B2AC;
			}

			#name {
				font-size: 35px;
				color: #db6525;
				    font-family: 'Satisfy', cursive;
			}

			 #test img {
				 display: inline;
				 vertical-align: text-top;
				 width: 100px;
				 height: 100px;
				 /* for the following image and description */
				 display: flex;
				 flex-direction: row;
				 align-content: center;
				 align-items: center;
			}

		

			#sidebar {
				flex: 1 0 20%;
				/* background-color: green; */
				text-align: center;
				line-height: 90%;

				/* for sidebar contents */
				display: flex;
				flex-direction: column;
			}


			#js {
				flex: 1 0 33.33333%;
				/* background-color: red; */
				background-color: #db6525;
				border: 20px solid #00B2AC;
				padding: 10px;
			}

			#js h1 {
				font-size: 50px;
			}

			#forms {
			  flex: 1 0 33.33333%;
				/* background-color: gray; */
				background-color: #db6525;
				border: 20px solid #00B2AC;
				padding: 10px;
			}

			#forms h1 {
				font-size: 50px;
			}

			#sites {
			  flex: 1 0 33.33333%;
				/* background-color: Chartreuse; */
				background-color: #db6525;
			  border: 20px solid #00B2AC;
			  padding: 10px;
			}

			#sites h1 {
				font-size: 50px;
			}

			.circles {
				flex: 0 0 5%;

				/* for circles within */
			  display: flex;
			  justify-content: center;
			  align-items: center;   
			  width: 100%;
			}

			.circle1 {
				flex: 0 1 33.33333%;
				display: flex;
				justify-content: center;

			}


			.circle1 h1{
		    font-size: 12px;
		    color: #fff !important;
		    background-color: #db6525;
        border: 4px solid #00B2AC;
				border-radius:50%;
				height: 100px;
        width: 100px;
				text-align: center;
				vertical-align: middle;
			}

			.circle2 {
				flex: 0 1 33.33333%;
				display: flex;
				justify-content: center;
			}

			.circle2 h1 {
    		font-size: 12px;
    		color: #fff !important;
    		background-color: #db6525;
        border: 4px solid #00B2AC;
				border-radius:50%;
				height: 100px;
        width: 100px;
    		text-align: center;
				vertical-align: middle;
			}

			.circle3 {
				flex: 0 1 33.33333%;
				display: flex;
				justify-content: center;
			}

			.circle3 h1 {
    		font-size: 12px;
    		color: #fff !important;
    	  background-color: #db6525;
        border: 4px solid #00B2AC;
				border-radius:50%;
				height: 100px;
        width: 100px;
        text-align: center;
				vertical-align: middle;
			}

＆＃13;

		<main>

			<section id="content">
				<article id="header">

					<section id="test">
						<h1>My Website</h1>
					</section>

				</article>

				<article id="description">

					<img src='images/profilePic.png' />
					
					<p></p>


				</article>

					<article class="circles">
						<div class="circle1">
							<h1>Twitter</h1>
						</div>
						<div class="circle2">
								<h1>Blog</h1>
						</div>
						<div class="circle3">
								<h1>Contact</h1>
						</div>
				</article>

			</section>

			<section id="sidebar">
				<article id="js">
					<h1>Javascript</h1>
					<p>Mini JS Projects</p>
					<p class="subtitle">Work in progress
				</article>
				<article id="forms">
					<h1>Free Forms</h1>
					<p>Feel free to download the forms</p>
				</article>
				<article id="sites">
					<h1>Portfolio</h1>
					<p>Combination of previous work and additional sites</p>
				</article>
			</section>

		</main>

＆＃13;

Answer 1

现在的问题是如何拥有完美的响应式css 方式？因为当你有一个正方形时，你很容易就会得到一个border-radius: 50%的圆圈。现在你可以在SO中找到这么多的解决方案。这是一个带有flexbox项目的nice solution。

 

.flex-container {
    padding: 0;
    margin: 0;
    display: flex;
  
}
.flex-item {
    background: tomato;
    margin: 5px;
    color: white;
    flex: 1 0 auto;
    border-radius: 50%;    
}
.flex-item:before {
    content:'';
    float:left;
    padding-top:100%;
}

<div class="flex-container">
  <div class="flex-item ">
  </div>
  <div class="flex-item ">
  </div>
  <div class="flex-item ">
  </div>
</div>

Answer 2

更新回答

我将Flex容器重新设计为最小的工作示例。 flex-items应全部设置为

flex: 1 1 auto /* flex-grow flex-shrink flex-basis */

这允许circle h1 flex-items根据需要增长和缩小。将示例应用于代码时，可能需要使用js从其展开的宽度获取圆的高度。

希望这有帮助。

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.circles {
  /* for circles within */
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.circle1,
.circle2,
.circle3 {
  display: flex;
  flex: 1 1 auto;
  width: 33vw;
  height: 33vw;
}

.circle1 h1,
.circle2 h1,
.circle3 h1 {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #fff !important;
  background-color: #db6525;
  border: 4px solid #00B2AC;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}

<article class="circles">
  <div class="circle1">
    <h1>Twitter</h1>
  </div>
  <div class="circle2">
    <h1>Blog</h1>
  </div>
  <div class="circle3">
    <h1>Content</h1>
  </div>
</article>

如何拥有完美的响应式CSS圈？

2 个答案: