Flexbox/Flexible Box Layout simplifies how to position elements.
-Flex containers and Flex items
Flex containers are elements on page that contains flex items
Flex containers set up using display property with flex or inline-flex
-Flex containers useful when in regards to changes in screen sizes
-Difference between display-flex and display-inline-flex:
Flex is like a block level element which will take up the whole width of the page of the parent element while inline flex will take up only the necessary space and can share space with other elements side by side
-Justify Content Property (5)(Horizontal sorting)
flex-start
flex-end
center
space-around
space-between
-Align Items (Deals with vertical sorting)
flex-start
flex-end
center
baseline
stretch
-Flex grow property deals with very big parent container compared to its children
-Flex shrink
-Flex basis
-Be aware that there is the flex property and then a flex value within display property
Can declare flex property in one line (grow, shrink, basis)
-Flex wrap
Instead of wanting elements to shrink, may instead want to put onto next line if possible
Wrap
Wrap reverse
Nowrap
-Align Content - like align items but instead of a single row, deals with aligning rows top though bottom (Declared on flex containers)
Common Values:
flex-start
flex-end
center
space-between
space-around
stretch
-Flex Containers have 2 axis (Main and Cross)
Main (Horizontal) Properties
justify-content
flex-wrap
flex-grow
flex-shrink
Cross(Vertical) Properties
align-item
align-content
Main and cross axis interchangeable with flex-direction
Flex Direction
column
column-reverse
row
row-reverse
Flex flow property: used to call flex wrap and direction in one line
Top comments (0)