Front end darsliklari moduli html, css, javascript


Download 105.45 Kb.
bet3/12
Sana15.02.2023
Hajmi105.45 Kb.
#1200512
1   2   3   4   5   6   7   8   9   ...   12
Bog'liq
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:
1   2   3   4   5   6   7   8   9   ...   12




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling