How to Get Flexbox to Include Padding in Calculations

How to get flexbox to include padding in calculations?

The solution:

Set margin on the child element instead of padding on your flex item.

.Row{  display:flex;}.Item{  display:flex;  flex:1;  flex-direction:column;}.Item > div{  background:#7ae;  margin:0 10px 10px 0;}.Flx2{  flex:2;}
<div class="Row">  <div class="Item">    <div>1A</div>  </div>  <div class="Item">    <div>1B</div>  </div>  <div class="Item Flx2">    <div>1C</div>  </div></div>
<div class="Row"> <div class="Item"> <div>2A</div> </div> <div class="Item"> <div>2B</div> </div></div>

Using Flexbox with padding in the inner items

The flex-grow property is not designed for precision sizing of flex items. It's job is to distribute space in the container among flex items. So flex-grow is not the best tool for this job.

Instead, use flex-basis, which is the equivalent of width or height (depending on flex-direction) in a flex container.

Then add box-sizing: border-box to integrate the padding into the flex item's width.

revised fiddle demo

<div style="display: flex;">  <div style="flex-basis: 60%; padding: 4rem ; background-color: red; box-sizing: border-box;">  </div>  <div style="flex-basis: 40%; background-color: green;">    </div></div>

Better way to set distance between flexbox items

  • Flexbox doesn't have collapsing margins.
  • Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
margin: 30px;
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border: 1px red solid;

padding: 5px; /* this */
}

.upper > div {
flex: 1 1 auto;
border: 1px red solid;
text-align: center;

margin: 5px; /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
flex-direction: column;
flex-wrap: wrap;
width: 200px;
height: 200px;
}
<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>

<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>

padding with display: flex

Your code is working fine and there is spaces between items because of margin

if you want to ensue about this
try removing background from container and put it in '.item-1' class
I've also added padding of: 0 10px to each item

Check it out

html {  background-color: #2d303a;  background: #2d303a;}
.container { display: flex; align-items: center; padding: 1rem; text-align: center; border-radius: 7px; justify-content: center; align-items: center;}
.item-1 { color: white; font: bold 16px/30px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 20px; padding: 0 10px; background-color: #319635;}
.bacground_color { background: #2d303a;}
<div class="container">  <div class="item-1">1    <div class="item-2">Dossier(s) non affecté(s) </div>  </div>  <div class="item-1">2    <div class="item-2">Dossier(s) ouvert(s) sans action</div>  </div>  <div class="item-1">3    <div class="item-2">Dossiers non modifiés depuis 5 jours</div>  </div>  <div class="item-1">4    <div class="item-2">Dossiers hors gel</div>  </div>  <div class="item-1">5    <div class="item-2">Dossier(s) en cours</div>  </div></div>

Why does percentage padding break my flex item?

As I explained in a previous similar situation there is a kind of complex calculation involved here. Padding used with percentage value will be relative to the width of the containing blockref and logically the width of the containing block will be defined by its content (or any fixed width value).

In our case, we cannot resolve percentage value of padding before calculating the width, so we first caclulate the width based on our content to obtain this:

console.log(document.querySelector('ul').offsetWidth);
li {  display: inline-block;  border: 1px solid black;}
header { display: flex;}
ul { border:1px solid red; margin:0; padding:0;}
<header>  <ul>    <li>Library</li>    <li>Telegram channel</li>    <li>Contacts</li>    <li>Donate</li>  </ul></header>

set fixed spacing for flexbox list

i noticed that on my firefox the distance between the bottom of the
website and the list for links(terms,about...) is really large

This is the nature of the webpage you have created because the content only goes as far as that height. In order for your footer element to stay at the bottom: I recommend utilizing Flexbox & setting margin-top: auto to your footer. In order for the margin to kick in, simply give your container (in this case, .body) the flex display property & a minimum height of 100vh (so that it takes at least 100% of the viewport in terms of height) and assign column as it's flex-direction. This way, the footer can always stay at the bottom on your given layout.

body {
display: flex;
flex-flow: column;
min-height: 100vh;
}

footer.cl {
margin-top: auto;
}

Using margin on flex items

You need to do it with padding - which, when in border-box mode does not make the container larger than it's specified width - not margin, and a nested flex div. This is how all flexbox-based grid systems work. Code below:

.flex-container{    border: 1px solid red;    box-sizing: border-box;    display: flex;    flex-wrap: wrap;    width: 320px;}
.flex-item{ padding:1em; box-sizing: border-box; height: 160px; width: 50%; display:flex;}
.flex-item>div { border: 1px solid blue; flex: 1 1 auto;}
<div class="flex-container">    <div class="flex-item"><div></div></div>    <div class="flex-item"><div></div></div>    <div class="flex-item"><div></div></div>    <div class="flex-item"><div></div></div>    <div class="flex-item"><div></div></div>    <div class="flex-item"><div></div></div></div>

How to display 3 items per row in flexbox?

Flex container:

  • You probably want to use display: flex not inline-flex.
  • Add flex-wrap: wrap to allow wrapping onto multiple lines.
  • Remove width: 33% if you wish it to take entire space avaiable.

For 3 items per row, add on the flex items:

  • flex-basis: 33.333333%
  • You can also use the flex's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333%.

.serv ul {  display: flex;  flex-wrap: wrap;  padding-left: 0;}
.serv ul li { list-style: none; flex: 0 0 33.333333%;}
<div class="serv">  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul></div>


Related Topics



Leave a reply



Submit