Flexbox, uk-flex-left and uk-flex-right

684 Views Asked by At

Have been using a few hours trying to make flexbox work in Getuikit: https://getuikit.com/docs/flex

Trying to make 1 card show in left side, and 2 cards in right side of the row. Something like this: []........[][]

This is what I got now, but it only align left:

<div class="uk-section uk-background-muted uk-padding-small">
  <div class="uk-container">
    <div class="uk-flex">
      <div class="uk-flex-left">Item 1</div>
      <div class="uk-flex-right">Item 2</div>
      <div class="uk-flex-right">Item 3</div>
    </div>
  </div>
</div>

This works in Bootstrap, but cant seem to find similar functionality for Uikit:

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Hope one of you might be able to help me here.

Thanks, Kenneth.

1

There are 1 best solutions below

0
On

This should work :

 <div class="uk-section uk-background-muted uk-padding-small">
  <div class="uk-container">
    <div class="uk-flex uk-flex-between">
      <div class="uk-flex-left">Item 1</div>
      <div class="uk-flex-right uk-flex">
      <div class="item2">Item 2</div>
      <div class="item3">Item 3</div>
      </div>
    </div>
  </div>
</div>


Flexbox with Uikit