Mais conteúdo relacionado Semelhante a CSS Flexbox and Grid Layouts (20) CSS Flexbox and Grid Layouts8. Flexbox
• One Dimensional layout model
• Alters Width/Height of items based on
container size
• Truely flexible(change, resize, stretch,
shirnk)
10. Properties for Flex Container
• display:flex/inline-flex
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
https://codepen.io/AnanthAkr/pen/pozQRNq
11. Properties for Flex Items
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
https://codepen.io/AnanthAkr/pen/pozQRNq
14. Grid
• Two Dimensional layout model
• Can align page into columns and rows
• Very powerful layout system
• Can be used to create any type of layouts
17. Properties for Grid Container
• display:grid/inner-grid
• grid-template-columns & grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap & grid-row-gap
• grid-gap
• justify-item, align-items & place-items
• justify-content, align-content & place-content
• grid-auto-columns & grid-auto-rows
• grid-auto-flow
• grid
https://codepen.io/AnanthAkr/pen/mdbaMEx
https://codepen.io/AnanthAkr/pen/pozQQPQ
18. Properties for Grid Item
• grid-column-start & grid-column-end
• grid-row-start & grid-row-end
• grid-column & grid-row
• grid-area
• justify-self, align-self & place-self
https://codepen.io/AnanthAkr/pen/gOYQEpm