Creating Responsive Pages with CSS FlexBox Flashcards
Why does Flexbox exist? What does it deprecates?
To simplify responsive layout creation. Deprecates the float system.
What are the two main actors on flexbox?
The flexbox container and the flex item.
What’s flexbox container?
Parent object that contains flex items.
What’s flex item?
Primary objects within the flex container.
Are the flex behavior cascaded down to flex item’s inner elements?
No.
Can a flex item also be a flex container of other flex items?
Yes.
What does the “flexbox row” do?
Align the flex items in a row (horizontally)
What does the “flexbox column” do?
Align the flex items in columns (vertically).
What is the default direction of flexbox?
Row.
What is the main axis, what are the two coordinates it has? Can the direction be inverted?
Can be horizontal or vertical. Has the main start and main end. Yes.
What is the cross axis? What are the two coordinates it has?
Is perpendicular to the main axis. Can be horizontal or vertical (opposite direction of the main axis). Has the cross start and cross end.
How the main and cross axis sizes are determined?
Via the height and width of the flex items.
How to design a webpage using flexbox?
You need to define if the initial design is row or column. Then determine if inside these flex items there will be other flex containers (and their orientation - row or column)
How to make a container to become a flex container using css?
display: flex;
How to change the default behavior of the flex row to flex column using css?
flex-direction: column;
What is the shorthand to write a div with the class box on it?
write div.box then tab
What is the default behavior of the flex items when the screen is reduced?
All the flex items within the container will be squished accordingly and have the space distributed equally.
How to change the default behavior of the flex item of squishing the content to instead make items to go to the next page?
flex-wrap: wrap
How to arrange the flex items to have spaces in between?
justify-content: space-evenly
What does the align-items: center; do?
Align the items in of the cross axis.
What does the align-content do?
Align the items when multiple rows or columns are used. e.g: align-content: center
How to make a flex item to be placed in a different part of the screen?
You can use order. e.g: order: 1
How to make one flex item take twice more space than others? How to make twice as smaller than others?
flex-grow: 2
flex-shrink: 2
How to make a flex item to take 60% of the space available?
flex-basis: 60%
What does the align-self do?
Align the specific item. e.g: center.
When to not use flexbox? What should I use instead?
In complex systems… grids.
When to use flexbox?
For components.
