将Flex容器分成相等宽度的部分

debugcn 发表于 Dev

堆栈显示

我试图将内容2分成2个相等的宽度div，以填充整个内容2的高度，但这样做失败。怎么会达到目的？

<ion-view title="Welcome">
  <ion-content has-header="true" style="display: flex; flex-flow: column;">
    <div style="height: 100%">
      <div style="background-color: red;">
        Content 1 (height based on content)
      </div>
      <div style="background-color: blue; flex: 2;">
        <div style="display: inline-block;">
          <div style="width: 50%; height: 100%; background: gray;">
            Content 2(part 1)
          </div>
          <div style="width: 50%; height: 100%; background: tomato;">
            Content 2(part 2)
          </div>
        </div>
      </div>
      <div>
        <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
      </div>
    </div>
  </ion-content>
</ion-view>

苏瓦吉亚尔

<ion-content scroll="false" has-header="true" style="display: flex; flex-flow: column;height:100vh; ">
    <div style="background-color: red;">
      Content 1 (height based on content)
    </div>
    <div style="background-color: blue; display:flex;flex-direction:row;height:100vh;">
    <div style="flex:1;hight:100vh;">
    content 2 part 1
    </div>
     <div style="flex:1;">
      Content 2 part 2
    </div>


    </div>
    <div>
      <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
    </div>
  </ion-content>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。