Why am I staying? Why am I staying?

-

Why am I staying? Why am I staying?

I am learning the CSS box model today.

There are two important concepts here: 
  • flex containers
  • flex items
A flex container is an element on a page that contains flex items.  All direct child elements of a flex container are flex items.

"To designate an element as a flex container, set the element's display property to flex or inline-flex."

The lesson on Codecademy covers:

  • justify-content
  • align-items
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • flex-wrap
  • align-content
  • flex-direction
  • flex-flow

This is a lake where I went camping at 15 - Lac de Blanchemer. It is one of the 5 lakes that I post about so often on here.

The title is a reference to Lana del Rey's 'White Mustang' as this is a genius way that the lyrics of the chorus can be interpreted if you listen very closely.

Everything's whatever

Okay so it's a quoting Lana del Rey day today okay? Okay.

display: flex

"Flex containers are helpful tools for creating websites that respond to changes in screen sizes."

"Child elements of flex containers will change size and location in response to the size and position of parent container.


"In the example above, all divs with the class container are flex containers".

"If they have children, the children are FLEX ITEMS".

"A div with the declaration display: flex; will remain block level - no other elements will appear on the same line as it".

"However, it will change the behaviour of its child elements. Child elements will not begin on new lines."

inline-flex

When we give a block level element a display value of flex, it remains a block level element.

What if we want multiple flex containers to display inline with each other?

"If we didn't want div elements to be block-level elements, we would use display: inline".

However, with flexbox we can also use display: inline-flex to do so.


tl;dr I think that this allows you to put multiple flex containers inline with each other (inline-flex).

justify-content

Basically, changing the display value of a parent element affects the children.
"To position the items from left to right, we use a property called justify-content".

I learned about flex-end - it sends things to the right...

You can also use:
  • flex-start - sends things to the left
  • center - centers things
  • space-around - items will be positioned with equal space before and after them
  • space-between - "items will be positions with equal space between them - but no extra space before the first or after the last elements".

align-items

This little property is like justify-content but for vertical lines instead of horizontal ones.

The first three values it can have are the same as the above:
  • flex-start
  • flex-end
  • center
And they do similar kinds of things.

But then it has two new ones:
  • baseline - "the bottom of the content of all items will be aligned with each other".
  • and stretch

flex-grow

I can't remember the last time I did this much work in one day. 

"All flex items shrink proportionally when the container is too small". 

"However, if the parent container is larger than necessary then the flex items will not stretch by default. The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others". 





flex-shrink

This is very similar to the above but basically does the opposite.

The only interesting thing to note is that the default value of flex-shrink is 1 whereas the default value of flex-grow is 0.

flex-basis

"Another way of specifying the width of a flex item is with the flex-basis property. flex-basis allows us to specify the width of an item before it stretches or shrinks".

I don't understand this thing at all. 

But I have asked on my company internal questions channel. 

[might update after response].

Comments

Post a Comment

Popular posts from this blog

Hello World

-
Image
 Hello from Susanna Codes! Hi everyone,  My name is Susanna and I'm a 28-year-old aspiring software engineer from Brighton! As I type this, listening to music from "Le Fabuleux Destin d'Amelie Poulain" (it reminds me of home, in Luxembourg, where I am from - I'm missing home quite a lot lately!) and look forward to some Irish Cream tea in my afternoon break, I am thinking: How lucky I am that my amazing colleague Rosana helped me out with a plan for my software engineer journey (she directed me to the front-end first). How HTML and CSS would not have been my first languages of choice had I not been guided in this direction, as in my head they were seen as 'less-serious' langages. How done I am with what other people think of me and if other people see the 'front-end' as softer then so be it! Everyone has to start somewhere. I am so grateful to be on this journey, with Codecademy's Front-End Engineer Career Path.  Thank you to Async Brighton as
Read more

Yosemite

-
Image
Yosemite I'll never forget the first time I head the song Yosemite by Lana del Rey. I very nearly clicked away.  It was quite near the start of my Software Engineering journey, right near when I start learning the Front-End/Web Development. I was listening to Arcadia by LDR before, maybe twice, and then Blue Banisters came on. I nearly clicked away in the first 30 seconds but I forced myself to keep listening anyway.  I'll never forget how that song has made me feel. It became my song of 2022 even though I only discovered it in November. I can still listen to it every day and get that complete sense of wonder and of awe that I felt the first time that I heard it. That ending of the song is completely amazing, and it just completely just blows me away every time. "Withstanding all the time, changes, and seasons..." - LDR Concise Body Arrow Functions Why am I so bad at arrow functions? Whyyyyyyyyyyy?  Just kidding, I am beginning to get them. But why are they so hard? &
Read more

Two Lines of Thought, Makes Me Wonder What I'm Missing

-
Image
Two Lines of Thought, Makes Me Wonder What I'm Missing "Lines of Bamboo, See What You Do To Me..." Bamboo by Elder Island is one of my ultimate 'becoming a Software Engineer songs'. (I prefer the original, but here is a great live version. ) There's a story behind this. I met a man named Mark. He was an SWE approaching retirement - he was down in my hometown with his wife, visiting. I won't go into the context of how we met, but it was a miracle. It was a complete miracle. It was just meant to be. We chatted for at least two hours and at the end of the conversation he said to me "All the best of luck with your new career". I couldn't believe what he'd just said - I hadn't even committed to it yet! A few weeks later, I did, though. After I walked out of that cafe where I had been sitting and talking to Mark and his wife though, I felt like - even though I didn't "feel ready" yet - Mark had predicted something that I didn&
Read more