CSS - Flexbox (nth-child)
Page 22
#box { display: flex; justify-content: center; align-items: center; height: 60px; border: 2px solid purple; } .box_element:nth-child(1) { background-color: rgba(255, 0, 0, 0.5); } .box_element:nth-child(2) { background-color: rgba(0, 255, 0, 0.5); align-self: flex-end; } .box_element:nth-child(3) { background-color: rgba(0, 0, 255, 0.5); } .box_element:nth-child(1) { order: 2; } .box_element:nth-child(2) { order: 1; } .box_element:nth-child(3) { order: 3; } .box_element:nth-child(1) { flex: 1; } .box_element:nth-child(2) { flex: 2; } .box_element:nth-child(3) { flex: 1; }
Element 1
Element 2
Element 3
Element 1
Element 2
Element 3
Element 1
Element 2
Element 3