Visual flexbox builder. Click items to edit individual properties.
/* Container */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
}
/* Children */
.flex-item-1 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
align-self: auto;
}
.flex-item-2 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
align-self: auto;
}
.flex-item-3 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
align-self: auto;
}