ฉันมี flexbox ซ้าย - ขวา:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 70vh;
min-height: 325px;
max-height:570px;
}<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>ปัญหาคือเด็กที่ถูกต้องไม่แสดงพฤติกรรมตอบสนอง เพื่อให้เจาะจงฉันต้องการให้มันเต็มความสูงของกระดาษห่อหุ้ม
จะทำอย่างไรให้สำเร็จ?
คำตอบ:
ลูกของคอนเทนเนอร์ row-flexbox เติมพื้นที่แนวตั้งของคอนเทนเนอร์โดยอัตโนมัติ
ระบุflex: 1;สำหรับเด็กถ้าคุณต้องการให้เต็มพื้นที่แนวนอนที่เหลือ:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>flex: 1;สำหรับเด็กทั้งสองหากคุณต้องการให้พวกเขาเติมพื้นที่แนวนอนในจำนวนเท่ากัน:.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > div
{
flex: 1;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
}<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>flexเป็นสถานที่ให้บริการจดชวเลขสำหรับflex-grow, และflex-shrink เทียบเท่ากับ. flex-basisflex: 1;flex-grow: 1;
align-items: stretch;ไม่จำเป็นต้อง
background-colorสำหรับเด็กหรือตั้งค่าalign-items: centerในกระดาษห่อหุ้ม