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