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;