CSS Flex Flow in Multiple Columns Similar to float:top
January 8, 2024•74 words
float:top doesn't exist, flex layout can make something similar to it.
This trick is used in Netblen MOS new tab columns.
Sample: https://jsbin.com/gijiniqani/edit?html,css,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div style="height:52px; display:flex; flex-direction:column;
flex-wrap:wrap; align-content:flex-start;">
<span style="height:25px;">asdf1</span>
<span style="height:25px;">asdf2</span>
<span style="height:25px;">asdf3</span>
<span style="height:25px;">asdf4</span>
<span style="height:25px;">asdf5</span>
</div>
</body>
</html>
CSS
span {
margin-top:1px; margin-right:1px; background:yellow;
width:100px; display:flex;
}
How it looks like:
