Menu
I am trying to split content 2 into 2 equal width div that fill the whole content 2 height but fail in doing so. How could it be acheive?
Plunker: Click here
<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>
217
To center the inner div element we will make the parent a flex container. By adding the display: flex; property we make the section element a flex container allowing us to adjust the layout of the div which is now a flex item. To center out item horizontally we use the justify-content: center; .
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
