Flow Layout¶

https://courses.joshwcomeau.com/css-for-js/01-rendering-logic-1/09-flow-layout

display: inline;
display: block;
display: inline-block;

Inline Elements¶

Assumes it's Typography
- css-typography
Magic space at the bottom
- Not a part of the box model
- Solutions
  - display: block
  - line-height: 0 on the wrapping div
line wrap!
- no height/width
- Inline elements don't have to be rectangles
  - Horizontal padding is just on the tips
Space between elements
- Could be because of whitespace (newline)
- only in flow

Inline padding-left/right¶

Default

box-decoration-break: slice;

Since it line wraps, it only applies padding on the tips

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Replaced elements¶

img
video
canvas

Inline wrapper on some foreign object

???? Do replaced elements act differently in flexbox or grid? - I don't see anything in MDN

Inline-block¶

like inline except you can apply padding
Like block that you drop in an inline context
Parent will treat it like inline
example: buttons
- inline elements with padding
doesn't word wrap

Width ¶

Default: width: auto

auto vs 100%¶

auto
- will grow as much as it can
- won't eat into margin
- Will line wrap
100%
- will match the parent's width
- will cause horizontal scroll if there's margin
  - parent is 300px -> child will be 300px + margin
    - which will horizontal scroll
- Kevin Powell: Stop using with: 100%

width keywords¶

min-content¶

sizing based on the children

`max-content`¶

never add line breaks
may cause horizontal scroll
- why: if you want the background to only cover the text

`fit-content`¶

content can fit in parent -> act like max-content
otherwise: act like width: auto

Implementing `fit-content`¶

/* width: auto */
max-width: max-content;
min-width: min-content;

implicit width: auto
content is short (eg: 100px) -> max-width kicks in
content is long af 4. max-width: has no effect 5. width: auto
min-width handles large unbreakable word in narrow container

Min/max width¶

min-width > max-width > width

Exercise¶

<figure>
    <img alt="" src="" />
    <figcaption>Found on Unsplash.</figcaption>
</figure>

Before ![[image-20230113144441882.png]]

After

[!Solution]- on the parent figure -> width: min-content

'> will look for the widest child and make that the width

Setting a fixed width¶

set a max-width
prevent horizontal scroll where the width is wider than the screen

.button {
  max-width: 100%;
}

[[Which units to use#Width/heights]]¶

Height ¶

look down the tree to see how tall it should be

children determine parent height

Default height is like width: min-content - as small as possible to fit content

Setting a fixed height¶

you really shouldn't, will almost always cause overflow
use min-height

Why percentage height has no effect¶

Goal

![[image-20221024080322661.png]]

Actual

![[image-20221024080337789.png]]

Parents shrink-wrap to fit their children snuggly

Solution¶

html, body, #root, #__next {
  height: 100%;
}

When the body has height: 100%

this is better than height: 100vh because 100vh is a bit taller on mobile devices

Or the new CSS viewport heightheight: 100dvh * doesn't take the keyboard into effect

need to add height: 100% for every element between the html element and the element we want to stretch to 100% of the screen

Aspect Ratio¶

aspect-ratio: 1 / 1;

Implementing Aspect Ratio¶

width: 300px;
height: 0;
padding-bottom: calc(300px * 9 / 16);

For 9/16 ratio clientHeight

returns the inner height of an element in pixels, including padding but not

Horizontal scrollbar
height
border
margin

offsetHeight

is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

scrollHeight

is a measurement of the height of an element's content including content not visible on the screen due to overflow

[[Margin#Margin Collapse]]¶

Last update: 2023-03-20