Padding-Bottom/Top in Flexbox Layout

Padding-bottom/top in flexbox layout

Update September 2020

Firefox and edge have implemented the behaviour from the specs and margin + padding for flex elements are both calculated according to the width of the containing block.

Just like block elements.

Update February 2018

Firefox and edge have agreed to change their behaviour on top, bottom margin and padding for flex (and grid) items :

[...] e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes. [source]

This is not yet implemented (tested on FF 58.0.2).

Update April 2016

(still valid in may 2017)

The specs have been updated to:

Percentage margins and paddings on flex items can be resolved against either:

their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
the inline axis (left/right/top/bottom percentages all resolve against width)

source: CSS Flexible Box Layout Module Level 1

This means that chrome IE FF and Edge (even if they don't have the same behaviour) follow the specs recommendation.

Specs also say:

Authors should avoid using percentages in paddings or margins on flex
items entirely, as they will get different behavior in different
browsers. [source]

Workaround

You can wrap the first child of the flex container in an other element and put the padding-bottom on the second child :

#flexBox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
}
#text {
  border: 1px solid green;
  padding: .5em;
}
#padding {
  margin: 1em 0;
  border: 1px solid blue;
}
#padding > div {
  padding-bottom: 56.25%; /* intrinsic aspect ratio */
}

<div id='flexBox'>
  <div id='padding'><div></div></div>
  <div id='text'>Some text</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>

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>

Flexbox not adding top padding but adds bottom padding

To vertical align the items, so there is an even margin above and below, use

align-items: center;

#Items {
    width: 100%;
    height: 800px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    border: 1px solid black;
    align-items: center;
}

#Items a {
    text-decoration: none;
}

/* Classes */

.Box {
    width: 320px;
    height: 100px;
    background-color: #f2f2f2;
}

.Box h3 {
    font-family: 'Roboto', serif;
    font-size: 22px;
    color: #111;
}

<section id="Items">
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
</section>

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;
}

Flexbox padding bottom fails in Firefox and Safari

I'm not exactly sure why the padding-bottom fails in Firefox and Safari. It may have something to do with the container being over-constrained. But that's just a guess.

What I am more certain about, however, is a reliable, cross-browser solution. Pseudo-elements on a flex container are rendered as flex items. So instead of padding use ::before and ::after.

.container {  display: flex;  width: 200px;  height: 500px;}
.parent {  display: flex;  flex-direction: column;  background: red;  /* padding-top: 20px; */  /* padding-bottom: 20px; */  overflow: auto;  flex: 1;}
/* NEW */.parent::before,.parent::after {  flex: 0 0 20px;  content: '';}
.child {  flex: 1 0 100px;  background: green;  border: 1px solid blue;}

<div class="container">  <div class="parent">    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>  </div></div>

Align an element to bottom with flexbox

You can use auto margins

Prior to alignment via justify-content and align-self,
any positive free space is distributed to auto margins in that
dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {  height: 200px;  border: 1px solid;  display: flex;  flex-direction: column;}h1, h2 {  margin: 0;}a {  margin-top: auto;}

<div class="content">  <h1>heading 1</h1>  <h2>heading 2</h2>  <p>Some text more or less</p>  <a href="/" class="button">Click me</a></div>

Padding-Bottom/Top in Flexbox Layout