How to force Flex Grid width?

0

Issue

In my Angular project, I have the following divs in an HTML page but due to some padding and margins, I have not managed to locate 2 div in one row. Similar problems are encountered using different size of flexgrid / flexbox and I need to be clarified how to force it? I do not want to horizontal scrollbar to be visible and I tried to set width as 100% for outer divs. Any help pls?

<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>  

enter image description here

Solution

please see below example.

.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>

To force width, you can use flex-basis:100% property on .p-grid
In g-col use flex-grow:1 for equal columns width

Answered By – Optimum Creative

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More