CSS Flexbox model

Flexbox
----------

Complex things like flexible grid layouts are so hard using tables, floats, inline-blocks.

Flexbox consists of Flex containers and flex items.

Flex container: display property set as flex or inline-flex.

Flex Item: Every child of flex container.

Everything outside a Flex Container and inside a Flex Item is rendered as usual. In short, Flexbox defines how Flex Items are laid out inside of Flex Containers.

Flex Lines

Flex Items are positioned inside a Flex Container along a Flex Line. By default there is only one Flex Line per Flex Container.

The Main Axis and the Cross Axis

To abstract over the writing-mode, Flexbox uses the concepts of the Main Axis and the Cross Axis. Flex Lines follow the Main Axis. The Cross Axis is perpendicular to the Main Axis.

The names for the starting points, ending points, and directions of each axis are as follows:

Main Start
Main End
Main Direction (sometimes called the Flow Direction)
Cross Start
Cross End
Cross Direction

Flex container properties

flex-direction
--------------
Default value is row

row-reverse: The Main Start and Main End are swapped. If the writing-mode is left to right, Flex Items are now laid out right to left.
column: The Main Axis and the Cross Axis are swapped. If the writing system is horizontal, the Flex Items are now laid out vertically.
column-reverse: Same as column, but reversed.

justify-content: adjusts the positions of Flex Items on the Main Axis
---------------
flex-start (default)
flex-end
center
space-between
space-around

align-items: adjusts the way Flex Items are positioned on the Cross Axis
-----------
flex-start (default)
flex-end
center
baseline: causes Flex Items to be aligned along their baseline. Baselines are calculated based on the content of the Flex Items.
stretch

flex-wrap: Using flex-wrap you can create Flex Containers with multiple Flex Lines.
---------
nowrap (default)
wrap: Flex Items wrap onto additional Flex Lines if there is not enough room for them on one Flex Line
wrap-reverse

align-content: modifies the behavior of flex-wrap; aligns teh
-------------
stretch (default)
flex-start
flex-end
center
space-between
space-around

flex-flow: shorthand for flex-direction and flex-wrap
---------


Properties of Flex Items

order: Setting orders for Flex Items adjusts their order when rendered

This can be useful for accessibility, where the document order and the displayed order may need to be different.

margin:

align-self: overrides the Flex Container’s align-items property
----------
stretch (default)
flex-start
flex-end
center
baseline

flex: specifies how a Flex Item will be prioritized when free space is being distributed on the Main Axis.
----
flex: [number]: specifies a number that represents the ratio of free space

flex: initial: inflexible when there is free space, but can shrink smaller if needed

flex: auto : fully flexible along the Main Axis.

flex: none : fully inflexible in all situations.

flex: [flex-grow] [flex-shrink] [flex-basis]

visibility:


Reference URLs
-------------------
https://medium.freecodecamp.org/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053
https://bocoup.com/blog/dive-into-flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

Post a Comment

Popular posts from this blog

Responsive Web Design

Helps to make your content work across any device. Browser vieports are measured in Device Independent pixels (DIPs) and not the hardware pixels which are the actual physical pixels. Device pixel ratio: ratio of DIP to hardware pixel eg: device pixel ratio of 2 means one DIP for every 2 hardware pixels. Font boosting: Browsers try to identify the main content and boost the font size to ensure readability when the veiwport meta tag is not set. CSS pixel = Hardware pixel / DPR Setting meta viewport: <meta name="viewport" content="width=device-width,initial-scale=1" /> Set max-width on elements: img, embed, object, video{ max-width: 100%;} Tap target sizes: give a minimum size of 40px * 40px ideally 48px * 48xp (min-width and min-height) to cover the size of a finger. Start from small - mobile first approach: keep the content widths to 100% Media Queries: 2 ways to include media queries: 1. have separate CSS files and link them using med...
Read more

Website Accessibility Tips

1. Structure the DOM in a sensible way so that keyboard tab navigation is sequential. 2. Use HTML semantic elements like nav, header, section 3. Make sure parts of controls are grouped together 4. Use CSS for layout instead of tables 5. Use native HTML tags instead of divs and spans eg: a, button tags instead of div span with onclick coz divs and spans are not focusable. 6. Label form elements using 'label for' 7. Label images with alt attributes 8. Managing focus using element.focus() whenever required 9. For generic tags div and span, use Aria roles like role=button, role=menuitem so that screen readers can identify elements. 10. Aria landmark roles can be used to identify separate areas of the app. eg; <section role="search"/> 11. Use aria states to add dynamic information about the current state of an element eg: <div tabindex="0" role="checkbox" aria-checked="true"> 12. The property aria-live identifies dyna...
Read more