Question

我有一个容器，里面有两个容器。

<div id="container">

<div id="box1">
</div>

<div id="box2">
</div>

<div id="box3...4...">
</div>

</div>

我希望主容器跨越页面的整个宽度。（宽度：100％;）

我希望两个子容器均匀分布并填充页面上的水平空间。

我希望能够添加说第三个甚至是第四个儿童容器并让它们全部填充从50％50％到~33％~33％~33％到25％25％25％25％等等...

如果有办法轻松做到这一点？对不起，如果我没有解释清楚，这是我第一次提问。

Answer 1

只需在容器上指定flex，然后在子元素上display:flex（或flex:1，就这样使用flex-grow:1，只需使用.container { display: flex; } .container .box { flex: 1; /*or also `flex-grow:1` */ min-height: 100px; border: 1px solid red; }：

<!-- container with 2 elements -->
<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>
<!-- container with 3 elements -->
<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>
<!-- container with 4 elements -->
<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>

</div>

@Override
public boolean onTouchEvent(MotionEvent event) {

    switch(event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
            myPoint.set((int)event.getX(), (int)event.getY());
    }
    return true;
}

参考文档：

flex-grow CSS属性指定flex的flex增长因子项目。它指定了Flex容器内的空间量 项目应该占用。弹性项的弹性增长因子是相对的 在flex-container中达到其他孩子的大小。

您可以详细了解flex property和flex-grow property

div的智能/液体内联间距

1 个答案: