“Change order” and “align to center” and “flexible width” using HTML5 and CSS3

We can play the following items using below code:

  1. Change the order of baby boxes
  2. Align the baby boxes to center of father box
  3. Adjust baby box width flexible to fulfill the father box width

reverse-flex-center

.father {
	background:#CCCCCC;
	display:-moz-box;
	-moz-box-orient:horizontal;
	width:700px;
	-moz-box-pack:center;
}
.baby1 {
	background:#FF0000;
	padding:10px;
	margin:10px;
	color:#FFFFFF;
	-moz-box-ordinal-group:3;
}
.baby2 {
	background:#006600;
	padding:10px;
	margin:10px;
	color:#FFFFFF;
	-moz-box-flex:1;
	-moz-box-ordinal-group:2;
}
.baby3 {
	background:#0000FF;
	padding:10px;
	margin:10px;
	color:#FFFFFF;
	-moz-box-ordinal-group:4;
}
.baby4 {
	background:#999900;
	padding:10px;
	margin:10px;
	color:#FFFFFF;
	-moz-box-ordinal-group:1;
}
<div class="father">
  <div class="baby1">Baby1</div>
  <div class="baby2">Baby2</div>
  <div class="baby3">Baby3</div>
  <div class="baby4">Baby4</div>
</div>

Author: Raghava

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *


*

'