Topic #1: CSS Flexbox
Before the Flexbox Layout module, there were four layout modes, (Block)- sections in a webpage, (Inline), mainly for text, (Table)- for two-dimensional table data, and (Positioned)- for explicit position of an element. The Flexible Box layout module makes it easier to design flexible, responsive layout structures without using float or positioning.
(div class="flex-container")
div1/div
div2/div
div3/div
/div
Above is how you would create a flexible container with three flex items (1,2,3)
Topic #2: CSS Flexbox container
The flex container becomes flexible by setting the display property to flex:
.flex-container {
display: flex;
}
There are 5 .flex-container properties:
Flex-direction: defines in which direction the container wants to stack the flex items.
-Column value stacks the flex items vertically(up-down)
.flex-container {
display: flex;
flex-direction: column;
}
-column-reverse stacks the flex items vertically (bottom-top)
-row value stacks the flex items horizontally (left-right)
-row-reverse stacks the flex items horizontally (right-left)
Flex-wrap: specifies whether the flex item should wrap or not
-wrap value will wrap values (if there’s enough to reach the side of flex-container
.flex-container {
display: flex;
flex-wrap: wrap;
}
-nowrap value will not wrap values (default)
-wrap-reverse value will wrap values (if there’s enough to reach the side of flex-container) in reverse order
Flex-flow: shorthand property for setting both flex-direction and flex-wrap
.flex-container {
display: flex;
flex-flow: row wrap;
}
Justify-content: property is used to align the flex items
-center value will align flex items to the center
.flex-container {
display: flex;
justify-content: center;
}
-flex-start value aligns the flex items to the beginning of the container
-flex-end value aligns the flex items to the end of the container
-space-around value displays the flex items with space before, between, and after the lines
-space-between value displays the flex items with space between the lines
Aligin-content: used to align the flex items
-center value aligns the content to the middle of the container
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
-flex-start value aligns the items to the top of container
-flex-end value aligns the items to the bottom of container
-stretch value stretches the items to fill the container (default)
-baseline value aligns the items such as their baseline aligns (text size will effect the size of flex items this way
Topic #3: CSS Flexbox Items
Child elements (items)-The direct child elements of a flex container automatically becomes flexible (flex items)
Order-Specifies the order of the flex items (default is 0)
/*/ means <>
/div class="flex-container"/
/div style="order: 3"/1//div
/div style="order: 2"/2/div/
/div style="order: 4"/3//div/
/div style="order: 1"/4//div/
/div/
Flex-grow-Specifies how much as flex-item will grow relative to the rest of the flex items (default is 0)
/div class="flex-container"/
/div style="flex-grow: 1"/1//div/
/div style="flex-grow: 1"/2/div/
/div style="flex-grow: 8"/3//div/
//div/
Flex-shrink-Same as above, but the item will shrink (default is 0)
/div class="flex-container"/
/div/1//div/
/div/2//div/
/div style="flex-shrink: 0"/3/div/ (not shrinking)
/div/4//div/
/div/5//div/
/div/6//div/
/div/7//div/
/div/8//div/
/div/9//div/
/div/10//div/
//div/
Flex-basis-Specifies the initial length of a flex-item
/div class="flex-container"/
/div/1//div/
/div/2//div/
/div style="flex-basis: 200px"/3//div/
/div/4//div/
//div/
Flex-Shorthand property for flex-grow,shrink,and basis
/div class="flex-container"/
/div/1//div/
/div/2//div/
/div style="flex: 0 0 200px"/3//div/ (grow-0, shrink-0, basis-200)
/div/4//div/
//div/
Align-self-The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container's align-items property.
/div class="flex-container"/
/div/1//div/
/div/2//div/
/div style="align-self: center"/3//div/
/div/4//div/
//div/
/div class="flex-container"/
/div/1//div/
/div style="align-self: flex-start"/2//div/
/div style="align-self: flex-end"/3//div/
/div/4//div/
//div/