street cable complexity

Introduction

If you are not a beginner, you can skip this section and go straight to my examples. Otherwise, please read :)

CSS (cascading style sheet) is a building block for decorating website. In most tutorials, there are just a few attributes involved which are absolutely easy to understand. However, real-world development is a completely different story.

If you don’t design your layout well enough, then when your app scale you will have to spend a lot of time debugging CSS and trying to align things.

I have seen a lot of developers use CSS without turly understanding it, while hoping it will work as they want. For example, some use flex by copying from tutorials without knowing why it works they way it does.

The more unknowns you put it into your project, the more debt you have to pay back. Finally, you will end up rewriting your project, not just refactoring it. Trust me, that is not fun at all.

Time to refactor things that work… but WHY?

Gaining a deeper understanding of WHY your layout works the way it does will get better results in the short term and in the long term alike.

Tip: When building with components, Bit helps you share and use them in multiple projects and apps. Create a collection, share components and install them anywhere. It’s open source, so feel free to give it a try.

Prerequisites

You should be familiar with flex-grow, flex-shrink, flex-basis etc. there are a lot of great explanations out there. Read some of these if you have no idea what flex is, it should get you to where you need to be.

Getting Started

I will use CodeSandbox throughout the tutorial.

Let’s say we have 2 types of elements, Container and Item . Let’s say that container has a green background, while Item has tomato and some text on it. If you are confused about ObserveContainer or ObserveItem , don’t worry it is just a container and an item.

The word Observe is just a tool that wraps the element in order to display width and height on the screen (how to create size observer in React).

If you just want to see the demo, click here.

Basic Block

container has display: block

item has display: block

Container alone will have a width equal to the screen but no height due to block . Then, the block items will fill the container (width equal to container). Because item has a height due to line-height: 150px , the container will also have a height equal to 3 items.

Basic Flex

container has display: flex

item has display: block

Container still stretches to fit the window like block , but the Item is not. By default, if you set only display: flex to the Container without any flex attributes to the Item, all Items will have a width equal to its content.

Now, if I set the height of the second item to height: 180px , all Items will have a height equal to the highest height among the Items. What if I change the second item’s height to 120px ? You should try it.

Flex Grow

If the container has available space (light green in Basic Flex) and flex-grow of all item is set to 1. Width of the available space will be equally divided to all items. Available space width = 600-(85+87+122) = 306px, each item will receive extra width = 306/3 = 102px

1st item’s width : 85 + 102 = 187px

2nd item’s width : 87 + 102 = 189px

3rd item’s width : 122 + 102 = 224px

In the real world, flex-grow is used to push the content to the right. For example, a top navigation bar.

I wrote a story about top navigation bar here, if you are interested.

top nav bar in twitter

To illustrate, I will set flex-grow only to the second item.

As you can see, the second item will fill all of the available space. This technique is common nowadays and is probably the popular felx usecase.

Flex Shrink

flex shrink will take effect when the total width of all items is more than the container’s width. In this example, I fix the width of the items like this.

1st item’s width : 400px

2nd item’s width : 200px

3rd item’s width : 200px

Now the total item’s width is more than the container : (400+200+200)-600 = 200px.

By default, the reduced item’s width is base on ratio.

all items width ratio = 400 : 200 : 200 = 2 : 1 : 1 (total 4 parts)

so, excess width is divided by the same ratio

= 200(2/4) : 200(1/4) : 200(1/4)

= 100 : 50 : 50

as a result, width of all items will be

1st item’s width : 400–100 = 300px

2nd item’s width : 200–50 = 150px

3rd item’s width : 200–50 = 150px

Now I will add flex-shrink: 3 to the first item and calculate again

all items width ratio = 400 : 200 : 200 = 2 : 1 : 1

shrink ratio = 2*3 : 1 : 1 (total 8 parts)

so, excess width is divided by the same ratio

= 200(6/8) : 200(1/8) : 200(1/8)

= 150 : 25: 25

as a result, width of all items will be

1st item’s width : 400–150 = 250px

2nd item’s width : 200–25 = 175px

3rd item’s width : 200–25 = 175px

Flex Basis

You can see it as min-width in flex-box, if there is available space.

In this case, I set flex-basis: 300px to the first item. If flex-basis causes the total item’s width to exceed container’s width, flex-shrink will take effect.

Wrapping up

Feel free to play around in the Flex Box Playground.

That’s it. I hope you enjoyed this story and understand a bit more about flex-box. Hopefully, this will save you precious time in the future too. Feel free to comemnt below, ask me anything or add suggestions. I’d love to talk! 👍