Align two elements on the same line using flex: one left and one right

Question

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 ?

Solution 1

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>

Solution 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;
}

Solution 3

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:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Comments

[Hunter McMillen]

I wasn't able to get className to work even with the React imports, so I just changed it to be normal HTML & CSS

[Alex Alvarez Gárciga]

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.

[Akshay Kothekar]

Right, flex property is also a good practice, flex maintain flexible layout with responsiveness.