flex

Question 1

css: To make a flex container that stretches the whole width with items lining up from left to right, type

Answer 1

.container {
display: flex;
flex-direction: row;
}

note: To make the items line up from right to left instead of left to right, use flex-direction: row-reverse;
note: these flex items will stretch the full height of the container

Question 2

css: To make a flex container that stretches the whole width with items lining up from top to bottom, type

Answer 2

.container {
display: flex;
flex-direction: column;
}

note: To make the items line up from right to left instead of left to right, use flex-direction: column-reverse;
note: these flex items will stretch the full width of the container

Question 3

css: flex containers take up

Answer 3

the full width (even when flex-direction: column;), but can shrink to just contain the flex items inside it if you use display: inline-flex; instead of display: flex;

Question 4

css: To allow flex items inside a flex container to wrap instead of overflowing by default, type

Answer 4

.container {
flex-wrap: wrap;
}

note: This goes on the container, not items

Question 5

css: To align all the flex items in the center of their container, type

Answer 5

justify-content: center;

note:
to justify to the right, type
justify-content: flex-end;

Question 6

css: To make the flex items spread out with even space between them, type

Answer 6

justify-content: space-around;

or

justify-content: space-between;

Question 7

css: To vertically center flex items in row mode, type

Answer 7

target the container

.container {
align-items: center;
}

Note: this can be used center inline elements when in column mode, but only if you use inline elements without section containers like the ones I normally use.

Question 8

css: To change the alignment on just one of the flex items, type

Answer 8

.flex-item-2 {
self-align: center;
}

Question 9

css: To set the max-width of a flex item, type

Answer 9

.item {
flex-basis: 10%; // flex-basis: 10px;
}

note: This is useful for when you are creating 1 section that stays the same height and then the last one has to grow to fit the screen using flex-grow: 1; Might also need to set flex-shrink: 0; to prevent the max-width from being able to shrink. flex-basis: 10px and flex-shrink: 0 together are effectively a static width.

Question 10

css: Flexbox containers are always by default

Answer 10

flex-direction: row;

even if they are nested in a flexbox thats flex-direction: column;

Question 11

css: To create a flex container with 2 fixed width items and one flexible, type

Answer 11

https://stackoverflow.com/questions/23794713/how-can-i-have-two-fixed-width-columns-with-one-flexible-column-in-the-center

Question 12

css: You can think of flex-basis exactly like

Answer 12

max-width for flex items

https://www.youtube.com/watch?v=j5RxNRFWMwo&index=6&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG

Question 13

css: To prevent a flex item from shrinking you, set

Answer 13

flex-shrink: 0;

Question 14

css: A flex item can simultaneously be a

Answer 14

flex container

Question 15

css: basically to get the mobile layouts I want, I must

Answer 15

create flex container that is the full height and width
set containers flex-direction to column
set the header sections flex-basis (max-width) to be a set amount
set the flex-shrink to 0 so it can’t shrink
set the header to be a flexbox container as well (display: flex;)
set the headers flex direction to column
set the headers justify-content to center
this way the text in the header will be vertically aligned

I do similar for bottom and the middle will stretch.

since I want to center align the content of each flex item, all the flex items will also need to be flex boxes.

Question 16

css: Any element can be a

Answer 16

flex item

Question 17

css: You can make a flex item grow by

Answer 17

setting flex-grow to something, or by setting one of its inner elements to width 100%

Question 18

css: all of the children of a flex container are automatically

Answer 18

flex items

Question 19

css: setting all flex items in a container to flex: 1; does not automatically set them to have equal widths because

Answer 19

if the items content differs in width it will make its section bigger, because it only distributes the free space which is added to the initial width of your items content.

to get equal widths, set flex-basis: 0; on all the flex items

https://stackoverflow.com/questions/25066214/flexbox-not-giving-equal-width-to-elements

Question 20

learn how to use 60vw and vh in css viewport width

Answer 20

its similar to a percenttage

Question 21

to imitate a large screen

Answer 21

zoom out a lot

Question 22

to disable cache in chrome

Answer 22

go to network and click disable cache.

Question 23

to uncache an image

Answer 23

add a query string, since caches use the url to know which item was previously loaded.

Question 24

to see which event listeners get triggered when you click on something

Answer 24

console, sources, event listener breakpoints, and then check the event you want to get a breakpoint on

Question 25

map, filter, reduce functions

Answer 25

https://stackoverflow.com/questions/49934992/main-difference-between-map-and-reduce

Question 26

footer

Answer 26

-body> -div class="content"> content -/div> -footer class="footer">-/footer> -/body> ``` .content { min-height: calc(100vh - 70px); } .footer { margin-top:20px; background:#efefef; padding:50px; } ```