Menu
In the example below, all stable flexbox-capable browsers render the page correctly.
See jsfiddle here.
Because of align-items: center; the three colored blocks are evenly distributed in the section element:
However, on the latest Chrome Beta (54) and Canary (55) versions, the same example gets rendered like this:
Is this going to be the expected behaviour for align-items in the next versions of Chrome? Or is this a bug...
UPDATE
Michael_B's answer cleared up the difference between align-items and align-content in this particular layout. His jsfiddle should be used for testing the layout.
Still, even with the correct flexbox property, Chrome beta and Canary are not rendering the layout the way they should be:
829
Vertical align to center: The flexbox property is used to set the content to vertical align. The text content can be aligned vertically by setting the following display properties: align-items. justify-content.
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
The power of Flexbox really shines when we also need to center elements vertically. Here’s our example, but with the flex items also centered vertically: arrr! yeehaw! If you just want specific flex items to be centered vertically, you can set align-self on the items instead: arrr! yeehaw!
In the specification this is described as packing flex lines. For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.
If we change our flex-direction to column, align-items and align-self will align the items to the left and right. You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.
However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox. A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left.
The proper way to achieve the layout above is with align-content: space-around (demo).
When dealing with a multi-line flex container, align-content is the property to use.
From the spec:
8.4. Packing Flex Lines: the
align-contentpropertyThe
align-contentproperty aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to howjustify-contentaligns individual items within the main-axis.Note, this property has no effect on a single-line flex container.
Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
