Flex display on Div

Dash Python
1

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(
    [

        html.Div([
                    html.Div(["T11111of1111"],className="item"),
                    html.Div(["22222of2222"],className="item"),
                    html.Div(["TesteDoItem1"],className="item")
        ], className="container wrap-reverse"                            
        )
]
)

# Main
if __name__ == "__main__" and prod == True:
    app.run_server(host="0.0.0.0", 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:
result

so I could get a final result like this:

final_result
final_result892×231 7.89 KB

Thx for the help in advance!