Skip to main content

Flexbox System

Flex Containers​

In Basil.css, the .flex-row and .flex-column class establishes a flex container.

.flex-row {
  display: flex;
}

Elements within a flex container become flex items.

To switch to a column-based flex container, you can use the .flex-column class.

.flex-column {
  display: flex;
  flex-direction: column;
}

Flex Direction and Wrapping​

To change the flex direction and wrapping, use .flex-row-wrap, .flex-row-nowrap, .flex-column-wrap, and .flex-column-nowrap.

.flex-row-wrap {
  flex-flow: row wrap;
}
.flex-row-nowrap {
  flex-flow: row nowrap;
}
.flex-column-wrap {
  flex-flow: column wrap;
}
.flex-column-nowrap {
  flex-flow: column nowrap;
}

Justify and Align​

.justify-start, .justify-center, .justify-end, .justify-between, and .justify-around can be used to set the justify-content property.

.align-start, .align-center, .align-end, .align-baseline, and .align-stretch can be used to set the align-items property.

.justify-start {
  justify-content: flex-start;
}
.align-start {
  align-items: flex-start;
}

Large screens​

For larger screens (minimum width of 764px), use the .big:prefix to change the layout. The functionality is the same as the .flex class.

@media (min-width: 764px) {
  .big:flex {
    display: flex;
  }
}