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
What does the item property “order” allow devs to do?
It allows them to target individual items (child elements in a flex container) and change their order specifically, regardless of where they ‘live’ in the HTML.
The default order given is 0, so anything less than 0 (-1, -2) will come first (or second, third, etc, depending on the number you assign each item).
Assign a number to every element to avoid using negatives if you prefer.
What is the {flex-grow: ;} property, and how is it used?
This property allows for flex items to take different amounts of available space depending on their importance, or the size of their content.
Example: For a blog you may want the sidebar to be half the size of the main content box, while still sharing the same line.
A number will be assigned to each child.
For example
sidebar {
flex-grow: 1;
}
main-content {
flex-grow: 8;
}
The main-content will take 8x as much of the white space as the sidebar.
Note: Flex-grow uses ratios to assign value
What is the {align-self: ;} property?
<p>Item property targeting <strong><u>one</u></strong> item inside of a flex container. </p>
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.
What is the {flex-shrink: ;} property?
Much like flex-grow, this item property lets a developer assign which elements will shrink more or less than others when screen space (viewport height or width) is limited.
Default value is 1, so negative numbers cannot be used. An element with a flex-shrink of 2 will shrink TWICE AS MUCH as element with a value of 1.
Tip: This property uses ratios to establish value.
Why might a developer use the {order: ;} property in flexbox to change the visual order of elements on a page?
To improve screen-reader accessibility.
For example, on a blog we would want the screen-reader to convey the main content of the blog before reading the sidebar content.
flew-grow grows items along the ___-axis.
<p>Flex-grow grows elements by ratios along the <strong><u>main-axis</u></strong></p>
.
<p><i>True</i> or <i>False</i>: Flex-grow must be applied to the items themselves?</p>
True
Flex-grow only takes place when assigned to the elements inside of a flex container, and it is given value using ratios.
Describe what the {object-fit: ;} property does and why it is useful?
Object-fit allows for sizing images to fit a container using ratios, which is useful because it preserves the image’s ratios for prettier, non-squished images on the page!
Give an example of an {object-fit: ;} value
fill contain cover scale-down none
