KNACSS/less/_02-layout.less

/* ----------------------------- */
/* ==layout and modules          */
/* ----------------------------- */

/* module, gains superpower "BFC" Block Formating Context */
.@{kna-namespace}mod,
.@{kna-namespace}bfc {
  overflow: hidden;
}

/* blocks that needs to be placed under floats */
.clear,
.@{kna-namespace}line,
.@{kna-namespace}row {
  clear: both;
}

/* blocks that must contain floats */
.clearfix,
.@{kna-namespace}line {
  &::after {
    content: "";
    display: table;
    clear: both;
    border-collapse: collapse;
  }
}

/* simple blocks alignment */
.@{kna-namespace}left {
  margin-right: auto;
}

.@{kna-namespace}right {
  margin-left: auto;
}

.@{kna-namespace}center {
  margin-left: auto;
  margin-right: auto;
}

/* text and contents alignment */
.@{kna-namespace}txtleft {
  text-align: left;
}

.@{kna-namespace}txtright {
  text-align: right;
}

.@{kna-namespace}txtcenter {
  text-align: center;
}

/* floating elements */
.@{kna-namespace}fl {
  float: left;
}

img.@{kna-namespace}fl {
  margin-right: @small-value;
}

.@{kna-namespace}fr {
  float: right;
}

img.@{kna-namespace}fr {
  margin-left: @small-value;
}

img.@{kna-namespace}fl,
img.@{kna-namespace}fr {
  margin-bottom: @tiny-value;
}

/* table layout */
.@{kna-namespace}row {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.@{kna-namespace}row > *,
.@{kna-namespace}col {
  display: table-cell;
  vertical-align: top;
}

/* no table-cell for script tag when body is a .row */
body > script {
  display: none !important;
}

/* inline-block */
.@{kna-namespace}inbl {
  display: inline-block;
  vertical-align: top;
}

/* flexbox layout
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/

[class*="@{kna-namespace}flex-container"],
.@{kna-namespace}flex-container {
  display : flex;
  flex-wrap: wrap;
}

.@{kna-namespace}flex-container-h {
  flex-direction: row;
}

.@{kna-namespace}flex-container-v {
  flex-direction: column;
}

.@{kna-namespace}flex-item-fluid {
  flex: 1;
}

.@{kna-namespace}flex-item-first {
  order : -1;
}

.@{kna-namespace}flex-item-medium {
  order : 0;
}

.@{kna-namespace}flex-item-last {
  order : 1;
}

.@{kna-namespace}flex-item-center {
  margin: auto;
}