More than 5 Columns in a Row – with Flexbox easy to create.
Important is that the flex container must be the direct parent of the items.
On this case i gave a Custom Class to the color-section : eight-columns
.eight-columns .entry-content-wrapper.clearfix {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.eight-columns .entry-content-wrapper .flex_column {
flex: 0 1 10%;
margin: 0 !important;
}
On this case i gave a Custom Class to the color-section : ten-columns
and the columns are allowed to wrap if space is less than needed. Wrap normal and on that case they go to the left side.
Columns are not allowed to grow ( flex : 0 1 140px) when they have more space than needed
.ten-columns .entry-content-wrapper.clearfix {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.ten-columns .entry-content-wrapper::before,
.ten-columns .entry-content-wrapper::after {
display: none;
}
.ten-columns .entry-content-wrapper .flex_column {
flex: 0 1 25%;
margin: 0;
padding: 1%;
width: unset;
}
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
