Flexbox Flashcards
flex-wrap
The container property that dictates if a set of elements will be forced to share the same line, or if they can wrap into multiple lines
flex-wrap values
nowrap, wrap, or wrap-reverse
ex.
container {
flex-wrap: wrap;
}
“nowrap” is the default
flex-direction
Property that defines the direction and origin of the main axis.
{display: flex;}
Property assigned in a container to make it a flex container
justify-content
Container property that aligns the items in a flex container, there are many values that assign given space differently. (space-around, space-between, etc)
<p>Aligns along the <i>main axis</i>. </p>
Tip: When you see or use “justify-content” think about the main axis and where it is in your code.
justify-content values
flex-start, flex-end center space-between space-around space-evenly (initial inherit)
ex.
container {
justify-content: center;
}
align-content
This container property modifies the behavior of the flex-wrap property - but instead of aligning the flex items, it aligns the flex lines.
Meaning it controls the white space in lines of flex items.
Aligns along the cross axis.
Note: There must be multiple lines of items for this to take effect.
flex-direction values
row, row-reverse
column, column-reverse
initial
inherit
The flexbox module nests ___ elements deep
One
What property and value must be assigned to an element to make it a flex container?
display: flex;
Any element nested one level deep in a flex container is considered a what?
Flex item
What are the two main directions of flex-direction?
Row and column.
Row is the default.
What CSS property is shorthand for flex-direction and flex-wrap?
Flex-flow: DIRECTION-VALUE WRAP-VALUE;
Example
.container {
display: flex;
flex-flow: row wrap;
}
The above code will run the children elements in a default row, and wrap them to multiple lines
align-items
Container property that controls the alignments of the items or elements inside of a flex container.
Tip: When you see align-items or align-content, be mindful of where the cross axis exists in your code.
align-content values
stretch flex-start, flex-end space-around space-between center
align-items values
stretch
flext-start, flex-end
center
baseline
.container { display: flex; justify-content: center; align-items: center; }
What is the basic effect the above code will have in the container class?
Content inside the elements should be centered along both the main axis and cross axis - so it will appear in the center-middle of the box.
See ‘justify’ think: ____-axis
main-axis
See ‘align’ think: ____-axis
cross-axis
space-between
<p>This value assigns an even amount of space <strong><u>between</u></strong> elements. </p>
The elements sitting on the beginning and end of the row or column will run alongside the beginning of the row with no margin on the left and right respectively.
space-around
<p>Assigns equal value <strong><u>around</u></strong> every element, including the elements at the beginning of the row or column, all will have <i>equal space on all sides.</i></p>
Flex item properties control what?
Item properties control the flex items themselves, and how content will look in each individual flex item.
<p>Name some flex <strong><i>item</i></strong> properties:</p>
order flex-grow flex-shrink flex-basis align-self
Name some flex CONTAINER properties
flex-direction justify-content flex-wrap align-items align-content
Item property targeting one item inside of a flex container.
Changing an items code to {align-self:flex-end;}, for example, will align the item at the end of the row, even if it comes first in the HTML.Flex-grow grows elements by ratios along the main-axis
.True or False: Flex-grow must be applied to the items themselves?