flex Flashcards
css: To make a flex container that stretches the whole width with items lining up from left to right, type
.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
css: To make a flex container that stretches the whole width with items lining up from top to bottom, type
.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
css: flex containers take up
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;
css: To allow flex items inside a flex container to wrap instead of overflowing by default, type
.container {
flex-wrap: wrap;
}
note: This goes on the container, not items
css: To align all the flex items in the center of their container, type
justify-content: center;
note:
to justify to the right, type
justify-content: flex-end;
css: To make the flex items spread out with even space between them, type
justify-content: space-around;
or
justify-content: space-between;
css: To vertically center flex items in row mode, type
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.
css: To change the alignment on just one of the flex items, type
.flex-item-2 {
self-align: center;
}
css: To set the max-width of a flex item, type
.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.
css: Flexbox containers are always by default
flex-direction: row;
even if they are nested in a flexbox thats flex-direction: column;
css: To create a flex container with 2 fixed width items and one flexible, type
https://stackoverflow.com/questions/23794713/how-can-i-have-two-fixed-width-columns-with-one-flexible-column-in-the-center
css: You can think of flex-basis exactly like
max-width for flex items
https://www.youtube.com/watch?v=j5RxNRFWMwo&index=6&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG
css: To prevent a flex item from shrinking you, set
flex-shrink: 0;
css: A flex item can simultaneously be a
flex container
css: basically to get the mobile layouts I want, I must
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.
css: Any element can be a
flex item
css: You can make a flex item grow by
setting flex-grow to something, or by setting one of its inner elements to width 100%
css: all of the children of a flex container are automatically
flex items
css: setting all flex items in a container to flex: 1; does not automatically set them to have equal widths because
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
learn how to use 60vw and vh in css viewport width
its similar to a percenttage
to imitate a large screen
zoom out a lot
to disable cache in chrome
go to network and click disable cache.
to uncache an image
add a query string, since caches use the url to know which item was previously loaded.
to see which event listeners get triggered when you click on something
console, sources, event listener breakpoints, and then check the event you want to get a breakpoint on
map, filter, reduce functions
https://stackoverflow.com/questions/49934992/main-difference-between-map-and-reduce
footer
-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; }