CSS avoid position above another using Flex

Question

I need to position three columns, I am using flex, but I need to avoid that one div be positioned above another div.

How can it be done ?

In my attempt the third div is above the second div.

This is my attempt:

<div style="display:flex; flex-flow: row nowrap;" ng-repeat="hour in Hours">
  <div style="width:10%">
    <span><i class="fa fa-clock" aria-hidden="true"></i> {{Hours.movieSession}}</span>
  </div>
  <div style="width:10%">
    <img src="img/3d_i.svg" ng-if="Hour.IMAX == 1 && Hour['3D'] == 1">
    <img src="img/i2.svg" ng-if="Hour.IMAX == 1 && Hour['3D'] == 0">
    <img src="img/3d.svg" ng-if="Hour['3D'] == 1 && Hour.IMAX == 0">
  </div>
  <div style="width:10%">
    <a href="{{Hour.SiteHref}}" target="_blank">
      <i class="fa fa-dollar-sign"></i> Buy
    </a>
  </div>
</div>

So you want your div as columns, then how can they be above or below ? They can be by side as they are now. — Utsav Patel, Mar 27 '19 at 12:27
your flex childs are in row. How can they be above an other flex child? To the question -> You can use [order](https://developer.mozilla.org/de/docs/Web/CSS/order) for your flex-childs to change their order — d-h-e, Mar 27 '19 at 12:30

score 2 · Accepted Answer · answered Mar 27 '19 at 12:51

With flex, you probably want to use flex-basis instead of width.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

https://gedd.ski/post/the-difference-between-width-and-flex-basis/

What are the differences between flex-basis and width?

<div style="display:flex; flex-flow: row nowrap;" ng-repeat="hour in Hours">
  <div style="flex-basis:10%">
    <span><i class="fa fa-clock" aria-hidden="true"></i> {{Hours.movieSession}}</span>
  </div>
  <div style="flex-basis:10%">
    <img src="img/3d_i.svg" ng-if="Hour.IMAX == 1 && Hour['3D'] == 1">
    <img src="img/i2.svg" ng-if="Hour.IMAX == 1 && Hour['3D'] == 0">
    <img src="img/3d.svg" ng-if="Hour['3D'] == 1 && Hour.IMAX == 0">
  </div>
  <div style="flex-basis:10%">
    <a href="{{Hour.SiteHref}}" target="_blank">
      <i class="fa fa-dollar-sign"></i> Buy
    </a>
  </div>
</div>

Yes @ritaj the second collumns can vary of width or have no element so i want to let always the same width for the second collumn — Ângelo Rigo, Mar 27 '19 at 12:55
You always want the same width for the second column? Then use `flex: 0 0 10%` to always have it 10% width. https://developer.mozilla.org/en-US/docs/Web/CSS/flex — Roberto Zvjerković, Mar 27 '19 at 12:56

CSS avoid position above another using Flex

1 Answers1