CSS Flexbox layout model

Why flexbox?
In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:

  • Easy vertical alignment of content within a parent element.
  • Easy reordering of content across devices and screen resolutions with the help of media queries.
  • Easy CSS-only equal height columns for your grid-based layouts.
  • No need to clear floats.
.flex-container {
display: flex; /* flex | inline-flex */

flex-direction: row; /* row | row-reverse | column | column-reverse */

flex-wrap: wrap; /* wrap | nowrap | wrap-reverse */

justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around */

align-items: flex-start; /* flex-start | flex-end | center | baseline | stretch */

align-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | stretch */
}


.flex-item {
order: 1; /* 2 | -1 */

flex-grow: 0; /* 1 | 2 */

flex-shrink: 1; /* 2 | 3 */

flex-basis: auto;

align-self: auto; /* flex-start | flex-end | center | baseline | stretch */
}

some css:

.fx-grid {
	/*display: -ms-flexbox;
	display: -webkit-flex;*/
	display: flex; /* flex | inline-flex */

	/*-ms-flex-direction: row;
	-webkit-flex-direction: row;*/
	flex-direction: row; /* row | row-reverse | column | column-reverse */

	flex-wrap: wrap; /* wrap | nowrap | wrap-reverse */

	/*-webkit-justify-content: space-around;
	/*-ms-justify-content: center;*/
	justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around */

	/*align-items: stretch; /* flex-start | flex-end | center | baseline | stretch */

	/*align-content: stretch; /* flex-start | flex-end | center | space-between | space-around | stretch */
}

Links:

Flexbox games:

Leave a Comment