CSS Flexbox Flashcards
What does display: flex do to a element?
Turns it into a flex container. This makes it possible to align any children of that element into rows and columns.
What does the flex-direction do?
By setting it to row or column on the parent, row will align children horizontally and column will vertically.
Explain the usage of justify-content with the main-axis.
The main axis the line that cuts the column or the row of the flex. There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is justify-content: center;, which aligns all the flex items to the center inside the flex container.
Explain the align-items property
It’s similar to the justify-content property. Rows main axis is horizontal and for columns it’s vertical. There’s also a cross axis which is the opposite so for Rows it’s vertical and for columns it’s horizontal. Align-items aligns them on the cross axis. . For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container
What are some of the values of the align-items property?
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 baselines. Baseline is a text concept, think of it as the line that the letters sit on.
What does the flex-wrap property do?
Split a flex-item into multiple rows or columns as by default flex will have all items be together. Like a row all in one line. Flex-wrap tells CSS to wrap items meaning extra items move to a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
What are some of the options for the direction of the wrap?
nowrap: this is the default setting, and does not wrap items.
wrap: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.
wrap-reverse: wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column.
