Is resetting box-sizing to border-box relevant when using flexbox?
Not really...the two aren't really related.
flexbox
still uses values and you want those values to mean what they say.
You might hav a div with a max/min width
which has padding
and you want that value to be right.
flexbox
doesn't mean that box-sizing
is automatic or not a factor.
From the Spec
For all other values, flex-basis is resolved the same way as width in horizontal writing modes [CSS21]: percentage values of flex-basis are resolved against the flex item’s containing block, i.e. its flex container, and if that containing block’s size is indefinite, the result is the same as a main size of auto. Similarly, flex-basis determines the size of the content box, unless otherwise specified such as by box-sizing
See:
.wrap { display: flex; margin-bottom: 10px;}.content { background: red; height: 75px; flex: 0 0 150px; /* max-width 150px */ padding: 0 25px;}.boxy .content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
<div class="wrap boxy"> <div class="content"></div></div>
<div class="wrap"> <div class="content"></div></div>
Flexbox problems - Firefox and IE10/11
You used only the webkit vendor prefix, firefox won't use the rule.
Change .row-flex-wrap to the following and it should work.
.row-flex-wrap {
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-content: flex-start;
flex: 0;
}
Best
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>
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;
}
Can't scroll to top of flex item that is overflowing container
The Problem
Flexbox makes centering very easy.
By simply applying align-items: center
and justify-content: center
to the flex container, your flex item(s) will be vertically and horizontally centered.
However, there is a problem with this method when the flex item is bigger than the flex container.
As noted in the question, when the flex item overflows the container the top becomes inaccessible.
For horizontal overflow, the left section becomes inaccessible (or right section, in RTL languages).
Here's an example with an LTR container having justify-content: center
and three flex items:
See the bottom of this answer for an explanation of this behavior.
Solution #1
To fix this problem use flexbox auto margins, instead of justify-content
.
With auto
margins, an overflowing flex item can be vertically and horizontally centered without losing access to any part of it.
So instead of this code on the flex container:
#flex-container {
align-items: center;
justify-content: center;
}
Use this code on the flex item:
.flex-item {
margin: auto;
}
Revised Demo
Solution #2 (not yet implemented in most browsers)
Add the safe
value to your keyword alignment rule, like this:
justify-content: safe center
or
align-self: safe center
From the CSS Box Alignment Module specification:
4.4. Overflow Alignment: the
safe
andunsafe
keywords and
scroll safety
limitsWhen the [flex item] is larger than the [flex container], it will
overflow. Some alignment modes, if honored in this situation, may
cause data loss: for example, if the contents of a sidebar are
centered, when they overflow they may send part of their boxes past
the viewport’s start edge, which can’t be scrolled to.To control this situation, an overflow alignment mode can be
explicitly specified.Unsafe
alignment honors the specified
alignment mode in overflow situations, even if it causes data loss,
whilesafe
alignment changes the alignment mode in overflow
situations in an attempt to avoid data loss.The default behavior is to contain the alignment subject within the
scrollable area, though at the time of writing this safety feature is
not yet implemented.
safe
If the size of the [flex item] overflows the [flex container], the
[flex item] is instead aligned as if the alignment mode were
[flex-start
].
unsafe
Regardless of the relative sizes of the [flex item] and [flex
container], the given alignment value is honored.
Note: The Box Alignment Module is for use across multiple box layout models, not just flex. So in the spec excerpt above, the terms in brackets actually say "alignment subject", "alignment container" and "start
". I used flex-specific terms to keep the focus on this particular problem.
Explanation for scroll limitation from MDN:
Flex item
considerationsFlexbox's alignment properties do "true" centering, unlike other
centering methods in CSS. This means that the flex items will stay
centered, even if they overflow the flex container.This can sometimes be problematic, however, if they overflow past the
top edge of the page, or the left edge [...], as
you can't scroll to that area, even if there is content there!In a future release, the alignment properties will be extended to have
a "safe" option as well.For now, if this is a concern, you can instead use margins to achieve
centering, as they'll respond in a "safe" way and stop centering if
they overflow.Instead of using the
align-
properties, just putauto
margins on
the flex items you wish to center.Instead of the
justify-
properties, put auto margins on the outside
edges of the first and last flex items in the flex container.The
auto
margins will "flex" and assume the leftover space,
centering the flex items when there is leftover space, and switching
to normal alignment when not.However, if you're trying to replace
justify-content
with
margin-based centering in a multi-line flexbox, you're probably out of
luck, as you need to put the margins on the first and last flex item
on each line. Unless you can predict ahead of time which items will
end up on which line, you can't reliably use margin-based centering in
the main axis to replace thejustify-content
property.
Negative margin not working with flexbox
If I add bootstrap to to your codepen it works, which means you have some other issue we can't see in your original code.
Note though, based on your image's settings, your elements still might wrap
Still, instead of doing negative margin tricks, create a gutter, use justify-content: space-around
and flex-basis
.
Updated codepen
//testing css
.buisness-blocks {min-height: 250px;}
//main css
.buisness-blocks {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.block {
flex-basis: calc(20% - 10px);
outline: 1px solid;
}
}
How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?
Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".
I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.
Use margin
Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.
span
{
margin-left: 10%;
}
and ofcourse reset the padding of the sides:
div.table-cell {
display: table-cell;
padding: 20px 0;
}
This "solution" is not as dynamic as with percentage padding on the table-cell itself.
Why not?
It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;
. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell
).
So to fix that i did 5 times the amount of cells (5 * 2
in this case), which would result in the right percentage.
However this is not dynamic when you want to add more cells.
jsFiddle
Use border
Use border which its position is "reserved" before the padding is resetted.
Reserved border
span
{
border-bottom: 1px solid transparent;
}
Change property that doesn't need re-calculation of position; color
div.table-cell-bug:hover span
{
border-bottom-color: black;
}
Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.
jsFiddle
I hope one of these quick fixes work for you.
I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)
Related Topics
CSS @Font-Face Not Working with Firefox
Display Content Only on Mobile Devices
Customizing Twitter Bootstrap Grid Does Not Work
Style Button When: Active Different from: Hover
Change Text Color for Gtktoggletoolbutton in C Code (Gtk+3)
CSS Animation, Fadein/Fadeout 2 Images Continuously
Make Maven Serve Files Like CSS.Gz and Js.Gz
Bootstrap Align Columns of Different Height
How to Apply CSS for Specific Chrome Version
Browser Developer Tools: What Is The Position of The HTML Element
How to Output Compressed CSS from Compass
How to Get a Negative Value with CSS Calc()
Is Twitter's Bootstrap Mobile Friendly Like Skeleton