CSS Layout & Box Model Flashcards

Which CSS property defines layout display type?: display property.
Which display value creates a flex container?: display:flex.
Which display value creates a grid container?: display:grid.
Which property sets flex direction?: flex-direction property.
Which property aligns items horizontally in flexbox?: justify-content property.
Which property aligns items vertically in flexbox?: align-items property.
Which property allows wrapping in flexbox?: flex-wrap property.
Which property sets spacing between grid columns?: column-gap property.
Which property sets spacing between grid rows?: row-gap property.
Which shorthand sets row and column gap?: gap property.
Which property defines grid columns?: grid-template-columns.
Which property defines grid rows?: grid-template-rows.
Which property positions grid items?: grid-area property.
Which property allows element floating?: float property.
Which property clears floated elements?: clear property.
Which layout system uses rows and columns?: CSS Grid.
Which layout system is one-dimensional?: Flexbox.
Which property controls item growth in flexbox?: flex-grow property.
Which property controls item shrink in flexbox?: flex-shrink property.
Which property sets flex item base size?: flex-basis property.
Which property aligns single flex item?: align-self property.
Which property sets order of flex items?: order property.
Which CSS property centers block elements horizontally?: margin:auto.
Which property controls stacking order?: z-index property.
Which property defines element position method?: position property.
Which value fixes element to viewport?: position:fixed.
Which value positions relative to parent?: position:absolute.
Which value positions relative to itself?: position:relative.
Which property centers items in grid container?: place-items property.
Which property centers flex content both directions?: justify-content and align-items.
What does flex-direction:column do?: Stacks flex items vertically.
What does justify-content:center do?: Centers items horizontally in flex container.
What does align-items:center do?: Centers items vertically in flex container.
What does grid-template-columns:1fr 1fr mean?: Two equal columns.
What does fr unit represent in grid?: Fraction of available space.
What does auto-fit do in grid?: Automatically fits columns in available space.
What does auto-fill do in grid?: Fills container with columns even if empty.
Difference between flexbox and grid?: Flexbox is 1D layout, grid is 2D layout.
What does overflow:hidden do?: Clips overflowing content.
What does min-width do?: Sets minimum width element can shrink to.
What does max-width do?: Limits maximum width element can grow to.
What does aspect-ratio property do?: Maintains width/height ratio of element.
What does grid-area specify?: Grid row and column placement.
What does align-content do?: Aligns flex/grid rows within container.
What does place-content do?: Shortcut for align-content and justify-content.
Why use CSS Grid over Flexbox?: Grid handles complex two-dimensional layouts better.
What problem does clearfix solve?: It prevents container collapse from floated elements.
What is layout reflow?: Browser recalculating element positions after changes.
What is layout shift?: Unexpected movement of elements during page load.
What is responsive layout?: Layout that adapts to different screen sizes.