8col-flex – Webers Testseite

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: left;
    align-items: center;
}

.ten-columns .entry-content-wrapper .flex_column {
    flex: 0 1 140px;
    margin: 0;
    padding: 20px;
}

On this case i gave a Custom Class to the color-section : two-columns
( and allthough we got here enfold 1/5th columns )

see what happend on less space – the right column is now on top of the first one ! due to wrap-reverse

and it is allowed to grow ( flex: 1 1 50%) when space is less

.two-columns .entry-content-wrapper.clearfix {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    align-items: normal;
}


.two-columns .entry-content-wrapper .flex_column {
    flex: 1 1 50%;
    margin: 0;
    padding: 20px;
   min-width: 300px
}