问题在于,当屏幕尺寸减小且三个无序列表对齐时(一个用于工作经验,一个用于教育)。教育部分与工作经验不一致,因为文本较长,而且我使用 justify-content: space-around。我不想使用 space- Between 因为它在中间创建了太多空间,并且 flex: 1 需要很长时间才能对齐。我该如何解决这个问题?
.info {
display: flex;
color: #FFFFFF;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
margin-top: 40px;
gap: 12px;
}
.personal {
display: flex;
flex-direction: column;
justify-content: space-around;
text-indent: 12px;
gap: 6px;
}
.info ul {
display: flex;
list-style-type: none;
}
.info ul li {
font-weight: 400;
}
.experience {
color: #282726;
background-color: #D6CAB0;
}
.personal-experience {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-around;
gap: 24px;
}
<section class="experience">
<h1>Experience & Education</h1>
<div class="personal-experience">
<div class="work-experience">
<div class="info">
<h2>SOFTWARE ENGINEER</h2>
<ul class="personal">
<li>MABUHAY INCORPORATED</li>
<li>(NOVEMBER 2020 - APRIL 2024)</li>
</ul>
</div>
<div class="info">
<h2>FRONT END DEVELOPER</h2>
<ul class="personal">
<li>NARRA INCORPORATED</li>
<li>(DECEMBER 2019 - NOVEMBER 2020)</li>
</ul>
</div>
</div>
<div class="education">
<div class="info">
<h2>BACHELOR DEGREE - BSCS</h2>
<ul class="personal">
<li>YEAR 2015 - 2019</li>
<li>SCHOOL: UNIVERSIDAD DE SAN JUAN</li>
<li>ADDRESS: CANLAUN LAGAYAN CITY FINLAND</li>
</ul>
</div>
</div>
</div>
</section>
您可以尝试 flex-grow 并在工作和教育容器上设置最大宽度...
.info {
display: flex;
color: #FFFFFF;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
margin-top: 40px;
gap: 12px;
}
.personal {
display: flex;
flex-direction: column;
justify-content: space-around;
/*
text-indent: 12px;
*/
gap: 6px;
}
.info ul {
display: flex;
list-style-type: none;
}
.info ul li {
font-weight: 400;
}
.experience {
color: #282726;
background-color: #D6CAB0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.personal-experience {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-around;
gap: 24px;
border: 1px solid black;
padding: 0.2rem;
}
.work-experience, .education {
border: 1px solid black;
flex-grow: 1;
max-width: 500px;
}
<section class="experience">
<h1>Experience & Education</h1>
<div class="personal-experience">
<div class="work-experience">
<div class="info">
<h2>SOFTWARE ENGINEER</h2>
<ul class="personal">
<li>MABUHAY INCORPORATED</li>
<li>(NOVEMBER 2020 - APRIL 2024)</li>
</ul>
</div>
<div class="info">
<h2>FRONT END DEVELOPER</h2>
<ul class="personal">
<li>NARRA INCORPORATED</li>
<li>(DECEMBER 2019 - NOVEMBER 2020)</li>
</ul>
</div>
</div>
<div class="education">
<div class="info">
<h2>BACHELOR DEGREE - BSCS</h2>
<ul class="personal">
<li>YEAR 2015 - 2019</li>
<li>SCHOOL: UNIVERSIDAD DE SAN JUAN</li>
<li>ADDRESS: CANLAUN LAGAYAN CITY FINLAND</li>
</ul>
</div>
</div>
</div>
</section>