Last time we covered the basics of flow layout - including inline vs block elements and flow vs writing direction. Flow layout is the default for an element without any CSS involved. On top of this, there are user agent styles - some bare-bones, core CSS that each browser writes themselves that comes default on top of flow layout. This produces the basic margins between paragraphs, for example.
Flow layout is automatically adaptive and accessible, right out of the box. Text wraps around as the blocks get smaller, buttons look like buttons while links look like links, headers have a visual hierarchy, and text is black on white, with easy-to-read serifs. Covering all this with swaths of CSS to create our own layouts, aesthetics, and brands brings us a lot of power. But you know what they say about power and responsibility.
As we change the fonts, colors, and aesthetic, we need to be sure and maintain legibility and accessibility. Likewise, we have a number of tools at our disposal to replace or disregard the basic flow layout. As we do, we need to maintain a logical progression of the source order as well as the visual elements on screen. With these warnings out of the way, here are some ways to screw with the flow:
- Adding a declaration of
float: right;takes the element in question out of the flow, aligning it on one side of the writing direction or the other, but text and other inline elements will continue to wrap themselves around it. Ideal usage is for images within a paragraph. Requires a
clearrule to keep the floated thing from behaving too weirdly.
- Hidden via Visibility or Display
visibilitydeclaration other than the default or
display: none;can remove an element entirely. Depending on the value for
visibility, you can choose to keep the space where the element was available or not.
display: none;removes something from the DOM entirely - far more drastic than taking something out of flow. Use this wisely.
- Absolute or Fixed Positioning
- Setting something with
position: fixed;will pop the thing out of flow, and place it precisely where you want, relative to either the window or a parent element, depending on your markup. I've seen sites that, in their quest for pixel perfection, absolutely positioned every single element in the DOM to be precisely where they wanted it. Please don't do this. Use with soberness.
- Getting into the good stuff - if you set
display: flex;on something, it does nothing to that element, besides making it act like a block element if it didn't before. (Quick tip: if you need flex, but you need the container to act inline,
display: inline-flex;is your friend) Setting flexbox only affects the direct children of that element - in flex's case, they will all pack together in a line along the writing direction, or whatever
flex-directionyou've set. Watch that source order there.
- Just like flexbox, setting
display: grid;doesn't do anything besides making the element behave like a block. (Pro-tip,
inline-gridis a thing too, see above) It just changes the way the direct children behave. Instead of flow, they will position themselves based on an auto-generated grid - which by default is only one column wide, so it might look an awful lot like flow until you add more columns. (Albeit things that should be inline acting like blocks) Source order can get weird too - both grid and flex have
orderbut grid also has things like
grid-auto-flowwhich can change the way the browser decides how to order things within the grid.