EN
CSS - how to align element to left and right with flex?
13 points
Using Flexbox it is possible to align child elements in few ways.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.parent {7
border: 1px solid red;8
display: flex;9
}10
11
.child {12
padding: 10px;13
}14
15
.left-child {16
background: lightgreen;17
flex: 0;18
}19
20
.spacer {21
background: ivory;22
flex: auto;23
}24
25
.right-child {26
background: lightblue;27
flex: 0;28
}29
30
</style>31
</head>32
<body>33
<div class="parent">34
<div class="child left-child">LEFT</div>35
<div class="child spacer">SPACER</div>36
<div class="child right-child">RIGHT</div>37
</div>38
</body>39
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.parent {7
border: 1px solid red;8
display: flex;9
justify-content: space-between;10
}11
12
.child {13
padding: 10px;14
}15
16
.left-child {17
background: lightgreen;18
flex: 0;19
}20
21
.right-child {22
background: lightblue;23
flex: 0;24
}25
26
</style>27
</head>28
<body>29
<div class="parent">30
<div class="child left-child">LEFT</div>31
<div class="child right-child">RIGHT</div>32
</div>33
</body>34
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.parent {7
border: 1px solid red;8
display: flex;9
}10
11
.child {12
padding: 10px;13
}14
15
.left-child {16
margin-right: auto;17
background: lightgreen;18
flex: 0;19
}20
21
.right-child {22
/* margin-left: auto; */23
background: lightblue;24
flex: 0;25
}26
27
</style>28
</head>29
<body>30
<div class="parent">31
<div class="child left-child">LEFT</div>32
<div class="child right-child">RIGHT</div>33
</div>34
</body>35
</html>