✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Flex display on Div

Hi there,
I’m trying to reproduce a CSS style of flex display using Dash plotly.
Here is the code pen : https://codepen.io/origamid/pen/qmrOOw

here is my code snippet:

import dash
import dash_core_components as dcc
import dash_html_components as html

prod = False

app = dash.Dash(
    __name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}]
server = app.server

# empty fig para dcc.graph
# Create app layout
app.layout = html.Div(

        ], className="container wrap-reverse"                            

# Main
if __name__ == "__main__" and prod == True:
    app.run_server(host="", port=8080, debug=True, threaded=True)
if __name__ == "__main__" and prod == False:
    app.run_server(port=9000, debug=True)

and here is the CSS asset i’m using:

.nowrap {
	flex-wrap: nowrap;
.wrap {
	flex-wrap: wrap;
.wrap-reverse {
	flex-wrap: wrap-reverse;

/* Flex Container */
.container {
	max-width: 330px;
	margin: 0 auto;
	display: flex;
	border: 1px solid #ccc;
	flex-wrap: wrap;
/* Flex Item */
.item {
	/* O flex: 1; é necessário para que cada item se expanda ocupando o tamanho máximo do container. */
	flex: 1;
	margin: 5px;
	background: tomato;
	text-align: center;
	font-size: 1.5em;
	width: 100px;

h1 {
	text-align: center;
	margin: 20px 0 0 0;
	font-size: 1.25em;
	font-weight: normal;

body {
	font-family: monospace;
	color: #333;

The result i’m trying to get is the third example:

so I could get a final result like this:

Thx for the help in advance!