html - 如何强制 Flex Grid 宽度？

Question

在我的 Angular 元素中，我在 HTML 页面中有以下 div，但由于一些填充和边距，我未能在一行中找到 2 个 div。使用不同大小的 flexgrid/flexbox 会遇到类似的问题，我需要澄清如何强制它？我不希望水平滚动条可见，我尝试将外部 div 的宽度设置为 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{
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>

要强制宽度，您可以在 .p-grid 上使用 flex-basis:100% 属性 在 g-col 中使用 flex-grow:1 等宽列宽