Menu
I am trying to understand flex box: I want to make the “first” block stretched to match the full width of the browser, and the ”second” block of fixed size and aligned to left.
So I used align-items: flex-end in the parent(<html>) and tried to stretch the first block using align-self: stretch in the ”first” block.
This is not working. Both of them are aligned to the left.
<html> <head> <style> html { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; } #first { align-self:stretch; background-color: red; border: 3px solid black; } #second { background-color:green; width: 300px; height: 400px; border: 3px solid yellow; } </style> </head> <body> <div id="first">This is first</div> <div id="second">This is second</div> </body> </html> 
449
Also when you use display: flex on parent element display: inline-block on child elements is not going to work. To add to this answer, justify-self is simply not supported in flexbox because it justifies all its items as a group.
Note that values space-around and space-between on justify-content property will not keep the middle item centered about the container if the adjacent items have different widths. As of this writing, there is no mention of justify-self or justify-items in the flexbox spec.
The align-self applies to all flex items, allows this default alignment to be overridden for individual flex items. The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.
So the problem is that you've got the <html> node as a flex container, and the <body> node (its child) is the one and only flex item.
Currently, align-self:stretch on #first is ignored, because that property only applies to flex items, and #first is not a flex item (the way you have things set up right now).
To get what you want, you need to make the <body> node a flex container, not the <html> node. So, just change your first style rule to apply to body{ instead of html{
(Also, if you want #second to be aligned to the left, you need flex-start, not flex-end. The left edge is the flex-start horizontal edge, generally.)
157
Add flex:1 to #first
Remove justify-content: flex-start; and align-items: flex-end; from html
See example: http://codepen.io/anon/pen/vifIr
20
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
