The flexible box layout is a newer style for page layout on the web. When a <div> or other container is set to “display: flex;” items inside will arrange themselves according to subsidiary styles like “justify,” “align,” “wrap,” and others. The flexible box layout is great for portfolios, catalogs, and other pages where you expect to keep adding content.
To see how the flexible box layout works, click the “Add Another Box” button below.
Two important subsidiary styles for the flexible box layout are “justify,” referring to the horizontal layout, and “align,” for the vertical layout. You can explore these in the interactive demos below.
Justify. The first black <ul> tag below is set to “display: flex;” and “justify-content: center;,” which determines the horizontal alignment of the green <li> tags, which are styled to look like buttons. Click the green tags to change the justify-content setting to the one displayed.
Align. The second black <ul> tag below is set to “display: flex;” and “align-items: center;,” which determines the vertical position of the green list items. Click the green <li> tags to change the align-items setting to the one displayed.