11 CSS Flexbox Flashcards
Turn element into flex container, where children are arranged into rows and columns
display:flex;
Set a flex container to rows or columns
flex-direction: row
flex-direction: column
row-reverse and column reverse switch the direction of the elements
What is x axis called?
What is the y axis called?
x- main
y- cross
Align the items inside a flex container along the main axis
Do the same for the cross axis
For a row, this push the items to the left of the container.
For a column, this pushes the items to the top of the container.
justify-content: flex-start;
align-items: flex-start;
Options for Positional alignment for the x-main direction
7
justify-content: center; /* Pack items around the center /
justify-content: start; / Pack items from the start /
justify-content: end; / Pack items from the end /
justify-content: flex-start; / Pack flex items from the start /
justify-content: flex-end; / Pack flex items from the end /
justify-content: left; / Pack items from the left /
justify-content: right; / Pack items from the right */
Options for distributtional alignment for main axis (left to right alignment)
(4)
justify-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end /
justify-content: space-around; / Distribute items evenly
Items have a half-size space
on either end /
justify-content: space-evenly; / Distribute items evenly
Items have equal space around them /
justify-content: stretch; / Distribute items evenly
Stretch ‘auto’-sized items to fit
the container */
Options for Positional alignment in the y-cross direction (aligning top to bottom)
(5)
align-items: center; /* Pack items around the center /
align-items: start; / Pack items from the start /
align-items: end; / Pack items from the end /
align-items: flex-start; / Pack flex items from the start /
align-items: flex-end; / Pack flex items from the end */
Split up the items to go on another column or row when there’s not enough space
(plus 3 other options)
flex-wrap: wrap;
also:
nowrap: this is the default setting, and does not wrap items.
wrap: wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns.
wrap-reverse: wraps items onto multiple lines from bottom-to-top if they are in rows and right-to-left if they are in columns.
Set the rate the boxes change size as the window shrinks
flex-shink: number;
two items with flex-shrink:1 will be the same size
one flex-shrink:1, the other flex-shrink:2
The flex-shrink:2 items will be half the size of flex-shrink:1
flex-shrink:3 will be 1/3 the size of flex-shrink:1
Set the rate the boxes change size as the window grows
flex-grow: number;
flex-grow: 2 is twice as large as flex-grow:1
Have a max size/default size for a flex box
They will only shrink when the frame is too small for the default size
flex-basis: px, em, %
flexbox shorthand
flex: (flex-grow number) (flex-shrink number) (flex basis)
change order of items in a flexbox
order: 1
order: 2
align a child
align-self:
overrides align-items
Uses the same values as “align-items”
flex-start: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.
flex-end: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.
center: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).
stretch: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no align-items value is specified.
baseline: align items to their base
What is the difference between end and flex-end? (start and flex-start)
One value (end) is defined in the CSS Box Alignment specification, and is intended to apply to multiple box layout models (block, table, grid, flex, etc.)
The other value (flex-end) is defined in the CSS flexbox specification, and is intended to apply only to flex layout.
With the Box Alignment spec, the W3C is attempting to establish a universal language for the alignment of boxes in CSS. Eventually, the Box Alignment values will supersede the particular values defined in flex, grid and other specs.
For example:
end will be used instead of flex-end column-gap will be used instead of grid-column-gap and so on.
