EN
CSS - two-column flexbox layout
0 points
In this article, we would like to show you how to make a two-column flexbox layout in CSS.
In this example, we present how to create two-column flexbox layout.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
height: 300px;8
background: #3085d6;9
border: 1px solid black;10
box-shadow: 3px 3px 20px 0px grey;11
12
display: flex; /* <----- required */13
flex-flow: column wrap; /* <----- required */14
justify-content: flex-start; /* <----- required */15
}16
17
.item {18
background: #ffc353;19
border: 1px solid black;20
border-radius: 5px;21
margin: 3px;22
height: 50px;23
text-align: center;24
line-height: 50px;25
26
max-width: 50%; /* <--- keeps two-column layout when you have only 1 item */27
}28
29
</style>30
</head>31
<body>32
<div class="container">33
<div class="item">1</div>34
<div class="item">2</div>35
<div class="item">3</div>36
<div class="item">4</div>37
<div class="item">5</div>38
<div class="item">6</div>39
<div class="item">7</div>40
<div class="item">8</div>41
</div>42
</body>43
</html>