CSS Flashcards
how to enable flexbox
display: flex;
how to justify flexbox
justify-content:
what are the options to justify content in flexbox
centre flex-start flex-end space-around apace-between
how to vertically align items in flexbox
align-items:
what are the vertical alignment options in flexbox
centre flex-start flex-end baseline stretch
how to specify the direction
flex-direction: row, column
default direction of flexbox
row (side by side)
flex shortcut
flex: 0 0 10px (grow shrink basis)
use a media query
@media (max-height: 800px){
p {
font-size: 10px;
}
}what does align-self do?
Center the alignments for one of the items inside a flexible element
allows to switch up elements alignment individually
The align-self property ____ the flexible container’s align-items property.
overrides
How to make images responsive? (Example code)
img {
max-width: 100%;
display: block;
height: auto;
}what are viewport units relative to?
device
what are % units relative to?
size of the container
The grid-column is a shorthand property for
grid-column-start and grid-column-end.
grid-column specifies
grid item’s size and location within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement
default flex justification
flex-start
justify-content aligns down the ___ axis
vertical
align-items aligns down the ___ axis
horizontal
flex: grow shrink basis - what do they mean?
flex-basis: sets the size
flex-shrink: sets the shrink factor of elements
flex-grow: sets the grow factor of elements
what is the css equivalent of <strong></strong>
font-weight: bold;
How to create overlapping elements with CSS (code)
first {
position: absolute;
}
second {
position: absolute;
top: 90px;}
center block with
margin: auto;
box-shadow settings
offset-x offset-y blur-radius spread-radius color
