Question

大家好，我对flexbox和响应式都有问题.....这张图片：

我将红色部分和黑色部分分别设为100％，但是如您所见，我还没有...我不知道为什么... 我需要在蓝色和红色部分包裹一下，因此我需要为两者修复一个最小值但是如果我使用过flex，也会出现红色和黑色：1 1 100％仍然如图片所示你能帮助我吗？那么，为什么红色和黑色却缺少蓝色和福厦呢？即使我设置为：100％或100vw或flex：1,1，100％...

我的错误在哪里？

body{
    margin: 0 auto;
    background: rgb(16, 235, 235)
}


.item{    
    height: 500px;
    flex:1 1 100%; 
}
.container{
    display: flex;
    flex-flow: row wrap;
    background: red;
    width: 100vw;
}

.item1{
    background: red;
    display: flex;
    flex-flow: row wrap; 
}
.int1item1{
    background: orange;
    flex: 0 1 60%;
    align-self: center;
}
.myText{
    margin-top:50px; 
    text-align: center;
}



.item2{
    background:yellow;
    display: flex;
    flex-flow: row wrap; 
}

.int1Item2{
    background:blue;
    min-width: 200px; 
    flex: 1 1 40%;
}

.int2Item2{
    background:fuchsia;
    min-width: 400px; 
    flex: 1 1 60%;
}

.item3{
    background:black;
}

<div class="container">
   <div class="item item1">
      <div class="int1item1">
         here title
         <div class="myText">
            <h2>Fix part</h2>
            <p>
               here some text
            </p>
            <p>
               here some text
            </p>
         </div>
      </div>
   </div>
   <div class="item item2">
      <div class="int1Item2">
         here a text 
      </div>
      <div class="int2Item2">
         here text
      </div>
   </div>
   <div class="item item3">
   </div>
</div>

这是我的代码的链接：https://repl.it/@matteo1976/test-flex-box

Answer 1

如果您希望将.item1的宽度设置为100％（红色容器），那么我会有点不知所措，那么您就缺少了width属性。从第18行更改为此...

.item1 {background: red;
    display: flex;
    flex-flow: row wrap; 
    width: 100vw;
}

如果这不是您的意思，请告诉我，我会再看一遍。

我在flexbox和响应界面上遇到问题

1 个答案: