I'm using the flexible box module to position two div elements horizontally with the second div being flexible. To do so I'm using code similar to the following:
#container {
display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; }
#one, #two {
background: rgb(230,235,240);
padding: 20px;
}
#two {
-moz-box-flex: 1; -webkit-box-flex: 1;
margin-left: 10px;
}
The #two div is going to have more content than #one and, in turn, will likely always be taller. For some reason when using the flexible box module it extends the height of the #one div to match the height of #two. This isn't quite what I'm wanting. I need the #one div's height to be auto.
Suggestions on why this is happening, and/or how to fix it?
Here is an example: http://jsfiddle.net/brandondurham/3F7Vu/
And a screenshot:
I think you want to set box-align: start for #container.
BTW, after adding standard properties without vendor prefix, your code will also work in IE10 and Opera.
ACK. I can research for an hour and then post the question. IMMEDIATELY afterwards I figure it out.
-moz-box-align: start; -webkit-box-align: start; box-align: start;
Related
Centred flexbox items can have undesirable behaviour when they overflow their container.
Several non-flex solutions have been provided for this issue, but according to MDN there is a safe value which is described as follows.
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
It can be used as follows.
align-items: safe center;
Unfortunately, I haven't been able to find any examples or discussions of this, or determine how much browser support there is for it.
I have attempted to use safe in this CodePen. However, it doesn't work for me. The safe seems to be ignored, or perhaps the container element is improperly styled.
I'd really appreciate it if anyone could shed some light on safe and whether and how it can be used to solve the overflow problem, as demonstrated by the CodePen example.
The newer keyword safe still has bad browser support, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.
Updated codepen
Note, to compensate for the modal's 50px top/bottom margin, use padding on modal-container.
.modal-container
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start; /* changed */
position: fixed;
width: 100vw;
height: 100vh;
overflow-y: scroll;
padding: 50px 0; /* added */
box-sizing: border-box; /* added */
}
.modal-container > #modal
{
display: flex;
flex-direction: column;
align-items: center;
margin: auto 0; /* changed */
padding: 12px;
width: 50%;
background-color: #333;
cursor: pointer;
}
safe isn't implemented in most browsers yet. You can recreate some of its functionality with auto margins.
I was trying to use justify-content: safe center to have a bunch of items centered in a footer when the viewport was wide, but have them able to scroll without clipping off the left side when the viewport was small.
When I tried to fix this with auto margins as Ason suggested, it did fix the clipping, but it also spread the items out evenly, which isn't what I wanted.
I found I could simulate safe center in this context by applying auto margins to only the first and last elements.
Assuming my flex items have class "item":
.item:first-child {
margin-left: auto;
}
.item:last-child {
margin-right: auto;
}
CodePen with examples comparing each solution
Use align-items: flex-start; instead of using it with the safe keyword, Also, you can add margin/padding to get the desired behavior for the same.
Whatever I do, I can't seem to get the columns that float left and right to center and align to the middle of it's container. Is there a way with Flexbox only to just have a left and right column, but still align them in the middle? It works fine in Firefox and Chrome, but not on Safari 8.
https://jsfiddle.net/vhem8scs/68/
.container {
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
height: 200px;
margin-top: 20px;
}
.column:after {
content: '';
display: table;
clear: both;
}
.column div {
float: left;
}
.column div:last-child {
float: right;
}
Update
I added the following line to the container.
justify-content: space-between
While it aligns to the center/middle of the container, the floats do not work now.
Unfortunately it is rather difficult to visualize what you're trying to accomplish with your styles, but here's my preliminary analysis of the issue.
Once you declare an element to be a flex container, all the children will follow flexbox rules. Float styles will essentially be ignored. As a result, what you might want to try doing is making use of the flex-grow, flex-shrink, and flex-basis properties on the children to ensure columns sit in the proper position.
If you goal is to simply put space in between the columns, utilize the justify-content property with either space-around or space-between on the parent flex element.
Hope this helps!
I am using a flexbox layout that is usually presented as a row but when the screen is a certain width it switches to column. This works fine in Chrome, Firefox, Safari and Edge but on IE 11 the flex elements will not center even though I am using justify-content: space-around;
I have looked at https://github.com/philipwalton/flexbugs and other websites that list flexbox bugs and I can't seem to find the solution.
I have distilled it down to a simple example to demonstrate the problem.
First we have a container that spans the width of the screen with the following properties:
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
width: 100%;
}
Then inside it we have four cells with the following properties:
.cell {
flex-grow: 2;
text-align: center;
display: inline-block;
background-color: green;
margin: 5px auto;
min-width: 50px;
max-width: 20%;
}
On IE the four cells are aligned left, but on any of the other browsers the cells are center aligned.
Here is an artist's impression of the situation
I have created a JSFiddle that demonstrates the issue at https://jsfiddle.net/8w1gf7vx/4/
You are using the wrong property - justify-content is for alignment on the main axis. Your flex-direction is column, therefor the main axis goes from top to bottom - and so all justify-content does here is influence the distribution of space above and below your items.
You want to align your items on the cross axis - and the property to achieve that is align-items.
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
https://jsfiddle.net/8w1gf7vx/6/
text-align: center; and display:inline-block from the items can be removed - unless you want to use those as a fallback for browsers that don't understand flexbox. (I suspect they might be the reason that what you had seemed to work as intended in other browsers. As Oriol pointed out in comment, that's rather due to margin-left/-right being auto - and that IE doesn't seem to support that.)
http://flexboxfroggy.com/ is a nice way to get a better understanding of what the different flex properties do, in the form of a little game - might be worth a look for anyone who still struggles a bit with flexbox now and then (and that includes myself ;-)
Disclaimer: I am not affiliated with that site in any way, I just think it is quite useful in gaining a better understanding of flexbox.
I am trying to create a vertical nav menu using some of the new css3 techniques but so far I can only get closest to the desired look with display:table . I do not like using display:table/table-row/table-cell primarily because they limit the "cells" to table form (for example you can't space the "rows" or "cells" with margins) and I also don't like the extra divs that only serve to make the list vertical. The reason I went this direction originally was to use vertical-align: middle for the text. When I tried using flex box methods it kept putting both lines of text on the same line and I could not figure out how to split them.
Can you help me achieve the same look but with more flexibility and preferably no extra divs?
Working example of display: table method (does not appear to be perfectly centered though): http://jsfiddle.net/jKRDQ/
Closest I came using flex box method: http://jsfiddle.net/4wSN5/
Closest without CSS3: http://jsfiddle.net/6gRcp/
Your table method has invalid markup: only li elements can be children of ul or ol elements. If you need that extra div, it has to be inside the li.
Your Flexbox method is missing box-orientation/flex-direction. By defult, it is set to horizontal/row, which is what makes them all appear in a row. The CSS for your li should look like this:
http://jsfiddle.net/4wSN5/1/
#slide-out-menu li {
width: 75px;
height: 75px;
border: 1px solid black;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-flex-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
Alternately, you could have stayed with the horizontal/row orientation and used wrapping, but that would have only worked on browsers that support the standard spec (excluding Firefox with experimental Flexbox support enabled).
You may need to drop the prefixes for Firefox because their implementation is so bad. I only included them because my Sass mixins emit them.
If you're going to use Flexbox, never use the properties from the 2009 spec by themselves. While Opera and Chrome (both under the -webkit- prefix) support both the old and new specs (Opera is unprefixed on the new ones), the old ones will be dropped eventually.
Been googling around for awhile and found some solutions, but none that work for what I've trying to do. Basically I need to space 4 div equally that are 25% - the margin wide. The tricky part is getting the last to not have a space at the end. Tried:
.container {
display: flex;
justify-content: space-between;
}
.child {
width: 22%;
}
But it leaves a space at the end. Seems simple, but I've tried multiple different ways, none work correctly. The tricky part seems to be the percentage width and getting the last element not to have a space on the right.
#marc-j was right, Drupal was adding a clearfix which was causing the extra space at the end. This works:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.child {
width: 22%;
}