Flexbox - Weird parts

This is a summary of all the instructional videos on the site Flexbox.io by Wes Bos.

Github Link of my mini-projects on Flexbox.

Flexbox

There are 2 components of flexbox: flex container and flex item

The element with display:flex; is the container, and all the elements that are direct children to it are flex items.

A display:inline-flex also exists, if you want a flexbox to take just the amount of space it requires to bear all its children. 

flex-direction

There are 2 axes in Flexbox

main axis: by default from left to right and

cross axis: by default from top to bottom

If you set flex-direction:column; the main axis becomes top to bottom and cross axis from left to right

If you use flex-direction: row-reverse - The axis goes from right to left

Similarly for column-reverse - bottom to top

flex-wrap

This causes the elements to shift along the cross axis if the space in the main axis becomes full.

nowrap is default

wrap is one option.

wrap-reverse is also an option, but it causes the cross axis to go from bottom to top, keeping the main axis the same.

*Without wrap and each item set to 33.33% width and with 10 items, again, without wrap, all 10 elements will appear in one row.

But if we need actual 33.33% width for each item, we set it to wrap. So element 1,2,3 appear on one line, the next ones 3,4,5 appear on the next and so on.

Calc is a new feature in CSS that lets us perform arithmetic on an assortment of units.

calc(33.33% -20px) in CSS

Margin kind of breaks flexbox because margin lies outside the box in a CSS box model

—

Order

The default order for everything is 0

Anything greater than 0 goes at the end

Negative order comes first, i.e before the default items with no order set.

Order is useful in responsive design

*When you select elements they get selected in original order in HTML document. So it should be carefully used especially where text has to be copied.

—

Aligning and centering

justify-content: How the items are aligned on the main-axis. Possible values:

flex-start

flex-end

center

space-between

space-around

mistyrose is a nice color.

align-items: How the items are aligned in the cross-axis

Needs to have some height for it to work.

Default is set to stretch

flex-start: top

flex-end: bottom

*baseline: The bottom of the text in all items is aligned at the same level, irrespective of the size of each item.

If you flip axes, i.e use flex-direction:column; the baseline aligns on left side instead of the bottom.

align-content:  Works on cross axis. Works only if we have multiple lines of content. Needs wrap. Deals with the extra space in cross axis.

Default is stretch.

With align-content set to center, to bring item#10 to the center, use justify-content:center.

justify-content:center.

align-self applies an exception to a flex-item attribute. So if all items are aligned at flex-start, we can apply flex-end to just one item.

align-self: flex-end;

—

flex-grow is how much of the extra space available should that element take. If element a has flex-grow:1; and no other element has flex-grow, all of the extra space will be given to element a.

flex-shrink is how should the element behave when there is no extra space, and lesser space than enough to hold the natural size of the elements. So if flex-shrink is 1 for all elements, all the elements will shrink equally.

if flex-shrink:10; on element a, a shrinks 10 times as much as the other elements do.

*if you set min-height:100vh; to a flex-direction:column, it flows from top to bottom. But if you assign height:100vh, it causes the elements that can’t fit in 100vh due to their flex-basis to move into another column, from top to bottom.

*If you want to use wrap, the parent needs to have some width

default align-items is set to stretch. If you set align-items to center, the sizes of elements may not be stretched to equal others but may vary from element to element.

flex:0 1; means do nothing on extra space

And that pretty much sums it up!