文字放大了flexbox容器 [英] text enlarges the flexbox container

问题描述

我不知道该怎么办，因为文本不会放大flex容器.

I don't know how to do for the text not enlarges the flex container.

如果当 @media 是 @media屏幕且(最小宽度:600像素)时，我用文本填充一个框，则此框大于50％.而且我想保持与框为空时相同的百分比.

If I fill one box with text when the @media is @media screen and (min-width:600px) this box is bigger than 50%. And I want to keep the same percent that when the boxes are empty.

这是代笔: 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>

推荐答案

如果当 @media 是 @media屏幕且(最小宽度:600像素)时，我用文本填充一个框，则此框大于50％.而且我想保持与框为空时相同的百分比.

If I fill one box with text when the @media is @media screen and (min-width:600px) this box is bigger than 50%. And I want to keep the same percent that when the boxes are empty.

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

You have flex: 1 0 50% applied to each flex item in the media query. However, the flex container is changed in the media query to column-direction. Therefore, the 50% flex-basis in the flex property refers to height not width. And when you add text to each box, the height remains at 50%, but the width increases.

您的代码:

@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％(带或不带文本)，则需要对代码进行一些调整.

So if you want each box to be at 50% width (with or without text), you need to make some adjustments to your code.

修改后的代码:

.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 */
    }
}

演示

如果文本垂直溢出框，则可以使用 溢出 和

If you have text that overflows a box vertically, you can manage the excess with properties such as overflow and box-sizing.

这篇关于文字放大了flexbox容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！