Here’s the non-Grid stuff I learned at Rustbelt Refresh 2019: “Next Steps with CSS Layout” with Rachel Andrew~! You can also check out my notes for Grid stuff.
Clearfix begone!!! 📒 W3C Spec · CSS Tricks · MDN · Can I Use?
From the draft spec: The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
Removes the excessive default styling (i.e. removes the box of the element — literally “box generation”) but keeps the accessible context of the element. Great for forms, for example!
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as
::beforeand::afterpseudo-elements, which are generated before/after the element’s children as normal).
Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property inheritance, are not affected. 📒 W3C Spec · CSS Tricks · MDN · Can I Use?
Makes an element actually span across columns in a multicol layout 😱 You don’t have to move it out of the element with column styling! 📒 W3C Spec · CSS Tricks · MDN · Can I Use?
Avoid an element within a multi-column layout to keep the property from breaking apart (“wrapping” to an additional column when using card styling). 📒 W3C Spec · CSS Tricks · MDN · Can I Use?
Indicate that content should be kept together. Avoid a break before/after the principal box (block-level element).
✏️ Codepen using all of the above declarations in a multicolumn layout
Some flex-y properties aren’t just for Flexbox like I thought they were! Flexbox styling is great for fiddling and fine-tuning layout elements, but isn’t the best option to layout content in a grid system (guess what is… Grid!!!).
When we’re justifying content on the inline ("main") axis, we use justify-content! (No need for the old flex- prefix in the value, e.g. justify-content: start will do!)
Use this when you need to align elements on the block ("cross") axis, use align-content or align-items! Just like justify-content 👆 but on the opposite axis. Use the align-self property to override this for one child element.
/*
Longhand for below:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
*/
flex: 1 1 0;flex-grow: 1 means that all items can grow to fill the leftover space, much like the fr Grid unit.
If you want to have equal-space items within a flexbox container (so the flex children widths have nothing to do with the content in them), set flex-basis to 0 (a.k.a. distribute the leftover space to ALL of the space).
When you use only one #{value} for flex, it defaults to:
flex-grow: #{value};
flex-shrink: 0;
flex-basis: 0;Instantly change your layout to read right-left on a 90º tilt! But… if you use width/height and top/right/bottom/left then it’s pointless so you hafta use logical properties (below!)
Logical replacements for width and height: inline-size and block-size. They define the horizontal or vertical size of an element's block, depending on the value of writing-mode.
📒 MDN: inline-size
· MDN: inline-block
Use logical properties block-start, block-end, inline-start, inline-end instead of physical properties top, right, bottom, left to avoid mapping values directly to visual "sides" as opposed to the bounds of the content.
✏️ Codepen replacing width, border, margin, padding with logical properties