Flex CSS

A minimal, responsive CSS framework built on flexbox

Note: this is still under early development, and probably isn't worth using yet.

Grid

The typical row/column layout is easier than ever with Flex CSS. Start with a .grid element, and add .cell elements inside it. You can place as many .cell elements as you need and they'll fit the full width automatically. Grid items can also be nested.

Columns automatically fill the full height too!

Nesting Cells

You can use nested cells by putting another .grid within a .cell.

Column Widths

If you need to specify column widths, you can add a fractional class like one-half, one-fifth, two-thirds, etc. When using width classes or other custom widths, cells will wrap to new lines automatically when there isn't enough width to fit them all.

1/5

1/3

(auto width)

Responsive Grid

By default, all .cells display as rows on small devices, and columns on desktop. You can add classes to the .grid to control when the cell layout switches.

	Phones	Tablets	Laptops	Desktop
Class	`xs`	`sm`	`md`	`lg`
Width	<768px	>768px	>992px	>1200px

Alignment

.cells can be aligned within a .grid by adding .cell-top, .cell-center, or .cell-bottom.

This cell is top-aligned.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This cell is center-aligned.

This cell is bottom-aligned.

Forms

Flex CSS includes basic form styles, including support for input add-ons.

Using the grid

Forms work well with the grid system, allowing flexible layouts

Input groups

Merge buttons, inputs, and spans into single components

Media Objects

Media objects can represent comments, blog posts, and more.

John Smith

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

John Smith

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut.

Etiam posuere lectus sed sapien malesuada molestie. Aliquam vitae pharetra dolor. Nullam non mattis nunc.

Reversed

You can reverse the order of a media object by adding a .reverse to the element.

John Smith

By Alan Hardman, under the MIT License