Flexbox CSS

Fix Height Content Box

	    	
.item-student {
	display: flex;
	height: 100%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-pack: start;
}

.item-student .bot-student {
	margin-top: auto;
}
	    	
	  	

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas repellendus recusandae earum, quasi facilis molestiae fuga, minima dolores similique, quod blanditiis id dolor accusantium eius hic atque perspiciatis. Voluptates, repellendus. minima dolores similique, quod blanditiis id dolor accusantium eius hic atque perspiciatis. Voluptates, repellendus.

Text bottom item

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas repellendus recusandae earum, quasi facilis molestiae fuga,

Text bottom item

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas repellendus recusandae earum, quasi facilis molestiae fuga, minima dolores similique, quod blanditiis id dolor accusantium eius hic atque perspiciatis. Voluptates, repellendus.

Text bottom item

Fix Row Center Box

	    	
.row-flex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
	    	
	  	

Box Content Vertical Middle

.flex-vertical {
	display: flex;
	justify-content: center;
	position: relative;
	min-height: 54px;
	flex-direction: column;
}

Equal height columns

flex-container {
	display: flex;                 /* primary flex container */
	flex-direction: row;           /* horizontal alignment of flex items (default value; can be omitted) */
	align-items: stretch;          /* will apply equal heights to flex items (default value; can be omitted) */
	height: 100%;
}

flex-item {
	display: flex;                 /* nested flex container */
	flex-direction: column;        /* vertical alignment of flex items */
	justify-content: center;       /* center flex items vertically */
	align-items: center;           /* center flex items horizontally */
}