Flexbox & Grid

Question 1

display: flex;

Answer 1

Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.

Question 2

flex-direction

Answer 2

flex-direction: row;
or
flex-direction: column;

Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column.

Creating a row will align the children horizontally, and creating a column will align the children vertically.

Question 3

justify-content: ; property

Answer 3

Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way.

Question 4

flexbox is going to get shitty

Answer 4

check the bookmark folder for the CSS flexbox graphic. it will show you how flexbox addresses sizing the x and y axis of objects.

Question 5

flex-wrap

Answer 5

CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.

However, using the flex-wrap property tells CSS to wrap items.

CSS also has options for the direction of the wrap:

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.

Question 6

properties that can all be set together by using flex?

Answer 6

There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis

flex: 1 0 10px;

Question 7

display: grid;

Answer 7

Turns any HTML element into a grid container by setting its display property to grid.

Question 8

To add some columns to the grid, use

Answer 8

grid-template-columns: 50px 50px;

Question 9

you add rows to the grid with

Answer 9

grid-template-row: 100px 100px;

Question 10

how do you size rows and columns in grid?

Answer 10

You can use absolute and relative units CSS Grid to define the size of rows and columns.

units like px, em, fr, auto, %

Question 11

what do fr, %, auto each do when used with css grid?

Answer 11

can set the rows or clolumns to different sizes based on:

fr: sets the column or row to a fraction of the available space,
auto: sets the column or row to the width or height of its content automatically,

%: adjusts the column or row to the percent width of its container.

Question 12

add a gap in between the columns/row?

Answer 12

grid-column-gap: 10px;

grid-row-gap: 10px;

Question 13

grid-gap

Answer 13

If grid-gap has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.

grid-gap: 10px 20px;

Question 14

properties not just for the grid container, but for the grid property themselves:

Answer 14

grid-column

To control the number of columns an item will consume, you can use the grid-column property in conjunction with the line numbers you want the item to start and stop at.

Here’s an example:

grid-column: 1 / 3;

This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.

(google css grid line numbers if this is confusing)

Question 15

whats the quicker way to create many rows and columns in CSS grid?

Answer 15

use repeat

grid-template-rows: repeat(100, 50px);

setting up repeat like above will create 100 rows, at 50px each.

Question 16

what do you with the css grid function minmax?

Answer 16

t’s used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:

grid-template-columns: 100px minmax(50px, 200px);

In the code above, grid-template-columns is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.