2

我不知道如何处理不放大 flex 容器的文本。

如果我在这个框大于 50%@media时用文本填充一个框。@media screen and (min-width:600px)我想保持与空箱相同的百分比。

这是代码笔：http ://codepen.io/elcollage_com/pen/LpoGVN?editors=110

谢谢。

这个例子：

html, body{
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:flex-start;
    align-items:stretch;
    height: 100%;
}

.left {order:2; background:red; flex-basis:100%;}
.middle {order:1; background: green; flex-basis:100%;}
.right {order:3; background:yellow; flex-basis:100%;}


@media screen and (min-width:600px) {
   .container {
       flex-flow: column wrap;
   } 

    .left {
      flex: 1 0 50%;
      order: 1;
          
    }
    .middle {
      flex: 1 0 50%;
      order: 3;
        
    }
    .right {
      flex: 1 0 50%;
      order: 2;
        
    }
}


@media screen and (min-width:900px) {
   .container {
       flex-flow: row nowrap;
   } 

    .left {
        flex:1 0 37%;
        order:1;
    }
    .middle {
        flex:1 0 21%;
        order:2;
    }
    .right {
        flex:1 0 37%;
        order:3;
    }
}
<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

4

1 回答 1

1

如果我在这个框大于 50%@media时用文本填充一个框。@media screen and (min-width:600px)我想保持与空箱相同的百分比。

您已flex: 1 0 50%应用到媒体查询中的每个弹性项目。但是，flex 容器在媒体查询中更改为column-direction。因此，属性中的 50%flex-basis是flex指height不width。当您向每个框添加文本时，高度保持在 50%，但宽度会增加。

你的代码：

@media screen and (min-width:600px) {
   .container {
       flex-flow: column wrap; /* flex container changed to column direction */
   } 

    .left {
      flex: 1 0 50%; /* 50% refers to height not width */
      order: 1;

    }
    .middle {
      flex: 1 0 50%;
      order: 3;

    }
    .right {
      flex: 1 0 50%;
      order: 2;    
    }
}

因此，如果您希望每个框的宽度为 50%（带或不带文本），则需要对代码进行一些调整。

修改后的代码：

.container {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:flex-start;
    align-items:stretch;
    height: 100%;
    width: 100%; /* new */
}

@media screen and (min-width:600px) {
   .container {
       flex-flow: column wrap;
   } 

    .left {
      flex: 1 0 50%;
      order: 1;
      width: 50%; /* new */

    }
    .middle {
      flex: 1 0 50%;
      order: 3;
      width: 50%; /* new */

    }
    .right {
      flex: 1 0 50%;
      order: 2;    
      width: 50%; /* new */
    }
}

演示

如果您有垂直溢出框的文本，您可以使用 和 等属性管理多余的overflow文本box-sizing。

于 2015-11-28T00:23:04.333 回答