The new flexible layout model (from here onwards, and throughout this chapter, known as Flexbox) is designed, as its previous version, to give the developers a new way of aligning elements on a page.
Elements using this new box model can be laid down vertically or horizontally and can have their order swapped dynamically, plus they can "flex" their sizes and positions to respond to the available spaces.
Here's an example (to test on Internet Explorer 10):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style> html,body,ul{ height: 100%; margin: 0; padding: 0; } ul{ display: -ms-flexbox; -ms-flex-direction: row-reverse; -ms-flex-pack: center; -ms-flex-align: center; -ms-flex-wrap: wrap; ...