Question

你好我有2个包装在容器中的flex项目。我希望包含按钮的div放在父div的底部，但在演示中，div放在兄弟的旁边，这使得底部不用。

<div style="display:flex;flex-direction:row">
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div  style="display:flex;flex-direction:column;border:1px solid green;width:150px" id="child1">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div style="display:flex;flex-direction:row" id="child2">
      <button>Add</button>
    </div>
  </div>
</div>

这就是我创建UI的方式，我希望id为“child1”的div占用父级的最大高度，并且应该将id为“child2”的div放在父div的底部。有人帮助我这样做

Answer 1

如果您只想将盒子放在底部并且当前高度只使用此

，这取决于您想要达到的确切位置

<div style="display:flex;flex-direction:row">
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div  style="display:flex;flex-direction:column;border:1px solid green;width:150px;flex-direction:column; margin:0; margin-top:auto" id="child1">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div style="display:flex;flex-direction:row" id="child2">
      <button>Add</button>
    </div>
  </div>
</div>

这另一个例子将高度增加到父div的100％，而底部空间将不存在。

<div style="display:flex;flex-direction:row">
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
    <div  style="display:flex;flex-direction:column;border:1px solid green;width:150px;flex:1" id="child1">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div style="display:flex;flex-direction:row" id="child2">
      <button>Add</button>
    </div>
  </div>
</div>

Answer 2

将using namespace std; class Sample { int x; static int count; public: void get(); static void showCount(); }; void Sample::get() { cin>>x; ++count; } static void Sample::showCount(){ cout<<"Total No. of Objects :"<<count; } int main() { Sample s1,s2; s1.get(); s2.get(); Sample::showCount(); return 0; }添加到child1的样式中。有关flex属性here

的更多信息

如何将容器中的弹性项目移动到底部？

2 个答案: