howto: website layout - flexbox howtos rev 24 sep 2019 ....................................................... info: flex is best for page elements. one dimension: horizontal - or ... page content can be laid out in any direction (to the left, to the right, downwards or even upwards) more flexibility than CSS Grid. bits of content can have their visual order reversed or rearranged items can “flex” their sizes to respond to the available space items can be aligned with respect to their container or each other easier to maintain and require less code. equal-column layouts (irrespective of the amount of content inside each column) is a breeze. ....................................................... gotchas: * fr: one resource says it means "free space" another says it means "fractional unit" anyway, one fr (1fr) will automatically distribute the space equally. ....................................................... resources: * using css flex - the basics o A Friendly Introduction to Flexbox for Beginners Christian Krammer https://www.sitepoint.com/flexbox-css-flexible-box-layout/ 23 jul 2018 o A Complete Guide to Flexbox Christ Coyier https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 2016 * using css flex - everything The Complete CSS Flex Box Tutorial JavaScript Teacher https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc FlexBox Layout - Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout Designing the Flexbox Inspector - Mozilla https://hacks.mozilla.org/2019/01/designing-the-flexbox-inspector/ A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Flexbox.ninja – Solved by Flexbox High Kick https://flexbox.ninja/ _______________________________________________________ .Do .Do-webwork since: 7 oct 2018 -- 0 --