CSS Flexible Box Layout on Ipad

CSS Flexible Box Layout on iPad

You're missing some properties from the old 2009 draft (or have them named wrong). Your container CSS should look like this:

http://cssdeck.com/labs/ci9imeed

.container {
  width: 510px;
  height: 310px;
  background: red;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  border: 2px solid;
  padding: 5px;
  margin: 0;
}

Note, however, that none of the browsers with a 2009 Flexbox implementation (Android, older Safari, older Firefox) support wrapping.

IPad, Safari, CSS: Fill page with flex

I finally solved the problem. It's important to add height: auto; and min-height: 100%; to body and html and position: absolute; to body.

Here is the final code which worked on all my test environments.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
    height: auto;
    min-height: 100%;
    margin: 0;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    position: absolute;
    width: 100%;
}

main {
    flex-grow: 1;
}

div {
    background-color: yellow;
    height: 200px;
}
</style>
</head>
<body>
    <main>
        <div>main</div>
    </main>
    <footer> footer </footer>
</body>
</html>

Flexbox issues on the ipad/iphone

The issue with your SVG is that you have applied 100% width to it and its container.

If you do

.kit-template .svg-document, .kit-template svg { width: auto }

that should fix your issue.

css flex layout not working on some iPads

That is because you are missing the 2009 -webkit-box syntax for justify-content: space-between. Older iPads with Safari < 6.1 need -webkit-box-pack: justify;.

For flexbox back-compat, you need to use the 2 additional syntaxes for all non-default properties, including -moz- and -ms- prefixes for all browsers.

Your wrapper should be:

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;

See this demo and flexbox generator for help with your complete cross-browser syntax.

PS: Note that this tool will generate the full set of properties. Some of which you may not need, if already the "flexbox" default. In this case you don't need row or nowrap. It's already the flex default.

display: flex; doesn't work on iPad (both Chrome and Safari)

If your iPad isn't running iOS 9, you need to add -webkit-flex: 0 0 155px; to #topleft, -webkit-flex: 0 0 40%; to #topmid, and -webkit-flex: 1; to #topright.

Making an assumption based on your inclusion of display: -webkit-flex;

So, your new CSS might look like:

* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { -webkit-flex: 0 0 155px; flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { -webkit-flex: 0 0 40%; flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { -webkit-flex: 1; flex: 1; background-color: yellow; }

Also, Chrome on iPad is still using the Safari engine... it's just a webview, so we don't get all the up to date Chrome goodness we get on android devices.

Flex 2 column layout not working on ios 8 safari

Solved it using -webkit-box-flex and some other prefixes
https://jsbin.com/midewadoba/1/edit?html,css,output

CSS Flexible Box Layout on Ipad