The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
Container and Items
In flexbox we have a container and it’s items. These are the two components of any flexbox component. Any html element that is a direct child of the flexbox container, becomes a flexbox item.
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
I can ceneter an element responsively like below
In CSS I will have
spacer: {
flex: "1 1 100%";
}
And then to center “Some Element”
<div className={classes.spacer} />
... Some Element ...
<div className={classes.spacer} />
Explanation
1> < flex: 1 1 100% > – With < flex: 1 1 100% > I am making ‘spacer’ to stay full-width. And then adding two ‘spacer’ class to both side of the ‘Some Element’ to make the ‘Some Element get centered.
A) 100% – this % is the ‘flex-basis’. Its a sub-property of the Flexible Box Layout module. It specifies the initial size of the flexible item, before any available space is distributed according to the flex factors. If the element is not a flexible item, the flex-basis property has no effect. flex-basis can be a number (e.g. 100px) representing a length unit, or percentage, )
B) The general syntax – flex : flex-grow | flex-shrink | flex-basis And Default values it takes is : 0 1 auto (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
flex-grow – defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others. https://css-tricks.com/almanac/properties/f/flex-grow/
flex-shrink – specifies the “flex shrink factor”, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row. When omitted, it is set to 1 and the flex shrink factor is multiplied by the flex basis when distributing negative space.
SO, in the example above, if I want to expand the middle element’s width, I use flex-shrink to make it ‘2’ instead of ‘1’
C) The general way flex work – You need to add display:flex to the parent tag for and then flex:1 to the child to enable the child to expand to 100% of parent.
flex – This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.
Even though they can do similar things, they are completely different.
Margin is part of the box model, which also includes padding and border. Box model styles change the size of the object itself.
For instance, if you have an image with the below style:
.my_box {
display:block;
margin-left:10px;
}
The elements with the my_box class would get 10 pixels margin added on the left side of the box.
Top, left, etc
These are positions, which instead of adding to the size of the elements box model, literally tell the elements where to be.
.my_box {
display:block;
left:10px;
}
The above style would tell that element to be 10 pixels from the left of its container (if position:relative, or the page (if position:absolute).
With relative positioning, you learned that the top, right, bottom and left properties could be used to specify the position of the box. You use the same properties to specify the position of an absolutely positioned box, but the way you use them is quite different.
For a relatively positioned element, the four properties specify the relative distance to shift the generated box. Remember that in the case of relative positioning they complement one another, so that top:1em and bottom:-1em means the same, and it’s not meaningful to specify both top and bottom (or left and right) for the same element, because one of the values will be ignored.
These points are not true in the case of absolute positioning. Here, all four properties can be used at the same time, to specify the distance from each edge of the positioned element to the corresponding edge of the containing block. You can also specify the position of one of the corners of the absolutely positioned box—say by using top and left—and then specify the dimensions of the box using width and height (or just use no width and height if you want to let it shrink-wrap to fit its contents).
