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 */
}

html:

<div class="container">
    <section>
        <img src="http://lorempixel.com/300/300/" width="200" height="300" />
    </section>
    <section>
        <img src="http://lorempixel.com/400/300/" width="400" height="300" />
    </section>
    <section>
        <img src="http://lorempixel.com/500/300/" width="500" height="300" />
    </section>
    <section>
        <img src="http://lorempixel.com/350/300/" width="350" height="300" />
    </section>
    <section>
        <img src="http://lorempixel.com/450/300/" width="450" height="300" />
    </section>
</div>

css:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
}
section {
    transition: all 0.3s ease;
    height: 250px;
    margin: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    /* make 1 flex unit wide */
    flex: 1;
    overflow: hidden;
}
section img {
     height: 300px;
}
section:hover {
    /* take up two flex units when hovering */
    flex: 2;
}

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:

web-profile

CSS Flexbox layout model

Leave a Reply Cancel reply