CSS3 Flexbox

This demo shows how to use CSS3 Flexbox to create columns.

Old Way

Pastry icing sweet roll fruitcake croissant. Tart wypas tiramisu marshmallow marshmallow sweet roll. Cheesecake bear claw pudding bonbon sweet roll powder carrot cake. Cake sweet donut tart.

Dessert gummies sweet roll. Dessert gummi bears soufflé cotton candy icing. Lollipop wafer lemon drops toffee chocolate.

.old .col {
	float: left;
}
.old .left {
	width: 310px;
}
.old .right {
	width: 210px;
}

Flexbox

Pastry icing sweet roll fruitcake croissant. Tart wypas tiramisu marshmallow marshmallow sweet roll. Cheesecake bear claw pudding bonbon sweet roll powder carrot cake. Cake sweet donut tart.

Dessert gummies sweet roll. Dessert gummi bears soufflé cotton candy icing. Lollipop wafer lemon drops toffee chocolate.

.flex {
	display: -webkit-flex;
	display: flex;
}

Flexbox

Pastry icing sweet roll fruitcake croissant. Tart wypas tiramisu marshmallow marshmallow sweet roll. Cheesecake bear claw pudding bonbon sweet roll powder carrot cake. Cake sweet donut tart.

Pastry icing sweet roll fruitcake croissant. Tart wypas tiramisu marshmallow marshmallow sweet roll. Cheesecake bear claw pudding bonbon sweet roll powder carrot cake. Cake sweet donut tart.

Dessert gummies sweet roll. Dessert gummi bears soufflé cotton candy icing. Lollipop wafer lemon drops toffee chocolate.

.flex2 {
	display: -webkit-flex;
	display: flex;
}
.flex2 .left {
	width: 310px;
}
.flex2 .right {
	width: 210px; 
}
.flex2 .left {
	display: -webkit-flex;
	display: flex;
}
.flex2 .left p:nth-child(1) {
	padding-right: 10px;
}
.flex2 .left p:nth-child(2) {
	padding-left: 10px;
}
Fork me on GitHub