The Smoke Detector
  • About
    • About TSD
    • Contact us
  • Art / Design
  • Beauty
  • Fashion
  • Interviews
  • Columns
  • Coding
The Smoke Detector
  • About
    • About TSD
    • Contact us
  • Art / Design
  • Beauty
  • Fashion
  • Interviews
  • Columns
  • Coding
  • Coding

CSS Flex – 3 things I love using

  • Ivona Josipovic
  • 29 December 2022

Learning CSS, I remember how amazing it was to start using flex and grid instead of fighting with the elements trying to position them with the position property. And while the position is still valuable for certain cases, I find myself predominantly using flex (for simple components) as it gives me enough flexibility to place everything where I want, with a couple of pretty simple properties. So, I thought I’d share three of my currently favorite flex properties that are easy to implement.

Using flex with a group of elements that include a button makes the button stretch to fill the height/width of the container. Regulate this by using align-self: start (or end, center – whichever you prefer) for the button element. This way it will not stretch and you can make it just the perfect size with further styling. 

When I create a page layout that has a header and a footer and some content that fills the main section, I want that section to occupy the whole screen space between the header and the footer. The fastest way I found to do this is to use the flex-grow property (shorthand flex). It is specified as a number and the element with the highest number will take proportionally more space compared to the other elements. This is quite handy for regulating elements’ sizes. In the case I mentioned before, I’d just add flex: 1 to my main section, and then it fills the space that’s available between the header and the footer. However, do remember that the parent needs to have display: flex for any of the magic to happen and the body element needs min-height so that flex would know what space to work with (I am used to setting min-height: 100vh). 

Flex is very helpful when positioning links in the navbar. The thing I use over and over again when creating simple headers is the flex display for all the elements in the header (and these are usually the logo and the navigation links). I want to separate those and give each their own place to shine. That’s where justify-content: space-between does the trick. You can use justify/align with different space options (check this cheatsheet to see more) that allow you to distance the element. The space-between puts the first element at the start and the last one at the end which is what I want with the logo and the links occupying the header. 

As the cheatsheet I linked illustrates flex can do a lot more and is great to use for one-dimensional or single-line layouts. 

iwarra
Share
Tweet
Pin it
Share
Share
Related Topics
  • css
  • flex
  • learning programming
  • tips
Ivona Josipovic

Ivona Josipovic is a co-founder of The Smoke Detector, writer, fashion stylist, social media manager, curious creature, chocolate lover.

You May Also Like
View Post
  • Fashion

Nordgreen Copenhagen watch review

  • Ivona Josipovic
  • 8 August 2020
View Post
  • Fashion
  • Interviews

Interview with Joanna Bark and Elena Ekström, founders of Bukvy

  • Ivona Josipovic
  • 30 March 2020
View Post
  • Fashion

The evolution of male red carpet style

  • Ivona Josipovic
  • 18 March 2020
View Post
  • Fashion

Christian Louboutin Exhibition, L’Exhibitioniste – Paris 2020

  • Ivona Josipovic
  • 25 February 2020
View Post
  • Fashion

Best Fashion documentaries – part 3

  • Ivona Josipovic
  • 6 March 2020
View Post
  • Fashion

Best handbag brands to know in 2020

  • Ivona Josipovic
  • 11 February 2020

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Featured Posts
  • 1
    • Fashion
    Nordgreen Copenhagen watch review
    • 8 August 2020
  • 2
    • Fashion
    • Interviews
    Interview with Joanna Bark and Elena Ekström, founders of Bukvy
    • 30 March 2020
  • 3
    • Fashion
    The evolution of male red carpet style
    • 18 March 2020
  • 4
    • Fashion
    Christian Louboutin Exhibition, L’Exhibitioniste – Paris 2020
    • 25 February 2020
  • 5
    • Fashion
    Best Fashion documentaries – part 3
    • 6 March 2020
  • 6
    • Fashion
    Best handbag brands to know in 2020
    • 11 February 2020
  • 7
    • Fashion
    Best fashion quotes with strong messages
    • 31 January 2020
  • 8
    • Fashion
    10 ways fashion has changed in the 2010s
    • 4 January 2020
  • 9
    • Art / Design
    • Interviews
    Interview with Elisabeth van Aalderen, the photographer behind Vitiligo photo project
    • 16 December 2019
  • 10
    • Art / Design
    Illustrators celebrating womanhood we love following on IG
    • 10 January 2020
Reflection. 🌴
The world need more love. BLM! 🖤 Regram from @inesabouchard .
Don't miss reading our interview with the founders of the amazing @bukvybag brand. This female-led accessories brand is based in Stockholm and focused on creating practical pieces for everyday life. 😍 Link in bio. #bukvy #bukvybag #interview #femalefounders
Daydreaming of places as this one... 💙 Follow the super talented @salvalopez for more amazing images like this... #photography #pink #daydreaming
Gorgeous images by @nina_zimolong. 💟 In case you missed our interview with the talented photographer go to our site to read it. #photography #interview #love #stunning
Lazy Sunday mani inspo from @vanessahong. Nothing like some cute polka dots for mood boosting, right? 😍 #cute #manicure #loveit #polkadots
The Smoke Detector
  • About
  • Art / Design
  • Beauty
  • Fashion
  • Interviews
  • Columns
  • Coding
The Smoke Detector covers photography, fashion, art, design, cool people and places

Input your search keywords and press Enter.