I am trying to make my site IE9 compatible but I am using flex boxes in lots of places so I need an alternate method for evenly spacing child elements.
My design is responsive so I need the same effect as flexbox where I can evenly space elements but I am not sure how to do it.
Here is a snippet to show how I am using flexbox in my layout.
#container{
width: 500px;
height: 700px;
border: 1px solid #000;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.ele1, .ele2, .ele3{
flex: 0 0 auto;
}
.ele1{
height: 200px;
background-color: red;
}
.ele2{
height: 50px;
background-color: blue;
}
.ele3{
height: 100px;
background-color: green;
}
<div id="container">
<div class="ele1"></div>
<div class="ele2"></div>
<div class="ele3"></div>
</div>
How do I do this without flexbox?
You could use Masonry which is a pure JavaScript (it also supports jQuery), as there are no CSS equivalent, if you do/can not use flexbox.
Use margin-top and margin-bottom in percentages. The distribution is roughly dependant upon how tall each box is. I estimated that there's a total of 10% vertical space inside the container that comprises of padding and borders. That leaves 90% to distribute between the inside walls of the container and between themselves.
#container{
width: 500px;
height: 700px;
border: 1px solid #000;
padding: 10px;
/*display: flex;
flex-direction: column;
justify-content: space-around;*/
}
.ele1, .ele2, .ele3{
/*flex: 0 0 auto;*/
}
.ele1{
height: 200px;
background-color: red;
margin: 10% 0 15%;
}
.ele2{
height: 50px;
background-color: blue;
margin: 25% 0 15%;
}
.ele3{
height: 100px;
background-color: green;
margin: 25% 0 0;
}
<div id="container">
<div class="ele1"></div>
<div class="ele2"></div>
<div class="ele3"></div>
</div>
I discovered a flex box polyfil https://github.com/10up/flexibility
Related
DESCRIPTION
I have a weird bug where the border causes a small gap between the content and the border itself when set using vmin units.
REPRODUCIBLE SNIPPET
resize the window to see it, as it only happens on some device viewports
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
display: flex;
width: 80%;
height: 80%;
border-right: 1vmin solid red;
}
.content {
display: flex;
width: 100%;
height: 100%;
background-color: black;
}
<div class="container">
<div class="content" />
</div>
PREMISES
I'm setting border with vmin unit to keep it consistent between any screen resolution
Elements should keep current structure (border on parent, background on child)
Both elements should have display: flex
PROBLEM
I suspect the problem stands on how the vmin value is being rounded into pixels, creating that additional pixel which can be seen in similar scenarios (where a child with the background highlights the gap).
WHAT I TRIED
By having display: tables instead of flex fixes the extra px, but this can't be an option as flex is needed
vw / vh or any viewport unit generate the same issue
SOLUTION
A solution for having a flexible border could be to simply set the .container:after with a width in percentage, height to 100% and a background-color instead of the border. This solution works perfectly fine, but it's not a scalable solution in case we require more than just a single border side (e.g. border-right).
CONCLUSION
So premised all this, is there perhaps some trick that can be applied directly to the border (or its element) to get around it?
I'm not concerned about finding the first solution that works; As presented, a solution exists already, so the question is based out of mere curiosity for writing better code.
Try to use box-shadow instead.
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
display: flex;
width: 80%;
height: 80%;
box-shadow: 1vmin 0 0 0 #f00;
}
.content {
display: flex;
width: 100%;
height: 100%;
background-color: black;
}
<div class="container">
<div class="content" />
</div>
box-shadow: 1vmin 0 0 0 #f00; for right border, box-shadow: 0 0 0 1vmin #f00; for full border.
EDIT:
Why the gap is disappear? I think it is because box-shadow is kind of background with some offset. So, the decimal pixel is on the end. I guess.
But keep in mind that it will act different as being said by #doğukan in the comment.
but box-shadow doesn't work like border. see the difference. with border: i.stack.imgur.com/gqgsD.png box-shadow: i.stack.imgur.com/2ZsrA.png if this is not a problem, box-shadow works fine.
Just set a background to .container?
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
display: flex;
width: 80%;
height: 80%;
background-color: black;
border-right: 1vmin solid red;
border-left: 1vmin solid green;
border-top: 1vmin solid blue;
border-bottom: 1vmin solid orange;
}
.content {
display: flex;
width: 100%;
height: 100%;
background-color: black;
}
<div class="container">
<div class="content" />
</div>
I have a flex grid with equal columns, but in some of them i have some padding. It appears that this breaks the columns width.
I tried to add the padding to an inner wrapper, but this won't work for me as its percent based.
.grid{
width: 100%;
display: flex;
flex-direction: row;
}
.column {
flex: 1 1 100%;
display: block;
height: 200px;
background-color: #e5e5e5;
border: 1px solid #999999;
&.padd{
padding: 0 5%;
}
}
https://jsfiddle.net/heyapo/8qntbj3c/
Any ideas?
Quite simply flex-grow or flex-basis do not equal width.
Detailed explanation here: by Michael_B.
Padding will add to the dimensions of the element receiving it and the other elements will resolve their sizes accordingly.
If you want to use width...use width (and box-sizing).
.grid {
width: 100%;
display: flex;
flex-direction: row;
}
.column {
width: calc(100% / 3);
display: block;
height: 200px;
background-color: #e5e5e5;
border: 1px solid #999999;
}
padd {
padding: 0 20px;
}
<div class="grid">
<div class="column"></div>
<div class="column"></div>
<div class="column padd"></div>
</div>
I have this layout:
A row flex container with a definite size, e.g. width: 175px
A flex item
With an indefinite flex-basis, e.g. flex-basis: content
Which is inflexible, e.g. flex: none.
Whose max-content size is larger than the available space
Whose min-content size is smaller than the available space
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
border: 3px solid red;
margin: 3px;
}
<div class="flex-container">
<div class="flex-item">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
As expected, Firefox breaks lines inside the flex item and sets its width to the available space.
However, Chrome doesn't break lines and thus the flex item overflows the flex container:
Who is right? How can I fix this?
This is what happens:
The Line Length Determination algorithm determines that the flex base size of the flex item is its max-content
Size the item into the available space using its used flex
basis in place of its main size, treating a value of
content as max-content. [...] The flex base size is
the item’s resulting main size.
Since there are no min nor max size constraints, the hypothetical main size of the flex item is the same value
The hypothetical main size is the item’s flex base size
clamped according to its min and max main size properties.
The Resolving Flexible Lengths algorithm freezes the inflexible flex item and sets its target main size to its hypothetical main size
Size inflexible items. Freeze, setting its target main size to its
hypothetical main size any item that has a flex factor of zero
Finally, the main size is that value too:
Set each item’s used main size to its target main size.
Therefore, your flex item should be sized as if it had flex-basis: max-content. Chrome, Edge and IE do it correctly.
Instead, Firefox seems to size as if it had flex-basis: fit-content. IMO this is more reasonable, but it's not standard. Bug 876985 should fix this.
Meanwhile, to achieve the standard behavior on Firefox you can use
flex-basis: -moz-max-content;
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
flex-basis: -moz-max-content;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
border: 3px solid red;
margin: 3px;
}
<div class="flex-container">
<div class="flex-item">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Instead, if you want Firefox's behavior on other browsers, it's not that easy.
Chrome doesn't support fit-content on flex-basis, but it does on width (prefixed)
flex-basis: auto;
width: -webkit-fit-content;
width: fit-content;
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
width: -webkit-fit-content;
width: fit-content;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
border: 3px solid red;
margin: 3px;
}
<div class="flex-container">
<div class="flex-item">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
However, IE/Edge doesn't support fit-content anywhere. But a max constraint should work on all browsers
max-width: 100%;
box-sizing: border-box; /* Include paddings and borders */
Note the constraint won't include margins, so you may need to correct the percentage using calc, e.g. max-width: calc(100% - 6px).
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
max-width: calc(100% - 6px);
box-sizing: border-box;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
border: 3px solid red;
margin: 3px;
}
<div class="flex-container">
<div class="flex-item">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
This question concerns a browser with full css3 support including flexbox.
I have a flex container with some items in it. They are all justified to flex-start but I want the last .end item to be justified to flex-end. Is there a good way to do this without modifying the HTML and without resorting to absolute positioning?
.container {
display: flex;
flex-direction: column;
outline: 1px solid green;
min-height: 400px;
width: 100px;
justify-content: flex-start;
}
p {
height: 50px;
background-color: blue;
margin: 5px;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p class="end"></p>
</div>
Flexible Box Layout Module - 8.1. Aligning with auto margins
Auto margins on flex items have an effect very similar to auto margins in block flow:
During calculations of flex bases and flexible lengths, auto margins are treated as 0.
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Therefore you could use margin-top: auto to distribute the space between the other elements and the last element.
This will position the last element at the bottom.
p:last-of-type {
margin-top: auto;
}
.container {
display: flex;
flex-direction: column;
border: 1px solid #000;
min-height: 200px;
width: 100px;
}
p {
height: 30px;
background-color: blue;
margin: 5px;
}
p:last-of-type {
margin-top: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
</div>
Likewise, you can also use margin-left: auto or margin-right: auto for the same alignment horizontally.
p:last-of-type {
margin-left: auto;
}
.container {
display: flex;
width: 100%;
border: 1px solid #000;
}
p {
height: 50px;
width: 50px;
background-color: blue;
margin: 5px;
}
p:last-of-type {
margin-left: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
This flexbox principle also works horizontally
During calculations of flex bases and flexible lengths, auto margins
are treated as 0. Prior to alignment via justify-content and
align-self, any positive free space is distributed to auto margins in
that dimension.
Setting an automatic left margin for the Last Item will do the work.
.last-item {
margin-left: auto;
}
Code Example:
.container {
display: flex;
width: 400px;
outline: 1px solid black;
}
p {
height: 50px;
width: 50px;
margin: 5px;
background-color: blue;
}
.last-item {
margin-left: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p class="last-item"></p>
</div>
Codepen Snippet
This can be very useful for Desktop Footers.
As Envato did here with the company logo.
Codepen Snippet
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 6 years ago.
When using flex box in default row direction, the container height grows to contain all the flex items, even if it is absolutely positioned.
#container {
position: absolute;
display: flex;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
height: 200px;
}
See http://codepen.io/tamlyn/pen/dPjLoN/?editors=110
However if the flex direction is changed to column, the container collapses to the width of a single flex item, even if the items wrap onto the next column.
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
width: 200px;
}
See http://codepen.io/tamlyn/pen/rarbeN?editors=110
How can I make the container contain all flex items in column mode?
I've actually found a CSS-only solution to this but it isn't the most perfect thing in the world. Here it is: http://codepen.io/anon/pen/vEPBKK
The trick here is to create a visibility: collapsed container. In flex, visibility: collapsed objects take themselves out of the normal flex flow but retain their dimensions for the purpose of layout. This widens the flex container to the desired width but leaves the flex items unaffected. There are a few caveats, however:
This requires a bit of fiddling. As you can see, the magic <div> is a set width but it uses :nth-child to determine how many boxes are before it. If your actual design breaks at more or less than 3 rows, you'll have to adjust this and you'll most certainly have to adjust the width of the object.
Because of a rendering bug, this does not work in IE. Luckily, IE's incorrect implementation does exactly what you wanted in the first place without any changes so all you have to do is give IE it's own stylesheet with some conditional statements and shoot the div.magic some good old display: none.
HTML
<div id="container">
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="magic"></div>
</div>
CSS
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #f00;
height: 650px;
padding: 1px;
}
#container div.fb {
border: 1px solid #555;
flex: 0 0 200px;
background-color: #ccc;
width: 200px;
margin: 1px;
height: 200px;
}
#container > div.magic {
height: 0;
margin: 0;
padding: 0;
visibility: collapsed;
}
#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
width: 408px;
}
#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
width: 612px;
}
#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
width: 816px;
}
I think this is the CSS you're looking for:
#container {
display: flex;
flex-flow: row wrap;
border: 1px solid #f00;
padding: 1px;
}
#container > * {
border: 1px solid #555;
background-color: #ccc;
height: 200px;
width: 200px;
margin: 1px;
}
The "Container" will always the the width of it's container, in this case the page, but now the boxes will adjust within it properly.
Let me know if I misunderstood your question.
Update
I've been playing with what you're asking for for several days now, and it really seems like it's not possible to do what you're asking... at least not in the direction that you're asking.
The container wants to be the maximum width possible. Unless you force the container to be the exact width, at which point it wont be the full width, but it wont flex with the flexing content either.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
border: 1px solid #f00;
}
.flex-item {
background-color: #ccc;
padding: 5px;
width: 200px;
height: 150px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
border: 1px solid #555;
}
<div id="container" class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
The first try I do not understand what you mean
as reference material you can see this tutorial
https://css-tricks.com/snippets/css/a-guide-to-flexbox/