|
Front end darsliklari moduli html, css, javascript
|
| bet | 3/12 | | Sana | 11.04.2023 | | Hajmi | 105.45 Kb. | | #50258 |
Bog'liq FRONT END full notes (7) (2022 05 08 17 42 47 UTC) 00, mansur, 1, 2, 3-иловалар(1), Алишер, 1673 (1), MI-102 guruh Ergasheva M3. 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
|
| |
