Skip to main content

Layout Mixins

Defined in less/_layout.less.

.flex​

Full flexbox shorthand.

.flex(@fd: row, @align: center, @js: space-between, @gap: var(--gap))
ParamDefaultDescription
@fdrowflex-direction
@aligncenteralign-items
@jsspace-betweenjustify-content
@gapvar(--gap)gap
.header {
  .flex(row, center, space-between, 20px);
}

.flex-i​

Same as .flex but sets display: inline-flex.

.flex-i(@fd: row, @align: center, @js: space-between, @gap: var(--gap))

.flex-center​

Centered flex shorthand.

.flex-center(@direction: row, @gap: var(--gap))
.btn-group {
  .flex-center(row, 10px);
}

.flex-stretch​

Stretched flex with space-between.

.flex-stretch(@direction: row, @gap: var(--gap))

.grid​

CSS Grid shorthand.

.grid(@row: auto, @col: repeat(2, 1fr), @gap: var(--gap))
.card-grid {
  .grid(auto, repeat(3, 1fr), 24px);
}

.column​

CSS multi-column layout.

.column(@count: 3, @width: 290px, @gap: var(--col-gap))

Automatically prevents children from breaking across columns.

.news-list {
  .column(2, 320px, 30px);
}

.layout​

Centered max-width container.

.layout(@width: 1500px, @padding: 10px)
.wrapper {
  .layout(1200px, 20px);
}