We'll return and use our flexbox sample page (flexbox.html) as a playground for testing these properties. Here's our CSS we ended up with in this area:
/***************Flexbox demo***************/.flex-container { margin-top: 200px; display: flex; justify-content: flex-start;}.flex-item { padding: 20px;}.flex-item:last-child { margin-left: auto;}.flex-item1 { background: deeppink;}.flex-item2 { background: orange; }.flex-item3 { background: lightblue; }.flex-item4 { background: lime; }.flex-item5 { background: olive; }
The flex container has all of the content justified to flex-start, or in our case, to the left. This is because flex-direction is not set, and hence it defaults to row. The last flex item is being pushed to ...
