Compare Revisions

Using CSS flexible boxes

Change Revisions

Revision 435065:

Revision 435065 by roryokane on

Revision 435067:

Revision 435067 by roryokane on

Title:
Using CSS flexible boxes
Using CSS flexible boxes
Slug:
Web/Guide/CSS/Flexible_boxes
Web/Guide/CSS/Flexible_boxes
Tags:
"css", "CSS3", "css3-flexbox"
"css", "CSS3", "css3-flexbox"
Content:

Revision 435065
Revision 435067
t144      Flexbox's alignment properties do "true" centering, unlike t144      Flexbox's alignment properties do "true" centering, unlike 
>other centering methods in CSS. This means that the flex items wi>other centering methods in CSS. This means that the flex items wi
>ll stay centered, even if they overflow the flex container. This >ll stay centered, even if they overflow the flex container. This 
>can sometimes be problematic, however, if they overflow past the >can sometimes be problematic, however, if they overflow past the 
>top edge of the page, or the left edge (in LTR languages like Eng>top edge of the page, or the left edge (in LTR languages like Eng
>lish; the problem occurs on the right edge in RTL languages like >lish; the problem occurs on the right edge in RTL languages like 
>Arabic), as you can't scroll to that area, even if there is conte>Arabic), as you can't scroll to that area, even if there is conte
>nt there! In a future release, the alignment properties will be e>nt there! In a future release, the alignment properties will be e
>xtended to have a "safe" option as well. For now, if this is a co>xtended to have a "safe" option as well. For now, if this is a co
>ncern, you can instead use margins to achieve centering, as they'>ncern, you can instead use margins to achieve centering, as they'
>ll respond in a "safe" way and stop centering if they overflow. &>ll respond in a "safe" way and stop centering if they overflow. I
>nbsp;Instead of using the <code>align-</code>&nbsp;properties, ju>nstead of using the <code>align-</code> properties, just put auto
>st put auto margins on the flex items you wish to center. &nbsp;I> margins on the flex items you wish to center. Instead of the <co
>nstead of the <code>justify-</code>&nbsp;properties, put auto mar>de>justify-</code> properties, put auto margins on the outside ed
>gins on the outside edges of the first and last flex items in the>ges of the first and last flex items in the flex container. The a
> flex container. The auto margins will "flex" and assume the left>uto margins will "flex" and assume the leftover space, centering 
>over space, centering the flex items when there is leftover space>the flex items when there is leftover space, and switching to nor
>, and switching to normal alignment when not. However, if you're >mal alignment when not. However, if you're trying to replace <cod
>trying to replace <code>justify-content</code> with margin-based >e>justify-content</code> with margin-based centering in a multi-l
>centering in a multi-line flexbox, you're probably out of luck, a>ine flexbox, you're probably out of luck, as you need to put the 
>s you need to put the margins on the first and last flex item on >margins on the first and last flex item on each line. Unless you 
>each line. &nbsp;Unless you can predict ahead of time which items>can predict ahead of time which items will end up on which line, 
> will end up on which line, you can't reliably use margin-based c>you can't reliably use margin-based centering in the main axis to
>entering in the main axis to replace the <code>justify-content</c> replace the <code>justify-content</code> property.
>ode> property. 

Back to History