Nuclear css flexible box properties

Browser support

• Chrome 29.0, 21.0 -webkit-
• Edge 12.0
• Internet Explorer 11.0, 10.0 -ms-
• Firefox 28.0, 18.0 -moz-
• Safari 9.0, 6.1 -webkit-
• Opera 17.0

Flex container properties

Display

Flex items are positioned inside a flex container along a flex line. By default there is only one flex line per flex container.

Specifies the type of box used for an HTML element.

• flex - Displays an element as an block-level flex container.
• inline-flex - Displays an element as an inline-level flex container.

.d-f  { display: flex; }
.d-if { display: inline-flex; }

<div class="d-f">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div>flex item 3</div>
</div>

Flex direction

Specifies the direction of the flexible items.

• row - Default value. The flexible items are displayed horizontally.
• row-reverse - Same as row, but in reverse order.
• column - The flexible items are displayed vertically.
• column-reverse - Same as column, but in reverse order.

Note: If the element is not a flexible item, this property has no effect.

.fxd-r  { flex-direction: row; }
.fxd-rr { flex-direction: row-reverse; }
.fxd-c  { flex-direction: column; }
.fxd-cr { flex-direction: column-reverse; }

<div class="d-f fxd-r">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div>flex item 3</div>
</div>

Justify content

Aligns the flexible container's items horizontally.

• flex-start - Default. Items are positioned at the beginning of the container.
• flex-end - Items are positioned at the end of the container.
• center - Items are positioned at the center of the container.
• space-between - Items are positioned with space between.
• space-around - Items are positioned with space before, between, and after.

Tip: Use the align-items property to align the items on the vertically.

.jc-fs { justify-content: flex-start; }
.jc-fe { justify-content: flex-end; }
.jc-c  { justify-content: center; }
.jc-sb { justify-content: space-between; }
.jc-sa { justify-content: space-around; }

<div class="d-f jc-fs">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div>flex item 3</div>
</div>

Align items

Specifies the default alignment for items inside the container.

• stretch - Default. Items are stretched to fit the container.
• center - Items are positioned at the center of the container.
• flex-start - Items are positioned at the beginning of the container.
• flex-end - Items are positioned at the end of the container.
• baseline - Items are positioned at the baseline of the container.

Tip: Use align-self property of each item to override align-items property.

.ai-s  { align-items: stretch; }
.ai-c  { align-items: center; }
.ai-fs { align-items: flex-start; }
.ai-fe { align-items: flex-end; }
.ai-b  { align-items: baseline; }

<div class="d-f ai-s">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div>flex item 3</div>
</div>

Flex wrap

Specifies whether the flexible items should wrap or not.

• wrap - Default value. The flexible items are displayed horizontally.
• nowrap - Same as row, but in reverse order.
• wrap-reverse - The flexible items are displayed vertically.

Note: If the element is not a flexible item, this property has no effect.

.fxw-w  { flex-wrap: wrap; }
.fxw-n  { flex-wrap: nowrap; }
.fxw-wr { flex-wrap: wrap-reverse; }

<div class="d-f fxw-w">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div>flex item 3</div>
</div>

Align content

Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

• stretch - Default value. Lines stretch to take up the remaining space.
• center - Lines are packed toward the center of the flex container.
• flex-start - Lines are packed toward the start of the flex container.
• flex-end - Lines are packed toward the end of the flex container.
• space-between - Lines are evenly distributed in the flex container.
• space-around - Lines are evenly distributed in the flex container, with half-size spaces on either end.

Tip: Use the justify-content property to align the items on the horizontally. Note: There must be multiple lines of items for this property to have any effect.

.ac-s  { align-content: stretch; }
.ac-c  { align-content: center; }
.ac-fs { align-content: flex-start; }
.ac-fe { align-content: flex-end; }
.ac-sb { align-content: space-between; }
.ac-sa { align-content: space-around; }

<div class="d-f fxw-w ac-s">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div>flex item 3</div>
</div>

Flex item properties

Order

Specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

• number - Default value 0. Specifies the order for the flexible item.

Note: If the element is not a flexible item, the order property has no effect.

.ord-1 { order: -1; }
.ord-2 { order: 0; }
.ord-3 { order: 1; }
.ord-4 { order: 2; }
.ord-5 { order: 3; }

<div class="d-f">
  <div class="ord-3">flex item 1</div>
  <div class="ord-2">flex item 2</div>
  <div class="ord-1">flex item 3</div>
</div>

Margin

Setting margin: auto; will absorb extra space. It can be used to push flex items into different positions.

Note: This uses the nuclearcss-margin module.

.m-a  { margin: auto; }
.ml-a { margin-left: auto; }
.mr-a { margin-right: auto; }

<div class="d-f">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div class="ml-a">flex item 3</div>
</div>

<div class="d-f">
  <div class="m-a">Perfectly centre content</div>
</div>

Align self

Specifies the alignment for the selected item inside the container.

• auto - Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container.
• stretch - The element is positioned to fit the container.
• center - The element is positioned at the center of the container.
• flex-start - The element is are positioned at the beginning of the container.
• flex-end - The element is positioned at the end of the container.
• baseline - The element is positioned at the baseline of the container.

Note: The align-self property overrides the container's align-items property.

.as-a  { align-self: auto; }
.as-s  { align-self: stretch; }
.as-c  { align-self: center; }
.as-fs { align-self: flex-start; }
.as-fe { align-self: flex-end; }
.as-b  { align-self: baseline; }

<div class="d-f">
  <div class="as-s">flex item 1</div>
  <div class="as-c">flex item 2</div>
  <div class="as-b">flex item 3</div>
</div>

Flex

Specifies the length of the item, relative to the rest of the flexible items inside the same container.

• flex-grow - A number specifying how much the item will grow relative to the rest of the flexible items.
• flex-shrink - A number specifying how much the item will shrink relative to the rest of the flexible items.
• flex-basis - The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit.
• auto - Same as 1 1 auto.
• none - Same as 0 0 auto.

Note: If the element is not a flexible item, the flex property has no effect. Note: The flex-basis and max-width changes depending on the set value of the --gutter-width variable.

.fx-a  { flex: auto; min-width: 0; min-height: 0; }
.fx-g  { flex: 1 0 auto; }
.fx-n  { flex: none; }
.fx-1  { flex: 0 0 var(--fxb-1); max-width: var(--fxb-1); }
.fx-2  { flex: 0 0 var(--fxb-2); max-width: var(--fxb-2); }
.fx-3  { flex: 0 0 var(--fxb-3); max-width: var(--fxb-3); }
.fx-4  { flex: 0 0 var(--fxb-4); max-width: var(--fxb-4); }
.fx-5  { flex: 0 0 var(--fxb-5); max-width: var(--fxb-5); }
.fx-6  { flex: 0 0 var(--fxb-6); max-width: var(--fxb-6); }
.fx-7  { flex: 0 0 var(--fxb-7); max-width: var(--fxb-7); }
.fx-8  { flex: 0 0 var(--fxb-8); max-width: var(--fxb-8); }
.fx-9  { flex: 0 0 var(--fxb-9); max-width: var(--fxb-9); }
.fx-10 { flex: 0 0 var(--fxb-10); max-width: var(--fxb-10); }
.fx-11 { flex: 0 0 var(--fxb-11); max-width: var(--fxb-11); }
.fx-12 { flex: 0 0 var(--fxb-12); max-width: var(--fxb-12); }

<div class="d-f">
  <div class="fx-6">flex item 1</div>
  <div class="fx-3">flex item 2</div>
  <div class="fx-3">flex item 3</div>
</div>

Grid variables

Setting up the grid variables

• column-count - The number of columns the grid can have.
• gutter-width - The space between each column.

:root {
  --column-count: 12;
  --gutter-width: 1.5%;
}

Calculating the variables column width and gutters

• total-gutter - Adds all the gutter-widths by the column-count.
• total-column - The remaining space after the total-gutter is taken out.
• column-width - The width of a single column element.

:root {
  --total-gutter: calc(var(--gutter-width) * (var(--column-count) - 1));
  --total-column: calc(100% - var(--total-gutter));
  --column-width: calc(var(--total-column) / var(--column-count));
}

Calculating each of the column width

• fxb-x - Flex basis width for each column.

:root {
  --fxb-1: calc((var(--column-width) * 1) + (var(--gutter-width) * (1 - 1)));
  --fxb-2: calc((var(--column-width) * 2) + (var(--gutter-width) * (2 - 1)));
  --fxb-3: calc((var(--column-width) * 3) + (var(--gutter-width) * (3 - 1)));
  --fxb-4: calc((var(--column-width) * 4) + (var(--gutter-width) * (4 - 1)));
  --fxb-5: calc((var(--column-width) * 5) + (var(--gutter-width) * (5 - 1)));
  --fxb-6: calc((var(--column-width) * 6) + (var(--gutter-width) * (6 - 1)));
  --fxb-7: calc((var(--column-width) * 7) + (var(--gutter-width) * (7 - 1)));
  --fxb-8: calc((var(--column-width) * 8) + (var(--gutter-width) * (8 - 1)));
  --fxb-9: calc((var(--column-width) * 9) + (var(--gutter-width) * (9 - 1)));
  --fxb-10: calc((var(--column-width) * 10) + (var(--gutter-width) * (10 - 1)));
  --fxb-11: calc((var(--column-width) * 11) + (var(--gutter-width) * (11 - 1)));
  --fxb-12: calc((var(--column-width) * 12) + (var(--gutter-width) * (12 - 1)));
}