html - Flexbox 间距/响应式
问题描述
几个小时以来，我一直试图弄清楚这个问题。我试过用
.about_container {justify-content: space-evenly;}但是，它不会在子项之间添加任何间距。此外，这些项目不会调整大小。我尝试添加 flex-flow、flex-basis 和 flex-shrink/grow，但它们都没有任何区别。我在将图像设置为特定尺寸同时也响应时也遇到了问题。
我将不胜感激任何建议！
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
max-width: 1300px;
width: 100%;
}
body {
margin: 0 auto;
max-width: 80%;
height: 100%;
background-attachment: fixed;
background-image: url(2019-12-11-mountain-day-featured-01.jpg);
background-size: cover;
}
h1 {
font-size: 3em;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
margin-bottom: 10%;
}
.about_container {
display: flex;
color: #A3DAE3;
background-color: #784C87;
box-shadow: -10px -10px 15px #A3DAE3 inset;
border-radius: 25px;
margin-bottom: 10%;
}
#about_jason {
margin-left: 20px;
}
#about_sam {
margin-right: 20px;
}
#about_mike {
margin-left: 20px;
margin-right: 20px;
}
.about_container img {
height: 300px;
width: 300px;
object-fit: scale-down;
}
article {
margin-top: 10px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #89A1C9;
}
footer {
text-align: center;
padding-top: 5%;
}
#links li {
transition: all .2s ease-in-out;
}
#links li:hover {
transform: scale(1.5);
}
@media only screen and (max-width: 768px) {
html {
width: 100%;
}
.about_container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
article {
padding-bottom: 20px;
padding-top: 20px;
}
.about_jason > h2 {
padding-top: 30px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #784C87;
}
}<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul id="links">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">How-to</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="sharethis-inline-follow-buttons"></div>
<h1>About Us</h1>
<div class="about_container">
<div id="about_jason">
<h2>Jason R.</h2>
<img src="90528548_10213477312766132_4964276883236585472_n.jpg" />
<p>Hey guys! My name is Jason. I graduated with my Associates of
Applied Science degree in Computer Programming at Minnesota State
Community and Technical college. I am now a Computer Science major
at Davenport University. I work on both the front-end and back-end
within our small team. Outside of work, I enjoy playing video games,
biking, hiking, programming and learning about anything and everything!
I look forward to working with you!</p>
</div>
<div id="about_mike">
<h2>Michael J.</h2>
<img src="Mike.jpg"/>
<p>Hey there! My name is Mike. I live in Montrose,
Colorado where I remotely work with Jason and Sam.
I am a self-taught graphic designer/illustrator.
For several years, I have developed a strong graphic
design portfolio and have a collection of my journey
over the years on my own personal Wordpress at
<a href="www.mikeyajonesdesign.wordpress.com">my wordpress</a>.
I am advanced in Adobe InDesign, Illustrator, and
Photoshop. Outside of work, I enjoy working on digital
art, reading, photography, and teaching myself how to program.
I am currently learning web development and python. I look
forward to working with my team and I look forward to working
with our clients we work with.</p>
</div>
<div id="about_sam">
<h2>Samantha K.</h2>
<img src="cropped_profile_picture.jpg"/>
<p>Hi everyone! My name is Samantha K. I started as a self
taught designer and am now making the big move to pursue
a degree in web design. I have experience in affinity designer,
html and css. I have a beautiful 2 year old daughter, Emily, and
a one year old puppy, Tobi. I live in Clifton, Colorado with my
fiance, my daughter, our best friend and our dog. I enjoy bike rides,
swimming, movies, photography, writing and creating digital art.
I look forward to learning, gaining experience and working with my
team to create beautiful designs.</p>
</div>
</div>
</body>解决方案
问题就在这里。您已为图像提供了宽度和高度值以在所有尺寸下保持相同。
.about_container img {
height: 300px;
width: 300px;
object-fit: scale-down;
}
我为每个人的 div (about) 创建了一个类。我将每张图片的宽度属性设为 350 像素。我没有为图像提供固定的宽度高度值，而是添加了属性显示块，宽度为 100%。所以无论容器宽度有多大，他们都会根据它来调整自己。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
max-width: 80%;
height: 100%;
background-attachment: fixed;
background-image: url(2019-12-11-mountain-day-featured-01.jpg);
background-size: cover;
}
h1 {
font-size: 3em;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
margin-bottom: 10%;
}
.about_container {
display: flex;
color: #A3DAE3;
background-color: #784C87;
box-shadow: -10px -10px 15px #A3DAE3 inset;
border-radius: 25px;
margin-bottom: 10%;
justify-content: space-evenly;
}
.about {
width: 350px;
}
#about_jason {
margin-left: 20px;
}
#about_sam {
margin-right: 20px;
}
#about_mike {
margin-left: 20px;
margin-right: 20px;
}
.about_container img {
display: block;
width: 100%;
object-fit: scale-down;
}
article {
margin-top: 10px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #89A1C9;
}
footer {
text-align: center;
padding-top: 5%;
}
#links li {
transition: all .2s ease-in-out;
}
#links li:hover {
transform: scale(1.5);
}
@media only screen and (max-width: 768px) {
html {
width: 100%;
}
.about_container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
article {
padding-bottom: 20px;
padding-top: 20px;
}
.about_jason>h2 {
padding-top: 30px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #784C87;
}
}<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul id="links">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">How-to</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="sharethis-inline-follow-buttons"></div>
<h1>About Us</h1>
<div class="about_container">
<div id="about_jason" class="about">
<h2>Jason R.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hey guys! My name is Jason. I graduated with my Associates of Applied Science degree in Computer Programming at Minnesota State Community and Technical college. I am now a Computer Science major at Davenport University. I work on both the front-end
and back-end within our small team. Outside of work, I enjoy playing video games, biking, hiking, programming and learning about anything and everything! I look forward to working with you!</p>
</div>
<div id="about_mike" class="about" >
<h2>Michael J.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hey there! My name is Mike. I live in Montrose, Colorado where I remotely work with Jason and Sam. I am a self-taught graphic designer/illustrator. For several years, I have developed a strong graphic design portfolio and have a collection of my
journey over the years on my own personal Wordpress at
<a href="www.mikeyajonesdesign.wordpress.com">my wordpress</a>. I am advanced in Adobe InDesign, Illustrator, and Photoshop. Outside of work, I enjoy working on digital art, reading, photography, and teaching myself how to program. I am currently
learning web development and python. I look forward to working with my team and I look forward to working with our clients we work with.</p>
</div>
<div id="about_sam" class="about">
<h2>Samantha K.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hi everyone! My name is Samantha K. I started as a self taught designer and am now making the big move to pursue a degree in web design. I have experience in affinity designer, html and css. I have a beautiful 2 year old daughter, Emily, and a one
year old puppy, Tobi. I live in Clifton, Colorado with my fiance, my daughter, our best friend and our dog. I enjoy bike rides, swimming, movies, photography, writing and creating digital art. I look forward to learning, gaining experience and
working with my team to create beautiful designs.</p>
</div>
</div>推荐阅读
- r - 如何删除字符串上的完全匹配
- apache-spark - Spark 结构化流式处理：是否支持 mapPartitions？
- c++ - 如何检查 mpz_t 编号是否使用 GMP 初始化？
- java - 如何根据 POJO 中的另一个值更改变量的值？
- c++ - 如何处理可能具有多种类型之一的 Rcpp::XPtr
- r - 有没有办法将我的数据可视化为 R 中的表格格式
- spring-cloud - 我如何知道项目里程碑何时发布（没有为里程碑设置日期）？
- powershell - 从 ISO 8601 持续时间获取 DateTime 对象
- python - 有什么办法可以解决“project=Project.objects.get(pk=pk)”
- java - 当我尝试从命令或 android studio 获取 SHA-1 编号时，它给了我一个错误