3

I'm trying to use flex to align buttons on the same line : the button "Back" should be at the left and the button "Continue" at the right (end of the line).

.footer {
    display: flex;
}

.back {
    align-content: flex-start;
}

.continue {
    align-content: flex-end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div className={"footer"}>
     <Button className={"back"}> Back </Button>
     <Button className={"continue"} >Continue</Button>
</div>

But this is not working, what I am missing ?

Mohamed Taboubi
  • 6,663
  • 11
  • 55
  • 87
  • make the footer div the full width of the page (width: 100%) and then set the CSS style for each button to float: left and float: right – Kevbo Mar 15 '18 at 19:14

3 Answers3

11

You can use justify-content: space-between; on the flex container to generate the desired layout:

.footer {
    display: flex;
    justify-content: space-between;
}

.back {
}

.continue {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div class="footer">
     <Button className={"back"}> Back </Button>
     <Button className={"continue"} >Continue</Button>
</div>
Hunter McMillen
  • 59,865
  • 24
  • 119
  • 170
2

The align-content property, as well as align-items and align-self, position flex items along the cross axis of the flex container.

With flex-direction: row (the default setting in CSS), the cross axis is vertical. So in your code you're attempting to pin the items to the top and the bottom, not the left and right. (Note that the flex-direction default in React Native is column.)

For main axis alignment use the justify-content property.

More details here:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
2

Use float to align buttons.

HTML

<div class="footer">
     <button class="back">Back</button>
     <button class="continue">Continue</button>
</div>

CSS

.back {
   float: left;
}

.continue {
   float: right;
}
Akshay Kothekar
  • 91
  • 1
  • 6
  • 1
    The question is about solving the given situation using flex. However, using the css floating properties in your example will make the container (.footer) collapse. You can use the clearfix technic to fix that, but in my humble opinion, flex is way clear and doesn't deliver undesired side effects for this scenario. – Alex Alvarez Gárciga Nov 17 '20 at 18:43
  • Right, flex property is also a good practice, flex maintain flexible layout with responsiveness. – Akshay Kothekar Jul 03 '21 at 14:34