some html & css notes

5-24-25 object-fit: contain; need to specify img or video dimensions to work. The image will be cropped to fit into the defined dimensions of the container while maintaining its aspect ratio. article link

object-fit: contain;

flex-flow

flex-flow is shorthand for flex-direction & flex-wrap properties which defines the containers main & cross axes.

flex

flex is shorthand for flex-grow, flex-shrink, and flex-basis combined. The 2nd parameter is for flex-shrink, and the third is for flex-basis & are optional. The default values are 0 1 auto. If using a singular value for flex, that will set flex-basis to 0% and keeps flex-shrink at it's default value -> 3 1 0%

flex-grow

defines the ability for a flex item to grow if necessary by dictating what amount of the space inside the flex container the item should take up. if flex-grow is set to 1, then all children will distribute the remaining space equally. if a child has flex-grow and its value is set to 2, that child will take up twice as much space as either one of the other children. Negative numbers are invalid.

flexbox

 
.outer{
    position: relative;
    }

.inner {
    position: absolute;
}

To position an absolute element that respects the borders of its parent element so that it isn't just floating around randomly, the parent element must have position: relative;. this works because the position: absolute; attribute will position the element in relation to the nearest parent element that has the position: absolute; OR position: relative; attribute.

absolute positioning
  1. Go to Figma and open "Washi Tape Free Elements" design Link
  2. Click on "file" then "all vector elements"
  3. Select one washi tape design that I like. In the layers section click on the down arrow to expand to see the element details
  4. Edit the element to look how I want
  5. To change the background select on the vector that is the full shape of the element, click on "fill", click on the image icon, select an image from my files that I want to be the full background
  6. Go to "export" section and click the "+" button to add the element. select "png" then click the "export vector" button
  7. Import into HTML as an "image"

customizing washis from figma