Поля в столбцах с сеткой flexbox

Question

У меня простой вопрос о сетке с flexbox, но я не могу ее решить

У меня есть этот код:

<div class="grid-items row">
<div class="item item-50 col-xs-6">
    <div class="text">
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
</div>

<div class="item col-xs-3">
    <h2>Lorem Ipsum is simply dummy text</h2>
</div>
<div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
</div>

Три столбца, каждый столбец имеет зазор в 30 пикселей, ширина первого столбца составляет 50%, а ширина второго и третьего столбцов составляет 25%. Очевидно, маржа вызывает переполнение в третьем столбце. Можно ли исправить это без изменения ширины? Это необходимо, потому что столбцы имеют фон.

В этом упражнении я не могу изменить HTML только для добавления классов ...

Свойства классов столбцов похожи до:

.col-xs-3 {
 flex-basis: 25%;
 max-width: 25%;
 }

Answer 1

непонятно, используете ли вы bootstrap или это домашнее class.

с чистым CSS flex, если вы хотите добавить margin, не используйте flex-basis но flex-grow. Он также работает с любыми значениями box-sizing.

.row {display:flex;}

.item {border:solid;margin:20px;}
.col-xs-6 {flex:6;}/* shorthand reduce to minimal */
.col-xs-3 {flex:3;}

<div class="grid-items row">
<div class="item item-50 col-xs-6">
    <div class="text">
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
</div>

<div class="item col-xs-3">
    <h2>Lorem Ipsum is simply dummy text</h2>
</div>
<div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
</div>

для точки останова, вы можете использовать min-width:90% в своих медиазапросах, чтобы заполнить всю строку, включая поле. Отказ от ответственности: Нужно ли уточнить эту часть? если так, добавьте это к своему вопросу;) пример ниже

.row {
  display: flex;  
  gap: 30px;  /* this can be used instead margin on the child, see caniuse.com where it works 
 only avalaible in FF at this time  in a flex box*/
}

.item {
  border: solid;
}

.col-xs-6 {
  flex: 6
}

.col-xs-3 {
  flex: 3
}

@media screen and (max-width:500px) {/* play the snippet in fullpage to resize window */
  .row {
    flex-wrap: wrap;
  }
  .item {
    min-width: 90%;/* flex-grow will do the next 10% */
  }
}

<div class="grid-items row">
  <div class="item item-50 col-xs-6">
    <div class="text">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    </div>
  </div>

  <div class="item col-xs-3 mlr-30px">
    <h2>Lorem Ipsum is simply dummy text</h2>
  </div>
  <div class="item item-image col-xs-3 ">
    <img src="resources/images/pic1.jpg">
  </div>

Answer 2

Мне кажется, что вы просто должны добавить flex-shrink: 1 ко всем этим классам столбцов (например, .col-xs-3). Это позволит столбцам немного сжаться и поместит все в заданную ширину без переполнения.

Answer 3

Я думаю, что ваша проблема может быть исправлена ​​с помощью определения box-sizing.

Вы можете проверить, как это работает, в следующем примере.

Вот пример различия между ними. Вы можете проверить больше на размер коробки здесь .

#content-box,
#border-box {
  width: 300px;
  height: 100px;
  padding: 30px;
}

#content-box {
  background: red;
  color: white;
  box-sizing: content-box;
}

#border-box {
  background: green;
  color: white;
  box-sizing: border-box;
}

<div id="content-box">I am a 300px wide div using content-box.</div>

<div id="border-box">I am also a 300px wide div, but I am using border-box.</div>