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 propertygap
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
notinline-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 meansflex-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
HTML5 Video Safari Downloads Full Before Playing
Zoom Changes The Design Layout
Inline Svg Vs Svg File Performance
Is There a Vr (Vertical Rule) in HTML
Img's Max-Height Not Respecting Parent's Dimensions
CSS/HTML: What Is The Correct Way to Make Text Italic
Chrome/Safari Display Border Around Image
Cross-Browser Link to File on Local System
Valid Order for Attributes of Input Type Tag
How Does Justify-Items Work on Display:Block Elements
How to Tell an HTML Element to Ignore Any Stylesheets
HTML5 Standards of Nesting Div in Li or Dl
Flexbox Layout with Two Equal Height Children, One Containing Nested Flexbox with Scrolling Content
How to Resolve 500 Internal Server Error
Will Targeting Ie8 with Conditional Comments Work
Jsf Vs HTML(Jsp) for Enterprise Portals UI Layer. Which One to Choose? and Why