(tagged: public CSS web dev | personal ‣ ‣ ‣ ‣ )

<aside> 💡 practice with flexbox froggy!

</aside>

• most important thing to know about flexbox: even though it can arrange items into grid-like layouts, it basically treats the content as one line, similar to a line of text. it “flexes” your content by wrapping that one line around onto new lines, and controlling the way items are spaced out along that line.

• flexbox apparently used to be more popular for layouts but recently css grid has become more popular instead
• flexbox is one dimensional, i.e., it basically treats the contents as a line or list
• a flex container is an element with the display: flex property, and its children are flex items
• a flex container has two axes: a main axis and a cross axis

properties of the flex container

• flex-direction determines what the main axis of the flexbox is
  • can be row, column, row-reverse, or column-reverse; row seems to be default
  • which direction is which depends on the text direction (ie RTL or LTR)
• flex-wrap is nowrap by default
  • set it to wrap to make items drop down to the next line when the container is too small to fit them side by side
    • how does this apply to column layouts?
  • nowrap will supposedly “shrink your items if needed”
    • do we just not see that in the FCC example because we already defined a specific size for all the cat photos? —oh actually no, with row and nowrap it DOES ignore the width rules and make some of the images narrower than the given width!
  • i guess that if it can’t shrink them (because you specified a size), that’s when it will expand the container instead, creating a scrollbar?? .. nope not exactly!!
  • warning! if your flex container has a max width that’s less than the width needed for all the content, and you set nowrap, then some of the content will just get cut off and be hidden
• flex-flow is a shorthand that takes flex-direction then flex-wrap in one line
• “justify-contentdetermines how the items inside a flex container are positioned along the main axis” —FCC
• “align-itemspositions the flex content along the cross axis” —FCC
• align-content sets the spacing between different lines of content when you have wrapping
• “align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.” —flexbox froggy — in other words, align-items only handles the items as one big block, and doesn’t touch the spacing between lines.
• row-reverse and column-reverse vs wrap-reverse :
• gap applies to the container element and sets the space between rows and columns
  • this one isn’t just for flexbox; the same property applies to grid and multi-column layouts

properties of the flex items