Which flex property to place items in the extreme left?

HTML & CSS
1

which property of flex should we use so that we can align the two items in the two extremes?

justify-content: space-evenly;

doesnt work.

2

justify-content: space-between

4 Likes
3

You can also use auto margins to soak up all the space.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test {
	display:flex;
}
.test p:last-child {
	margin-left:auto;
}
</style>
</head>

<body>
<div class="test">
  <p>Item left</p>
  <p>item right</p>
</div>
</body>
</html>
5 Likes
4

@PaulOB
so the take away is that the last child should have the margin-left:auto;

5

Yes a horizontal auto margin effectively pushes the element as far away from anything else as it can. (Vertical margins also do the same for flex items but not for normal elements).

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.