Flex Layout Flashcards
What is the Flexbox Layout?
Aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
What is the main idea behind the flex layout?
To give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
T or F: Flex lack flexibility to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
True
When is flexbox layout most appropriate?
Flexbox layout is most appropriate to the components of an application, and small-scale, while the Grid layout is intended for larger scale layouts.
The _____ defines a flex container. It enables a flex context for all its direct children.
display
What are the two given values for display:?
flex(block) or inline-flex(inline)
This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
flex-direction
T or F: Flex is a single-direction layout concept.
True
* Think of flex items as primarily laying out either in horizontal rows or vertical columns.
What are the values for flex-direction:?
row, row-reverse, column, and column-reverse
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with which property?
flex-wrap
What are the values for flex-wrap?
nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
What is the shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes?
flex-flow: ||
This property defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
justify-content:
What are the values of justify-content: ?
flex-start, flex-end, start, end, left, right, center, space-between, space-around, and space-evenly
What are the values safe and unsafe?
Using safe ensures that however you do this type of positioning, you can’t push an element such that it renders off-screen (e.g. off the top) in such a way the content can’t be scrolled too (called “data loss”).
This property defines the default behavior for how flex items are laid out along the cross axis on the current line. The justify-content version for the cross-axis.
align-items:
What are the values for align-items:?
stretch (default): stretch to fill the container (still respect min-width/max-width)
flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
This property aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
align-content
What are the values of align-content?
flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.
flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
center: items centered in the container
space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: items evenly distributed with equal space around each line
space-evenly: items are evenly distributed with equal space around them
stretch (default): lines stretch to take up the remaining space
The property that controls the order in which they appear in the flex container
order: ;
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
flex-grow: ;
This defines the ability for a flex item to shrink if necessary
flex-shrink: ;
This property defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated). The content keyword means “size it based on the item’s content” - this keyword isn’t well supported yet, so it’s hard to test and harder to know what its brethren max-content, min-content, and fit-content do.
.item {
flex-basis: | auto;
What is the shorthand for lex-grow, flex-shrink and flex-basis combined?
flex: flex-grow flex-shrink flex-basis;
It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.
This property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Note that float, clear and vertical-align have no effect on a flex item.
