What Adding display: flex Does

In my experience, very few developers know what happens after adding display: flex. If I asked how margin behavior changes 99% of developers don't answer. So I created [a live cheat sheet](https://codepen.io/melnik909/full/LYyXreW) and wrote this article to fix this situation. I'm sure you will find some new things! \ But before embarking on reading I leave [the link on my Substack newsletter about CSS](https://cssisntmagic.substack.com). You know what to make 😎 \ Let's go! ## Default Behavior **1.** The width property of elements with display: flex fills up all available space by the text direction. The height property is calculated automatically depending on the content height. \ If the element has display: block by default we won't see any changes after changing the block value on flex. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-0l93o5z.png) And they happen for elements with display: inline. The width property stops depending on the content after the inline value on flex. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-xsa3oxn.png) If the content of elements with display: flex doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent. \ If we change the block value on flex then we won't see changes as with the width property. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-ptb3ol8.png) And if we change the inline value to flex the width property stops depending on the maximum line length. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-eec3o4z.png) **2.** By default elements with display: flex are positioned in a column. So if we change the block value to flex elements will save its position. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-ind3oqu.png) And if we change the inline value to flex we will get that they are positioned in a column. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-3le3oph.png) ## Box model features **3.** The width and height properties can be set to elements with display: flex. Therefore we don't notice changes when changing the block value to flex. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-wkf3opw.png) The width and height properties start to apply after changing the inline value to flex. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-2sg3o9g.png) **4.** The padding and border properties can be set for elements with display: flex. If the element has display: block by default we won't see any changes after changing the block value on flex. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-zoh3obo.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-yui3om0.png) And we'll see them after changing the inline value to flex because vertical paddings and borders stop ending up outside the parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-erj3o1j.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-y5k3op2.png) The margin property works with a few specificities. Since vertical margins of elements with display: block might end up outside the parent, this behavior saves after changing the block value to flex. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-g3l3og0.png) However, as with elements with display: block adding the border or padding properties to the parent stops this margins behavior. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-m3m3oed.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-4fn3oro.png) If the parent has a few elements with display: block top margins will end up outside it from the first element and the bottom from the last. Changing the block value to flex doesn't cancel that. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-eyo3onv.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-1zp3ofo.png) As with a single item case, adding the padding or border properties to the parent stops this behavior for elements with display: flex too. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-4eq3o0a.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-6lr3ou5.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-3us3o9x.png) Also, margins between adjacent elements continue collapsing when changing the block value to flex Also. The gap between elements will equal the largest. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-88v3oql.png) And collapsing is saved after adding the padding or border properties. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-nnw3ov7.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-hmx3oh4.png) Since vertical margins of elements with display: inline might end up outside the parent, this behavior saves after changing the inline value to flex. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-b0z3oks.png) When changing the inline value to flex, margins don't overlap paddings or margins that are set to the parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-4g103o5s.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-eb113oqp.png) When we change the inline to flex and the parent has multiline elements top margins will end up outside it for only the first element and bottom margins for the last. \ Margins from other elements stop overlapping siblings by vertical. They will be collapsed. \ ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-5s123o6q.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-ir133o4h.png) ## Default behavior of flex items *Note! Flex items are childs of the element with display: flex or display: inline-flex* \ **5.** Flex items always are blockified. It means all block values are saved. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-gt143oyv.png) All inline values will be changed on block values. So the inline and inline-block values will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-vz153oo0.png) **6.** The width property of flex items depends on the flex-direction property. If flex-direction: row (default value) the width property is calculated automatically depending on the content and the height property of flex items is equal to the height property of the parent. \ Thus the width property stops to be equal to the width property of the parent for elements with display: block. It's calculated depending on the content. The height property doesn't depend on the content and becomes to equal the height property of the parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-zn163o91.png) In the case of elements with display: inline we will get the height property is equal to the height property of the parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-ao173oew.png) When flex-direction: column the width property of flex items fills up all available space by the text direction and the height property is calculated automatically depending on the content. \ As a result, this behavior is the same as the behavior of elements with display: block. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-wx183o1q.png) There are changes for elements with display: inline. The width property becomes to be equal to the width parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-om193ol2.png) If the content of a flex item doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent. It doesn't matter that a value is set to the flex-direction property. \ As a result, the content of elements with display: block will be displayed the same after adding display: flex to its parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-871a3ow5.png) The width property of the element with display: inline stops to be calculated depending on the maximum line length. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-7t1b3op7.png) **7.** By default flex items position on the same line. If there isn't space, browsers will squeeze them depending on its content. \ For this reason elements with display: block stop positioning in a column. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-ay1c3oj9.png) The single change for elements with display: inline is they are squeezed. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-v71d3oip.png) Also, a position might be changed using the flex-direction property. If we set the column value flex items will be stacked and stop squeeze. \ This behavior repeats for elements with display: block. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-wk1e3ocb.png) In the case of elements with display: inline they stop to be on the same line and will display in a column. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-me1f3o88.png) ## Box model features of flex items **8.** The width and height properties can be set to flex items. It doesn't matter which the value is used for the flex-direction. \ It's why we won't see some changes after becoming the element with display: block to a flex item. \ ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-4y1g3oy8.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-zi1h3o2z.png) When it comes to elements with display: inline we already can set the width and height properties after adding display: flex to the parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-n01i3ov8.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-8n1j3opr.png) **9.** The padding and border properties can be set too. They will work without changes for elements with display: block. When it comes to elements with display: inline vertical paddings and borders stop ending up outside the parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-g81k3omi.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-gb1l3oiz.png) The padding and border properties for elements with display: block save their behavior when adding flex-direction: column to the parent. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-kx1m3ow8.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-7p1n3op0.png) Adding flex-direction: column doesn't affect the behavior of properties for elements with display: inline in comparison with flex-direction: row. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-2n1o3o6c.png) Pay attention vertical margins don't end up outside the parent. That behavior doesn't depend on the flex-direction property. If we set the row or column value we will get an equal result. \ That leads to we'll see changes if we use elements with display: block. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-wf1p3oue.png) Also, that applies to elements with display: inline. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-6q1q3od0.png) If the parent has two elements with display: block margins stop ending up outside it from the first element and the bottom from the last. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-rc1r3ov4.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-c51s3o9g.png) In the case, we set margins for adjacent elements with display: block they stop collapsing. ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-ca1t3o9s.png) ![](https://cdn.hackernoon.com/images/lBGwHpq2KNgNXRSQYpHntLct1D73-lx1u3okz.png) --- :::tip This story was first published [here.](https://dev.to/melnik909/css-isnt-magic-what-will-happen-after-adding-display-flex-j7e) ::: \

What Adding display: flex Does

Too Long; Didn't Read

Companies Mentioned

@melnik909

RELATED STORIES