I am working on my project now, so I decided to use flexbox instead of float. It works fine for me, but I've found that display:flex doesn't work on the old iphone (ios 6.1). So I've added
display: -webkit-box;
Flex property works now, but all items are arranged in a row. I've created a simple fiddle, to show the problem.
Also I've made two screenshots, to show how it works on PC and on iPhone.
PC:
iPhone:
As you see -webkit-flex-wrap: wrap doesn't work.
Does anybody know how to solve this problem??
I hope for your help.
Support for the current flexbox specification in iOS doesn't begin until iOS 7.0.
iOS 3.2 - 6.1 support the old flexbox specification and do not support wrapping.
See browser support data here: http://caniuse.com/#search=flexbox
See the flex-direction property for info on how to align the flex items (row or column).
.wrapper {
flex-direction: column;
...
}
Also, on your flex items, you have (width: 500px;) try the flex property:
.wrapper > div {
flex: 0 0 500px;
...
}
Related
I just got into the flex world and am struggling a little with a setup like this one:
https://jsfiddle.net/5b0pLgkj/
In Chrome and Safari it works perfectly, children elements can be re-sized and they take the full empty space of the container. In Firefox, however, flex:1 does not seem to do anything and children can't be resized (although the height seems to be changing in the DOM).
Is it really necessary to use flex:auto?. When I do that it seems to work but children no longer take all the empty space. Any thoughts?
Thank you!
flex:1; it is equivalent to flex: 1 1 0n;
In Chrome for example flex:1 and flex:1 1 0; produce different results because flex-basis is ignored and only flex-grow and flex-shrink are applied.
So, your flex-basis is set to zero and FF read it as 0, which do not work for your the desired effect.
Set it to flex: 1 1 auto; or simply flex: auto;
Flex is the shorthand for flex-grow, flex-shrink and flex-basis.
See: https://css-tricks.com/almanac/properties/f/flex/
When height: 100vh is provided to iOS Safari, it uses the full iPhone screen size instead of the visible part (excluding the toolbar, if currently visible).
I search a lot but didn't find any proper workaround for it.
Is there a (preferably CSS-only) way to set the height of an element to the size of the visible screen - no matter if a toolbar is displayed or not?
I want to center an HTML element both, vertically and horizontally, while its width adapts to the screen width as well.
I am currently using the following piece of CSS, which works great - except for mobile iOS Safari (I left out the vendor prefixes for the sake of simplicity):
.vertical-center{
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
Someone shared a possible solution in a comment on my blog post.
He recommended using min-height: calc(100% - 0);.
I didn't try it yet.
Here's Fiddle Link
I want to change the order of 2nd and 3rd element in mobile screen with the css. What Will be best way of doing it.
HTML
<div id="parent">
<div id="a">image</div>
<div id="b">button</div>
<div id="c">description</div>
</div>
Css
#media screen and (max-width:300px){
#parent{
display:flex;
flex-flow: column;
}
#a{order:1;}
#c{order:2;}
#b{order:3;}
}
It's a good idea to have a fallback for flexbox at desktop sizes, but
1) 300px is smaller than any smartphone on the market today
2) There are no phones/tablets/devices that small that run IE9. Last I checked, IE9 only exists as a desktop program.
So if you're targeting small stuff, go ahead and just use flexbox. If you still need a fallback (ie if you plan to use flexbox effects at desktop+ resolutions), there have been some interesting solutions devised using css display:table.
I'm trying to have two elements fill their container and wrap when they reach a certain minimum size. The code I have works perfectly on all browsers other than safari & I can't figure out an alternative. It appears to be an issue with flex-basis: 0
Here's the issue:
http://www.cssdesk.com/RKeNY
Both display differently in safari and chrome. When the container width is changed on safari the flex-wrap has no effect.
Try setting
-webkit-flex:1 1 auto;
instead of
-webkit-flex:1;
on the flex elements.
This is discussed here: https://github.com/Modernizr/Modernizr/issues/1414
Specifically:
hexalys commented 28 days ago
To enable wrapping you'll need to need to specifically set flex: auto
(equivalent to flex: 1 1 auto;) or set both property flex-shrink:
1;and flex-basis: auto. The flex: 1; you have in your code does flex:
1 1 0px; technically allowing shrink, but apparently there is a bug
with the webkit prefixed version in Safari which does not allow a flex
wrap in that condition, while it correctly does on the unprefixed
version of Chrome and Firefox.
I'm curious is it possible to use the Grid Layout CSS to create such thing:
************************
* row #1 *
************************
* *
* *
* row #2 *
* *
* *
************************
* row #3 *
************************
So the grid must fill the full body height. And there's also some restrictions for other elements:
The row #1 is aligned to the top of the grid and can change it's
height (but has a max-height value)
The row #3 is aligned to the
bottom and can change it's height (also has a max-height value)
So the row #2 must fill all remaining space in grid.
The grid container should not overflow the html body.
There's an example what I achieved: 3 row grid layout.
I also can make everything with absolute position like this but there's no use because I can automatically calculate the row #2 margins without any imperative js code.
I see that the original question is marked as answered, but as the original included an attempt to use the CSS Grid Layout module to solve the problem, I thought I'd complement the answers with some solutions using newer standards.
Using flexbox
First of all, this kind of layout is pretty easy using flexbox. The flex-grow property allows you to define elements that fill the remaining space in this very way. JSBin example using flexbox here
Note: Not using all prefixes (e.g. to target IE10 etc) in the quick demo, but if you use something like autoprefixer it's kind of trivial. Also, beware of bugs relating to things like vh units in iOS and min-height flexbox columns in IE.
Using grid layout
Note: This demo will only work in Chrome Canary at the time the answer was written!
Grid layout is picking up pace and the spec has stabilized a bit. Chrome Canary has an implementation that is pretty far along, as does the WebKit nightly builds.
Grid layout has the same type of flexible sizing as flexbox, and moves the layout mechanism to the container element instead. JSBin demo – remember, Chrome Canary only at the time of writing. (It would work in WebKit nightlies as well with the right prefixes.)
Basically, the whole thing boils down to these lines:
body {
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
height: 100vh;
}
The above means "Use the body element as a grid container, place items in it in source order, in a single column that is 100% wide, and size the first and third row according to content, and the middle one takes up all the space that is left". We don't need to specifically place the items inside the grid: they will auto-place themselves – we could change order etc if we wanted though. Grid Layout can do many more advanced things!
Most browser vendors are working on finishing their first grid implementations, so it's fun & worthwhile to start playing with it. :-)
Until then, the flexbox version gets you pretty good browser support.
You can do this with display:table property See Spec and Compatibility
Working Demo
CSS
#container {
display:table;
}
#head, #content, #foot {
display:table-row;
}
Edit:
Updated Fiddle
Added div inside table-row to prevent overflow
what about setting percentages heights like this:
.head{
height:10%;
max-height: /*max height allowed*/;
}
.content{
height:80%;
max-height: /*max height allowed*/;
}
.foot{
height:10%;
max-height: /*max height allowed*/;
}