CSS избегать положения над другим, используя Flex

Question

Мне нужно расположить три столбца, я использую flex, но мне нужно избегать того, чтобы один div располагался над другим div.

Как это можно сделать?

В моей попытке третий div выше второго div.

Это моя попытка:

<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>

Answer 1

При использовании flex вы, вероятно, захотите использовать flex-basis вместо width.

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

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

В чем разница между flex-основе и шириной?

<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>