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用于相等的列宽

Answer 2

如果需要将“装订线”保持在固定宽度，可以采取以下操作（可以调整商品的边框大小和容器上的边框以进行更改，也可以将边框设置为透明因此不会干扰您可能拥有的背景）：

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

您可以向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...

如何强制Flex网格宽度？

3 个答案: