[iOS 9] flexbox justify-content hat keine Auswirkung

html.de-Forum HTML, XHTML & CSS
1

Hallo Forum,

ich sitze gerade vor dem Problem das ich scheinbar unter iOS mit Hilfe von flexbox nichts vertikal anordnen kann. [SIZE=2]Ich habe keine Möglichkeit direkt auf dem iPhone (5S) zu debuggen, dies geht ja leider erst mit Safari 6 welcher macOS exklusiv ist.[/SIZE]
Ich habe ein 3x3 Grid in dem ich Buttons angeordnet habe, in jedem dieser Buttons möchte ich einen einzelnen Buchstaben linksbündig, zentriert, rechtsbündig sowie nach oben, unten und mittel ausgerichtet platzieren können. Dazu habe ich im Grid die Hauptachse auf flex-direction: column; gestellt und jeden Button ebenso auf display: flex; sowie entsprechende Klassen erstellt:

[CODE]// X axis
.grid__button–align-left {
align-items: flex-start;
}

.grid__button–x-axis-center {
align-items: center;
}

.grid__button–x-axis-right {
align-items: flex-end;
}

// Y axis
.grid__button–y-axis-top {
justify-content: flex-start;
}

.grid__button–y-axis-center {
justify-content: center;
}

.grid__button–y-axis-bottom {
justify-content: flex-end;
}[/CODE]
Der gesamte Code befindet sich in diesem codepen: http://codepen.io/anon/pen/GjvzYp?editors=1100#0
Dazu sei noch gesagt, das ich Material Desin Lite benutze und in das codepen eingebunden habe https://getmdl.io/components/index.html

Aussehen soll das ganze so:
gesetzte Klassen sind hier:
[ul]
[li]grid__button–x-axis-center[/li][li]grid__button–y-axis-bottom[/li][/ul]
http://i.imgur.com/w0wIp6F.png

auf dem iPhone (egal welcher Browser [die nutzen ja eh alle die selbe Rendering Engine?]) sieht es so aus:

http://i.imgur.com/UwzWbak.png
hier funktioniert nur die horizontale Ausrichtung
um deutlich zu machen das die Größe des auszurichtenden „A“ stimmt habe ich die Hintergrundfarbe Gelb gesetzt und Höhe sowie Zeilenhöhe auf die Schriftgröße gesetzt.

Danke für eure Hilfe, ich habe echt keine Ahnung was ich hier falsch mache (laut caniuse is flexbox bei iOS 9 ja safe). Falls ihr eine Lösung wisst wäre es super kurz zu erklären was ich falsch mache und wieso eure Lösung hilft (damit ich es lerne)

2

Probier mal

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<style>


.grid {
  width: 240px;
  height: 240px;
  display: flex;
  flex-wrap: wrap;
}
  .grid button {
  display: flex;
  flex-direction: column;
  border:none;
  border-radius: 0;
  width: 80px;
  height: 80px;
  padding:0;margin:0;
}

.letter {
 background:#aaa;display:flex;
 width: 80px;
 height: 80px;
 padding:0;
 margin:0;
 border:1px solid #000;
}
  // X axis
  .grid__button--align-left {
  align-items: flex-start;
  }

  .grid__button--x-axis-center {
  align-items: center;
  }

  .grid__button--x-axis-right {
  align-items: flex-end;
  }

  // Y axis
  .grid__button--y-axis-top {
  justify-content: flex-start;
  }

  .grid__button--y-axis-center {
  justify-content: center;
  }

  .grid__button--y-axis-bottom {
  justify-content: flex-end;
  }

</style>
</head>
<body>

<div class="grid">
  <button class=""><span class="letter grid__button--x-axis-right">A</span></button>
  <button class=""><span class="letter grid__button--x-axis-center ">A</span></button>
  <button class=""><span class="letter grid__button--x-axis-left ">A</span></button>
 

  <button class=""><span class="letter grid__button--x-axis-right ">A</span></button>
  <button class=""><span class="letter grid__button--x-axis-center ">A</span></button>
  <button class=""><span class="letter grid__button--x-axis-left ">A</span></button>

  <button class=""><span class="letter grid__button--y-axis-top grid__button--y-axis-center">A</span></button>
  <button class=""><span class="letter letter grid__button--x-axis-center grid__button--y-axis-center ">A</span></button>
  <button class=""><span class="letter grid__button--x-axis-right grid__button--y-axis-center">A</span></button>
</div>

</body>
</html>
3

Hm das ergibt auch nicht den erwünschten Effekt, wenn ich es so mache, ist es mittig und rechts und nicht mittig und unten. Aber danke trotzdem.

Weitere Ideen?

Edit: außerdem wenn der Buchstabe genauso groß ist wie der umliegende Button kann der sich ja gar nicht bewegen(?)

4

Habe herausgefunden was der Fehler war, sowohl Firefox als auch Safari unterstützen Flexbox nicht im button Element. Für Firefox stand das bei caniuse. Merkwürdiges Verhalten.

5

Auch wenn es erledigt ist. Hier noch eine Alternative mit display:table.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display-table</title>
<style>
.grid {
 width: 240px;
 height: 240px;
 display: table;
}

.grid button  {
 display: table-cell;
 border-radius: 0;
 width: 80px;
 height: 80px;
}

span {
 display: table-cell;
 width: 70px;
 height: 70px;
}

.left {
 text-align:left;
}

.right {
 text-align:right;
}
.center {
 text-align:center;
}

.bottom {
 vertical-align:bottom;
}

.middle {
 vertical-align:middle;
}
</style>
</head>
<body>

<div class="grid">
 <button class="left"><span>A</span></button>
 <button class="left"><span class="bottom">A</span></button>
 <button class="left"><span class="middle">A</span></button>

 <button class="right"><span>A</span></button>
 <button class="right"><span class="bottom">A</span></button>
 <button class="right"><span class="middle">A</span></button>

 <button class="center"><span>A</span></button>
 <button class="center"><span class="bottom">A</span></button>
 <button class="center"><span class="middle">A</span></button>
</div>

</body>
</html>
6

Danke sehr - ich probiere das heute im laufe des Tages mal aus. Ist mir ehrlich gesagt auch lieber richtige Buttons zu verwenden (Screenreader usw.). Frage mich trotzdem was jetzt eher standardkonform ist, Chrome oder Firefox und Safari.

Ich bearbeite das hier noch mal wenn ich es probiert habe.

7

Hab das jetzt mal ausprobiert, würde auch center center gehen? Denke dazu müsste das span aber kleiner sein. Hab das noch nicht so ganz raus

8

Keine Ahnung, was du mit center/center meinst, aber ich glaube, dass es mit buttons einige Probleme gibt. Daher hier noch ein Beispiel mit A Elemente. Ist einfacher und ich hoffe, dass IOS da mitspielt.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display-table</title>
<style>

* {
 margin:0;
 padding:0;

}
.grid {
 width: 240px;
 height: 240px;
 display: table;
 margin:30px;
 border-collapse:collapse;
}

.grid a {
 display: table-cell;
 background:#0c9;
 border:1px solid #000;
 width: 80px;
 height: 80px;
 font-size:1em;
 text-decoration:none;
 color:#000;
}


.left {
 text-align:left;
}

.right {
 text-align:right;
}
.center {
 text-align:center;
}

.bottom {
 vertical-align:bottom;
}

.middle {
 vertical-align:middle;
}

.row {
 display:table-row;
}

a:hover {
 background:#09c;
 color:#fff;
}
</style>
</head>
<body>

<h2> Mit A Element</h2>
<div class="grid">
<div class="row">
 <a href="" class="left"><span>A</span></a>
 <a href="" class="left bottom"><span>A</span></a>
 <a href="" class="left middle"><span>A</span></a>
</div>
<div class="row">
 <a href="" class="right"><span>A</span></a>
 <a href="" class="right bottom"><span>A</span></a>
 <a href="" class="right middle"><span>A</span></a>
</div>
<div class="row">
 <a href="" class="center"><span>A</span></a>
 <a href="" class="center bottom"><span>A</span></a>
 <a href="" class="center middle"><span>A</span></a>
</div>
</div>

</body>
</html>