text увеличивает контейнер flexbox

Я не знаю, как сделать, чтобы текст не увеличивал flex-контейнер.

Если я заполню одно поле текстом, когда @media равно @media screen and (min-width:600px), это поле будет больше 50%. И я хочу сохранить тот же процент, что и при пустых ящиках.

Это codepen: 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>


css flexbox longtext
person user2978441    schedule 27.11.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если я заполню одно поле текстом, когда @media равно @media screen and (min-width:600px), это поле будет больше 50%. И я хочу сохранить тот же процент, что и при пустых ящиках.

Вы применили 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.

person Michael Benjamin    schedule 28.11.2015