Flexbox

#breakdown #todo

Some random notes on [[flexbox]]

In technical terms, display: flex creates a flex formatting context. All direct children will participate in this context, and it means that they will use Flexbox layout instead of the default Flow layout. (display: flex will also turn an inline element, like a <span> into a Block-level element, so it does have some effect on the parent element's layout. But it won't change the layout algorithm used.)

flex is the preferred shorthand over using flex-grow, flex-shrink, and flex-basis individually.

You can force items to wrap at a min-width by using something like the following:

.flexbox {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 150px;
    %% Using a min-width here also would work instead of flex-basis %%
}

#todo - how does flex-basis work? difference between 0 and auto? What's the default? I think the default is based on the size of the actual element. So growing two differently sized elements with flex-grow: 1 will get you a different result. The smaller item will remain smaller. When you add flex-basis: 0, things will scale to the same amount regardless of their original size. Example from https://www.youtube.com/watch?v=3ugXM3ZDUuE #todo - flex primer? what can it do well, what can't it do? e.g. not for proper grids really, but also necessary for grid-like components where the amount of columns is unknown. a 'wrapping grid' for lack of a better term

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts - go through this and write down learnings

#todo - https://www.youtube.com/shorts/a0Tntm1RuWE

flex doesn't take padding into account when using flex: 1 https://www.youtube.com/shorts/N1CkZAaWJCQ

Once something is a flex container, it becomes a flex formatting context [[20220815043921-layout-algorithms-css]]. This means all flex items inside of it are effectively block elements. As text elements are inline-level boxes, you can't get 'regular text wrapping' (i.e. around an object) once it's in a flex context. https://stackoverflow.com/questions/48253934/how-to-wrap-text-around-objects-like-floating-does-in-flexbox

[[20220815043921-layout-algorithms-css]]