Flexbox
1. For Container:
- float, clear, vertical-align for the items inside flexbox will become invalid
- display: inline-flex vs display: flex:—-only apply to flex container, to make it display as inline or block won’t affect flex items
inside - prosperities:
- flex-direction: row | row-reverse | column | column-reverse
- flex-wrap: break new line or not when exceeding it container nowrap | wrap | wrap-reverse;
- flex-flow: combination of the first two flex-direction || flex-wrap;
- align-items: where flex items sit on the cross axis
flex-start | flex-end | center | baseline | stretch; - justify-content: where the flex items sit on the main axis flex-start | flex-end | center | space-between | space-around
2. For flex items:
- flex: 1 1 20px: three attributes: flex-grow flex-shrink flex-basis
- order: 3: like the smaller will be put in front
- align-self: override its container’s align-items layout, update position of itself
CSS Grid
1. Common properties for container:
Use “display: grid;” in container
- grid-gap: 20px;
- grid-template-columns: 300px 300px 300px;
- grid-template-columns: 300px 300px 300px;
- grid-template-columns: 300px 300px 1fr;
- grid-template-columns: 300px 1fr 1fr;
- grid-template-columns: 1fr 1fr 1fr;
- grid-template-columns: repeat(3, 1fr); /how many times to repeat what/
- grid-template-columns: auto 1fr 1fr; /auto = max size of content/
- grid-template-rows: 1fr 1fr 1fr;
- grid-template-columns: repeat(auto-fill, 200px);
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- justify-items: end;
- align-items: end;
2. Common properties for chidren
- grid-column: span 2; /high number will cause it to create extra grids even if we didn’t tell it/
- grid-row: span 2;
- grid-column-start: 2;
- grid-column-end: 4;
- grid-column: 2 / 4;
- grid-column: 2 / -1; / span it to the last track /
- grid-row: 2 / -1; /but you need to define rows in the container/
- justify-self: end;
- align-self: end;
近期评论