Front end darsliklari moduli html, css, javascript
Download 105.45 Kb.
|
FRONT END full notes (7) (2022 05 08 17 42 47 UTC)
3. CSS – INTERMEDIATE
• Flexbox • Flex Container: flex-direction, flex-wrap, justify-content, align-items… • Flex Items: order, flex-grow, flex-shrink, flex, flex-basis, align-self flex-direction: row-reverse; // column-reverse; flex-wrap: wrap; 1
2
3
4
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The flex-basis property specifies the initial length of a flex item. The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. flex: 0 0 200px Start with 600px height&width div align-self: center "align-self: flex-start;" aligns the selected flex item at the top of the container. "align-self: flex-end;" aligns the selected flex item at the bottom of the container. #vazifa https://jolly-kalam-23776e.netlify.app/cssgridresponsive/#section-b 4. HTML + CSS PROJECT W3schools.com 5. CSS – INTERMEDIATE • GRID Introduction; • Grid Container • Grid Item display: inline-grid; // grid grid-column-gap grid-row-gap grid-gap grid-gap: 50px 100px; // row column .item1 { grid-column-start: 1; // col-end grid-column-end: 3; //row-end } grid-template-columns:auto auto auto auto; { display: grid; justify-content: space-evenly; // space-around // space-between; // start //end also:{ display: grid; align-content: start; } grid-column: 1 / 5; // grid-column-start grid-column-end grid-column: 1 / span 3; // span 3 cols grid-row: 1 / 4; grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat( 12, minmax(250px, 1fr) ); grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); // fills container start with 7 divs grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) ); // fits the container Download 105.45 Kb. Do'stlaringiz bilan baham: |
Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling
ma'muriyatiga murojaat qiling