Как заставить ширину Flex Grid?

Question

В моем проекте Angular у меня есть следующие div на странице HTML, но из-за некоторых отступов и полей мне не удалось найти 2 div в одной строке. Подобные проблемы возникают при использовании разных размеров flexgrid / flexbox, и мне нужно уточнить, как его форсировать? Я не хочу, чтобы горизонтальная полоса прокрутки была видимой, и я попытался установить ширину как 100% для внешних элементов. Любая помощь, пожалуйста?

<div class="p-grid">
    <div class="p-col-6">
        <div class="" ></div>
    </div>

    <div class="p-col-6">
        <div class="" ></div>
    </div>

    <div class="p-col-6">
        <div class="" ></div>
    </div>

    <div class="p-col-6">
        <div class="" ></div>
    </div>
</div>  

Answer 1

Вот что вы можете сделать, если вам нужно, чтобы ваш «желоб» оставался на фиксированной ширине (вы можете изменить размер границ для элементов и отступы на контейнере, чтобы изменить его, вы также можете установить границу прозрачной так что это не мешает вашему возможному фону):

.p-grid {
  width: 100%;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 10px;
}

.p-col-6 {
  border: 10px solid white;
  width: 50%;  
  padding: 20px;
  box-sizing: border-box;
  background-color: red;
}

<div class="p-grid">
    <div class="p-col-6">
        <div class="" >
          <p>Some Content</p>          
      </div>
    </div>

    <div class="p-col-6">
        <div class="" >
          <p>Some Content</p>
      </div>
    </div>

    <div class="p-col-6">
        <div class="" >
          <p>Some Content</p>
      </div>
    </div>

    <div class="p-col-6">
        <div class="" >
          <p>Some Content</p>          
      </div>
    </div>
</div>  

Answer 2

Вы можете добавить другой класс к p-col-6, который переопределяет ширину.Тогда просто посчитайте 50% - отступ в пикселях.Что-то вроде

.p-col-6.padding-override{
   width: calc(50% - 10px);//if your total right & left padding was 10px on the child div
}



<div class="p-grid">
    <div class="p-col-6 padding-override">
         <div class="" ></div>
    </div>

    <div class="p-col-6 padding-override">
        <div class="" ></div>
    </div>

    //etc...

Answer 3

см. Пример ниже.

.p-grid{
border: 2px solid red;
padding: 10px;
display:flex;
flex-wrap: wrap; /* This will control child items from over flowing */
box-sizing: border-box;
}

.p-col-6{
box-sizing: border-box;
  padding: 20px;
  border: 2px solid green;
  flex: 1 0 50%; /* For equal widths in columns */ 
  margin-bottom: 5px;
  max-width: 50%;
}

<div class="p-grid">
  <div class="p-col-6"> 
  </div>
  <div class="p-col-6"> 
  </div>
</div>

<h1> 
See below example for 4 divs in  two rows
</h1>

<div class="p-grid">
  <div class="p-col-6"> 
  </div>
  <div class="p-col-6"> 
  </div>
  <div class="p-col-6"> 
  </div>
    <div class="p-col-6"> 
  </div>
</div>

Чтобы задать ширину, вы можете использовать свойство flex-basis:100% в .p-grid В g-col используйте flex-grow:1 для одинаковой ширины столбцов