Section 9 - Flexbox Flashcards
When should you only use a table element?
when you’re trying to actually create a table
When should you not use the table element?
to layout the styling of your website
position: ____ takes blocks out of the normal flow of HTML and has them floating above the other content
position: absolute
How to use float correctly?
when you want to float an image to the left or right of a block of text to wrap the text around it
(do not use for layout)
In summary, how do you use Flexbox?
You drop your divs inside a container and then target that container in your CSS and set the display to “flex”
display: flex is a part of the display: inline, block, inline-block, none system. T or F?
False
display: flex is its own, completely different system with a different set of rules
Different elements by default will have ______
different elements by default will have different display values
By default, what display value does a div have?
it’s going to be a full-width block by default (across the entire page)
By default, what display value does span have?
by default it’s going to be an inline element
What happens to default display values when you enclose all of th elements you want to display inside a flexible container?
the default display values get ignored/overridden and Flexbox will lay everything out
The width of each of the elements inside the Flexbox will normally be based on the ___ ___
content size
(when overriding default display values for elements inside a container)
When using gap, how do you make the gap static and more responsive? (2)
static example - gap: ##px
responsive example - gap: #rem
What does rem mean again?
rem is a unit that is going to adapt based on the top-level size of your content
(is responsive)
What happens when you set a container to display: inline-flex?
Similar to inline-block, it allows the Flexbox to occupy as much space as it needs but it means that other things can also go on the same line
What are the 2 versions of creating a flexbox container that we learned?
display: flex
display: inline-flex
Does a flexbox container need to contain all divs?
No! It can contain whatever element you want to flex such as list items to create a horizontal nav bar
How do you get rid of bullet points in a list?
add list-style: none to a li element selector section
li {
list-style: none;
}
What are 2 ways to add numbers to a box model?
- px
- %
How do you indicate that there are multiple words when using a font-family name
use quotation marks around the name
ex: font-family: “Times New Roman”, serif
Is the table element still used in modern web design?
Yes, but only used when you’re actually trying to create a table not use it for positioning (like to show your sales, visitor counts, etc)
What method replaced the table property in terms of web page layout?
the display property
What are the 4 options for the display property?
- display: inline
- display: block
- display: inline-block
- display: none
Can you set the width/height with display: inline?
No, it defaults to the size of their content (HTML)
Can you set the width/height with display: inline-block?
Yes, and the elements can go inline with each other as well
What was the problem with using display property for layout purposes?
It’s a painful process to make it a specific style you want and it’s very inflexible (have to keep fiddling the more you add)
What was a better alternative to using table in the past?
float element (2005 - 2010)
Nowadays we only use float for what purpose?
to float an image to the left or right of a block of text to wrap the text around it
( use flexbox, grid, bootstrap, etc for page structure)
How do you add a space in between each column when using flex?
gap
ex:
gap: 10px;
What is the default HTML flow?
Things will continue stacking (either inline, or on top of each other if block) from the top to the bottom of the page.
By default, what is flex-direction set to?
row
flex-direction: row;
When it comes to flex-direction, a tip is to think about what?
the direction the next item is going to be stacked onto the page (left to right, top to bottom?)
When you have flex-direction: row, the main-axis and cross-axis are set to what direction?
main-axis: horizontal (left to right)
cross-axis: vertical (top to bottom)
When you have flex-direction: column, the main-axis and cross-axis are set to what direction?
main-axis: vertical (top to bottom)
cross-axis: horizontal (left to right)
flex-basis and a number of other properties are flexing along what?
the main-axis
What does the flex-basis property do?
Depending on the main-axis direction, it can tweak the width or the height
Can flex-basis be applied to a parent container?
No, it can only be applied to the items (child elements)
When flex-basis is applied to a container that has flex-direction: column, what is it changing?
the height (of each of the items inside the container)
When flex-basis is applied to a container that has flex-direction: row, what is it changing?
the width (of each of the items inside the container)
flex-direction directly impacts the direction of what?
the main-axis
One of the first things to differentiate between the different properties is asking what 2 questions?
- Is the property going onto the child (flex item)?
- Is the property going onto the parent?
What is a flex item?
another word for the child item
What is a child item?
The individual items contained within the flexible container
(the parent is the container holding them)
What does the order property do?
sets the order of the child items (can re-arrange specific elements)
By default, everything has an order of what number?
0
When using “order”, when you assign a big number where does that reposition the item?
to the furthest right
(lowest number will be on the left)
-1 0 4 7 10
What is the flex-wrap property used for?
for when you run out of space on the horizontal, tells children how to behave (wrap, nowrap)
Does the flex-wrap property target the child or parent?
parent
What does “flex-wrap:nowrap” do?
items pushed at the end don’t go onto the next line when out of space on that line
What happens if you keep adding items on a line with the “nowrap” property?
they will get pushed off the edge and won’t be visible anymore
As default behavior of Flexbox, the flex-wrap property is set to what?
flex-wrap: nowrap
How do you make items continue onto the next line when you run out of space? (they no longer fit in their full minimum width)
flex-wrap: wrap
What is the normal wrap direction that items will stack down to?
from the top-left corner to the bottom-right corner
What does “wrap-reverse” do?
flex-wrap: wrap-reverse wraps items but they go from the bottom-right corner to the top-left corner
What is the justify-content property?
sets the distribution of our items along the main axis
Is the justify-content property set on the child or the parent?
parent container
What are the 6 properties we can use with justify-content?
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
For us to be able to justify-content, what does there need to be?
Space left for us when all the items are expanded to their maximum width to be able to move the items around the line
What is a property used with justify-content that Angela said is a “godsend” of a property?
justify-content: center
(easy way of centering items in CSS)
justify-content: space-between is usually used on what?
websites so elements take up all available space and is evenly distributed
What does the align-items property do?
sets the distribution along the cross-axis
Is align-items set on the child or parent?
set on the parent container
For align-items to really work, we need to set what?
set the height of the container
How do you set the height of a container?
height: #vh
What does “vh” stand for? What is it? (2)
viewport height, basically the height of the window you’re using to view the page
What are 5 properties we can use with align-items?
- flex-start
- flex-end
- center
- stretch
- baseline
What is the align-self property?
used when you want to align one specific item (separates it from the group)
The align-self property is set on the child or the parent?
the child
What is the align-content property?
similar to align-items, it specifies how the content should align
align-content doesn’t work without what?
without setting the flex-wrap to “wrap”
When do you use align-items versus align-content?
you use align-content on the content that has moved to multiple lines
What is flex-flow?
a shorthand combination of flex-direction and flex-wrap. It accepts the value of the two properties separated by space
Example:
flex-flow: column wrap
flex-flow: row wrap
Paragraph elements by default have a default amount of what 2 things?
padding and margin
Paragraph elements by default are ___ ___
full width (block elements)
Flexbox’s default behavior when shrinking the viewport is what?
when it shrinks, it shrinks the flex items (to their minimum content width)
What’s the Priority List for Flexbox items, in order?
- min-width/max-width (Most important)
- flex-basis
- width
- content width
What determines the minimum content width?
the longest word in that entire line of text
What determines the maximum content width?
the longest line of text where it’s all on one line
What happens when you set the flex items to width: 100px and shrink the container?
It will try to honor that width until there’s not enough space left to accommodate it then it will shrink to the min-content width for each item
What takes priority, flex-basis or width?
flex-basis (it ignores any manually set width)
If you have a flex-basis of 200px and a max-width of 100px, which one wins?
max-width wins because it’s the maximum possible width
If you have a flex-basis that’s 50px and a max-width of 100px, which one wins?
the flex-basis, it will default to 50px but it will grow to a maximum width of 100px
If you have a flex-basis of 200px, and a min-width of 300px, which one wins?
the min-width
(when the min-width is larger than the flex-basis, it respects the min-width and shrinks it down to that size)
How do you turn off the flex, flex-grow, and flex-shrink properties?
set them to “0”
In the examples for flex-grow and flex-shrink, what determined the initial starting value for the width of the flex items?
the flex-basis (before the grow and shrink properties come into play)
If the flex-basis is set to 100px and flex-grow is on, flex-shrink is off, what happens then in regards to grow?
it will try to be 100px wide but because grow is on it’s going to increase the width of each of the items to fill up the container
If the flex-basis is set to 100px and flex-grow is on, flex-shrink is off, what happens in regards to shrink?
it reduces down to 100px but won’t go any further than that
If the flex-basis is 100px, flex-grow is off, flex-shrink is on, what happens when you shrink?
it’s not going to grow to fill the space because it’s off, and it’s going to shrink beyond the flex-basis size (100px) until it reaches that minimum (content) width
What’s the default setting/behavior of Flexbox items?
flex-grow: 0;
flex-shrink: 1;
(flex-shrink is on)
What happens if flex-grow and flex-shrink are both on? What happens to the flex-basis? (1)
they take up the max and min space possible and the flex-basis is ignored
What is the default for flex-basis?
auto
flex-basis: auto;
What is “auto” for flex-basis?
it gives more width/flex-basis to the items with more content
If you want your flex items to be the same width and flex-basis is set to auto, how do you change it?
turn off flex-basis by setting it to 0 to make all flex items equal width
What is the shorthand version of writing our flex-basis, flex-grow, flex-shrink/
flex: 1 1 0;
1 - grow
2 - shrink
3 - basis
How do you shorten the shorthand version of 3x flex even further and what does it mean?
flex: 1;
(grow of 1, shrink of 1, basis of 0)
How do you create containers with responsive ratios?
flex: 1;
flex: 2;
flex: 3;
The first will be half the size of the blue no matter viewport size, the second will be 2/3 the size of the third, etc
What rule can you set on a flexbox container that’s inside a parent container so that each child div is the same is equal in width and are allowed to grow and shrink?
flex: 1;
