我有这个代码:https://codepen.io/MH-123/pen/wvZJPPZ?editors=0100 随着屏幕宽度变小,我希望左边的 2 个框 A 和 B 缩小其宽度,但我不知道如何实现这一点,因为我是 Flexbox 的新手。
flex-shrink 1
对他们不起作用。我不确定我的初始设置是否完全错误?有什么办法可以让我快速调整吗?
谢谢!
/* BASE STYLES */
:root {
--clr-dark: #0f172a;
--clr-light: #f1f5f9;
--clr-accent: #e11d48;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
line-height: 1.6;
word-spacing: 1.4px;
font-family: "Roboto", sans-serif;
color: var(--clr-dark);
background-color: var(--clr-light);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 50%;
height: 650px;
margin: 0 auto;
border: 10px solid var(--clr-dark);
}
.item {
background-color: #fb7185;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
/* END OF BASE STYLES */
.container {
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.item-1 {
height: 30%;
width: 50%;
display: flex;
}
.item-a {
height: 100%;
width: 50%;
}
.item-b {
height: 100%;
width: 50%;
}
.item-2 {
height: 55%;
width: 50%;
}
.item-3 {
height: 55%;
width: 45%;
}
.item-4 {
height: 30%;
width: 45%;
}
@media all and (max-width: 600px) {
.container {
flex-flow: column wrap;
padding: 5% 1% 2% 1%;
}
.item-1 {
height: 20%;
width: 100%;
flex-direction: column
}
.item-a, .item-b {
height: 50%;
width: 100%;
}
.item-2 {
height: 35%;
width: 100%;
}
.item-3 {
height: 30%;
width: 100%;
}
.item-4 {
height: 7.5%;
width: 100%;
}
}
@media all and (max-height: 650px) {
.container {
background-color: pink;
flex-flow: column nowrap;
padding: 5% 1% 2% 1%;
}
.item-1 {
height: 50%;
width: 100%;
flex-direction: column
}
.item-a, .item-b {
height: 80%;
width: 100%;
}
.item-2 {
height: 35%;
width: 100%;
}
.item-3 {
height: 30%;
width: 100%;
}
.item-4 {
height: 7.5%;
width: 100%;
}
}
<div class="container">
<div class="item item-1">
<div class="item item-a">
a1
</div>
<div class="item item-b">a2</div>
</div>
<div class="item item-2">B</div>
<div class="item item-3">C</div>
<div class="item item-4">
D
</div>
</div>
试试这个:
.item-a,
.item-b {
height: 100%;
flex: 1; /* Add this line */
}
随着屏幕宽度的减小,框(A 和 B)的宽度会适当缩小,同时保持其高度。