CSS 网格模板区域无法与 Flex 子项正常工作

问题描述 投票：0回答：1

在 

display:flex
元素之一内使用 
grid-template-area
时遇到问题。特别是，我很难理解为什么我在使用 
grid-template-columns
与 
grid-template-area
时看到的行为有所不同。

这是我的示例，第一个框是使用 

grid-template-columns
创建的，第二个框使用 
grid-template-area
创建的。蓝色部分是一个弹性元素：

1号用途：

grid-template-columns: 2fr 5fr;

2号用途：

grid-template-areas: 
    "stage-left2 stage-left2 stage-right2 stage-right2 stage-right2 stage-right2 stage-right2";

它们的比例都是 2:5，不是应该相等吗？

还有一个问题，为什么在第二个示例中黄色区域缩小而不是像第一个示例中那样保持大小等于 2/7？这似乎与蓝色区域是弹性元素有关。当从那里删除 flex 属性时，黄色区域将恢复到正确的大小。

#plan-container{
max-width: 500px;
}

.stage {
    display: grid;
     grid-template-columns: 2fr 5fr;
    border-bottom: 3px solid grey;
    padding-bottom: 10px;
    margin-bottom: 10px;

    
}

.stage-left {
    background-color: yellow;
  display: grid;
  grid-template-rows: 4fr 2fr;
  text-align: center;
  
}

.stage-right {
    background-color: aqua;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}


.stage2 {
    display: grid;
    grid-template-areas: 
    "stage-left2 stage-left2 stage-right2 stage-right2 stage-right2 stage-right2 stage-right2";
    border-bottom: 3px solid grey;
    padding-bottom: 10px;
    margin-bottom: 10px;

    
}

.stage-left2{
grid-area: stage-left2;
background-color: yellow;
display: grid;
  grid-template-rows: 4fr 2fr;
  text-align: center;

}

.stage-right2{
    grid-area: stage-right2;
    background-color: aqua;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.plan-element {
    height: 100px;
      width: 100px;
      border: 1px solid #555;
      
    }
    
    .add-plan-element {
        background-color: aqua;
    }

    .stage-left-numbering {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .stage-left-numbering p {
    font-size: 40px;
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <title>Document</title>
</head>

<body>
    <div id="plan-container">

        <div class="stage">
            <div class="stage-left">
                <div class="stage-left-numbering">
                    <p>1</p>
                </div>
            </div>
            <div class="stage-right">
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element add-plan-element">
                    <p>ADD</p>
                </div>
            </div>

        </div>

        <div class="stage2">
            <div class="stage-left2">
                <div class="stage-left-numbering">
                    <p>2</p>
                </div>
            </div>
            <div class="stage-right2">
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element add-plan-element">
                    <p>ADD</p>
                </div>
            </div>

        </div>




    </div>
</body>

</html>

html css flexbox css-grid
1个回答
0
投票

grid-auto-columns
CSS 属性指定隐式创建的网格列轨道或轨道图案的大小。

所以需要设置

.stage2 { grid-auto-columns: 1fr; }
:

#plan-container{
max-width: 500px;
}

.stage {
    display: grid;
     grid-template-columns: 2fr 5fr;
    border-bottom: 3px solid grey;
    padding-bottom: 10px;
    margin-bottom: 10px;

    
}

.stage-left {
    background-color: yellow;
  display: grid;
  grid-template-rows: 4fr 2fr;
  text-align: center;
  
}

.stage-right {
    background-color: aqua;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}


.stage2 {
    display: grid;
    grid-template-areas: 
    "stage-left2 stage-left2 stage-right2 stage-right2 stage-right2 stage-right2 stage-right2";
    border-bottom: 3px solid grey;
    padding-bottom: 10px;
    margin-bottom: 10px;
    grid-auto-columns: 1fr; /* 👈 */
}

.stage-left2{
grid-area: stage-left2;
background-color: yellow;
display: grid;
  grid-template-rows: 4fr 2fr;
  text-align: center;

}

.stage-right2{
    grid-area: stage-right2;
    background-color: aqua;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}




.plan-element {
    height: 100px;
      width: 100px;
      border: 1px solid #555;
      
    }
    
    .add-plan-element {
        background-color: aqua;
    }

    .stage-left-numbering {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .stage-left-numbering p {
    font-size: 40px;
    }
<div id="plan-container">

        <div class="stage">
            <div class="stage-left">
                <div class="stage-left-numbering">
                    <p>1</p>
                </div>
            </div>
            <div class="stage-right">
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element add-plan-element">
                    <p>ADD</p>
                </div>
            </div>

        </div>

        <div class="stage2">
            <div class="stage-left2">
                <div class="stage-left-numbering">
                    <p>2</p>
                </div>
            </div>
            <div class="stage-right2">
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element">
                </div>
                <div class="plan-element add-plan-element">
                    <p>ADD</p>
                </div>
            </div>

        </div>




    </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.