Sandbox::https://github.com/web-platform-tests/wpt/blob/master/css/css-flexbox/flex-direction-column.html

Repository navigation

<!DOCTYPE html>

<html>

<head>

<title>CSS Flexible Box Test: flex-direction proprety - column</title>

/* Positioned container allows for the self-describing statement to still

be visible in the case of failure */

.container {

position: relative;

display: flex;

flex-direction: column;

background: red;

margin: 1em 0;

border: 1px solid black;

}

span {

display: inline-block;

background: green;

color: white;

margin: 1em;

width: 8em;

}

</style>

</head>

<body>

<p>The test passed if you see all the cells are arraged vertically.</p>

<span>first</span>

<span>second</span>

<span>third</span>

<span>forth</span>

</div>

</body>

</html>