Front end darsliklari moduli html, css, javascript

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