https://exchagerates.herokuapp.com/
If you look at the Guam flag in Chrome it is cut off from the top. It gets distributed between the first column and the second. Which is what I don't want. How do I get the tops of all columns to align? I have tried using page-break-inside: avoid but that doesn't seem to help.
Can someone help?
You were close, just add a webkit prefix:
-webkit-column-break-inside: avoid;
Required for my Chrome at least, Windows, version 77.0.3865.120 (Official Build) (64-bit).
Use align-items: center; or align-items: flex-end; on all flex items
OR
Change the structure Flexbox
For the container you've decided to create a CSS columns layout. This doesn't have much effect in generating height for the children. Quite the opposite.
Referrring to a Bootstrap card-deck layout, you'll need the following CSS on the container:
/*columns: 300px 4;*/
/* margin: 20vh 5% 5%; */
margin-top: calc(50px + 4%); // 50px height of the input + 2% top margin + 2% bottom margin
margin-left: 5%;
margin-right: 5%;
display: flex;
flex-flow: row wrap;
In this case the children will be aligned as flex items. For a column layout you'll need the flex-basis property.
display: flex;
flex: 1 0 30%; // flex-basis 30% for 3 colums per row (33.33% - 15px - 15px)
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
Related
Is it possible to make flex-wrap wrap after the last row overflows without vertical scroll like it is possible horizontally?
My CSS currently looks like this:
.flex-container {
height: calc(100% - 0.125rem);
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
overflow: hidden;
align-items: center;
}
.item {
width: 6.25rem;
height: 6.25rem;
margin: 1px 0 0 1px;
font-size: 2.25rem;
line-height: 6.25rem;
background-color: rgb(225, 225, 225);
}
My output looks like this (flex wraps and empty space below)
What I am trying to achieve looks like this
If I understand your question right, I think the challenge you have is with the height property of the .flex-container class.
height: calc(100% - 0.125rem) will leave an offset(gap) since the height of .item 6.25rem > 0.125rem.
For the height of .flex-container try height: calc(100% - 6.25rem) instead, or tweak the height property until you get your desired output.
Note that the flex-wrap property only specifies if the flex items should stay on one line or can wrap onto multiple lines, which you already have specified. And with the overflow property set to hidden, you should not have any challenges with scrolls.
I am adding 3 columns that are 400px wide max and adding space between them using space-between.
.wrap {
display: flex;
flex-wrap: wrap;
align-content: stretch;
justify-content: space-between;
}
.item {
width: 100%;
max-width: 400px;
}
When I make the screen size smaller, the items are not responsive. They just collapse below each other. If I remove flex-wrap I start getting more than 3 columns per row and they are below 400px.
How can I get 3 responsive columns with space between in flex?
Percent for the width can't be used because the space between items has to look the same at any screen size.
You should drop width: 100% if you do not want them to occupy the whole width of the parent. And since you are using flex on the parent, you might as well use flex properties on the children and have these:
.item {
flex-basis: 33%; /* <-- Added in lieu of the width */
max-width: 400px;
margin: 0px 5px; /* <-- Added to give left/right margins */
}
If you only have those 3 children in the parent, then you could also do this:
.item {
flex-grow: 1; /* <-- Lets them grow equally */
flex-shrink: 1; /* <-- Lets them shrink equally. OPTIONAL as 1 is the default */
max-width: 400px;
margin: 0px 5px; /* <-- Added to give left/right margins */
}
The shorthand for the last one is this:
.item {
flex: 1; /* <-- Lets them grow/shrink equally */
max-width: 400px;
margin: 0px 5px; /* <-- Added to give left/right margins */
}
Also, if you only have those 3 children in the parent, you may want to remove flex-wrap: wrap; from .wrapper if you do not want the children elements to wrap. It will not happen in this case, since the children have percentage widths which add up to 100%. But it could be confusing and it contradicts with your intent.
If you want three columns, change the width property to 33% in your .item declaration instead of 100%.
JSFiddle example
Currently, all your "columns" are fighting to be 100% of the parent node. Here's a great explanation of using css flex from css-tricks.com.
I am using Flexbox for a series of content blocks. The idea is to have blocks in a flex container whose height will be determined by the total of the flex items within it. This is working well on Chrome and Safari as it calculates the container height automatically and correctly, but the same does not happen on Firefox + IE. My CSS looks like this:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.primary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 56.25%;
margin-bottom: 10px;
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
.secondary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 28.10026385%;
flex: 2 1 40%;
margin-left: 10px;
}
}
Essentially, the padding-top: 28.1% decoration is for a background image set as an inline style. On chrome + safari, this calculates the height just fine. However, the container's height is not set up on IE + FF. I have tested all my browser prefixes and checked a lot of questions, but I'm a bit lost on why the height is calculated differently. If anyone has any suggestions that would be excellent. Setting a min-height on the blocks is not an option, as we will have varying sizes of blocks, so we don't want to constrain ourselves to a fixed or min height.
Short version: is there a difference in how Firefox + IE calculate height of flex containers and items? If so, what is the best way to get it to behave like Safari + chrome?
Here is a contrived example: http://codepen.io/anon/pen/NGjYGR
I'm noticing a few potential issues with the code you're referencing. Also, without full context of the referenced code—missing HTML—recommendations are based on the assumption that your HTML is structured in the following manner:
.container
.primary
.secondary
No height set on .container
If dimensions aren't set on this element how are the dimensions calculated for the children elements (i.e.: "28.1%" of ?) ?
There are many known issues with certain browser implementations of the flex specification
There are known issues with implementations flex-basis, and height calculations. Here is a comprehensive article on browser nuances on flex: here.
References:
Normalizing Cross-browser Flexbox Bugs:
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
I have the following arrangement via flexbox with flex-wrap and elements able to stretch using flex-grow:
Each item has a margin on all sides. This is to separate the items from each other, but the side effect is the whole block has margins which I'd like to collapse. It could be done with rules like nth-child(-n+3) { margin-top: 0; } but because the container size could vary, there could be any number of items per row and any number of rows. So I'm wondering if flex-box has any way to collapse the outer margins in a setup like this, while retaining the margins between items.
JSBin
The HTML is simply 6 items inside a container.
The CSS (Sass) is as follows:
.container
display: flex
flex-wrap: wrap
background: #eef
align-items: stretch
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
It's a bit of a hack, but you can add a negative margin on the flex container to cancel out the items' margins along the edges, and then move its "background" styling to a parent wrapper-element.
Updated JSBin
Updated CSS (SASS):
.wrapper
background: #eef
border: 1px solid darkgray
.container
display: flex
flex-wrap: wrap
margin: -1em
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
Another hack is to split the margin responsibilities between container and item, each caring about half (say $margin is 1em):
• container cares about its bottom margin and half left + half-right of items:
.container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap; // Go to next line if not enough space
padding-top: 0; // Let items handle top
padding-left: $margin/2; // Handle half of left
padding-bottom: $margin; // Handle bottom
padding-right: $margin/2; // Handle half of right
}
• items care about top and half left + half right:
.item {
flex-grow: 1; // Use available space
margin-left: $margin/2; // Handle other half of left
margin-right: $margin/2; // Handle other half of right
margin-top: $margin; // Handle top
}
Regarding items size, you can set a width if you want items to look the same.
.item.fixed {
width: 15em;
}
See a demo here.
Im wanting to float 3 divs evenly(or more generally speaking) .
Im building a responsive theme (kinda) and i want specific items to adjust accordingly based on widths available.
now Yes i can start with taking random screen measurements and make calculations for "breaking points" (what i normally do) but with so many devices, im trying to see if i can make something truly flex in a smarter way which for me, would be something more automatic.
Like when one does even alignment with say margin 0px auto; etc...
so for example. if i have parent div at 1000px wide, and div1, div2, div3, div4 that i want floated at say, 240px wide, and "even" spacing, id maybe do it like this.
div1{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div2{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div3{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div4{ float:right; max-width:XXX; min-width:XXX; }
which will give me more or less my even spacing. If i wanted to adjust to different screens, id maybe do a media queries and blah blah blah
then id have to start with math to make good breaking points that look even.
is there a way to make it so that the spacing between divs floated remains even reguardless of the screen width without having to get into specific numbers?? as an example again, like when one does margin 0px auto; for example???
It may have been asked before, i apologize if it has.
Thanks in advanced.
If your markup looks similar to this...
<div class="parent">
<div>a</div>
<div>b</div>
<div>c</div>
<div>c</div>
</div>
Flexbox can do this very easily, and you won't need to use media queries for narrower devices. It just redistributes the free space for you.
http://jsfiddle.net/END8C/ (all prefixes included)
.parent {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
margin: -5px; /* optional */
overflow: hidden; /* optional */
}
.parent div {
-webkit-flex: 0 0 240px;
-ms-flex: 0 0 240px;
flex: 0 0 240px;
margin: 5px;
}
You're still free to use floats on the child elements as a fall back for browsers that don't support flexbox (see: http://caniuse.com/#search=flexbox). Only thing to be aware of is that Firefox doesn't support wrapping so you'll have to use a #supports block for the unprefixed version (see: http://www.sitepoint.com/supports-native-css-feature-detection/).
You can get a similar effect by using justification:
http://jsfiddle.net/END8C/1/
.parent {
text-align: justify;
margin: -5px; /* optional */
}
.parent:after {
content: " ";
display: inline-block;
width: 100%;
}
.parent div {
display: inline-block;
margin: 5px;
width: 240px;
}
You'll need to comment out or remove any whitespace after the last child element or they won't line up right when the children wrap.
Try this, it will work for dynamic width,
#parent
{
width:99%;
text-align:center;
border-style:solid;
}
.kids
{
width:23%;
border-style:solid;
height:100px;
display:inline-block;
}