gap, row-gap, column-gap
.flex-container {
display: flex;
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}It applies spacing, but only between items not on the outer edges.
gap, row-gap, column-gap
.flex-container {
display: flex;
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
D.I.Y
Flex-items properties
The flex-items properties that apply to the children (flex-items) of the flex container directly.
-
order - (number), default:
0, items along the main-axis, lower to higher order value, - flex-grow - (number), flex-grows by space available,
- flex-shrink - item shrinks if necessary,
- flex-basis - defines size of the item, in any unit,
-
flex - shorthand for
flex-grow flex-shrink flex-basis -
align-self - works exactly like
align-items, for one item.
<img/> tag:
The problem with having background images, with CSS:
- they need to be scaled properly (without losses)
- they need to be styled
Solution:
the HTML's <img> tag
<img
class="image"
src="https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg"
alt="MDN Logo"
/>D.I.Y
Create the following layout, and add gaps to them.
D.I.Y
Create the following layout, and add gaps to them.
D.I.Y
Create the following layout, and add gaps to them.
D.I.Y
Create the following layout, and add gaps to them.
W1_D4
By Yash Priyam
