CSS FLEX - syntax

[Verwijderd]

Hallo helden,

ik ben op zoek naar iemand die vertrouwd is met de syntax voor de css v.d. css-flexbox
Zou u mij verder willen helpen?

de volgende css volstaat niet in Safari

.flex-container
{ display:flex;
flex-row:row wrap; }

.flex-box
{ display:flex;
flex-flow:column; }

.inner_wrapper_rechterKolom,
.inner_wrapper_linkerKolom
{ flex: 1 1 auto; }

Ik heb gedeeltelijk al wel een Safari-hack gevonden, maar krijg de syntax toch niet compleet ...
Tegelijk uitgebreid met andere hacks om het netjes cross-browser te krijgen

.flex-container
{ display: -webkit-box; /* Safari */
display: -moz-box; /* Firefox 21- */
display: -webkit-flexbox; /* niet duidelijk welke browser dit is */
display: -ms-flexbox; /* IE 10+ */
display: -webkit-flex; /* Chrome */
display:flex;

---

?????????
flex-row:row wrap; } /* flex-row: = schrijffout? */

---

---

.flex-box
{ display: -webkit-box; /* Safari */
display: -moz-box; /* Firefox 21- */
display: -webkit-flexbox; /* niet duidelijk welke browser dit is */
display: -ms-flexbox; /* IE 10+ */
display: -webkit-flex; /* Chrome */
display:flex;

---

?????????
flex-flow:column; }

---

---

.inner_wrapper_rechterKolom,
.inner_wrapper_linkerKolom
{ -webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto; }

De vraag is nu hoe ik de volgende css crossbrowser hoor te schrijven:
flex-row:row wrap;
+
flex-flow:column;

En ik twijfel of de onderstreepte regels ook wel goed gegaan zijn ...

Ik hoop dat iemand wil reageren. Zou er blij mee zijn!
vr groet Clu

[eXtreaL]

Het klopt inderdaad dat flex-row geen geldige property is. Je probeert in flex-row de properties row en wrap te definiëren: row is een geldige waarde voor flex-direction, dit is ook de default waarde. Wrap is een geldige waarde voor flex-wrap.

Flex-flow is in feite een samentrekking van de flex-direction en flex-wrap property, wat je dus kan doen is:

code:

flex-flow: row wrap;

Daarnaast zou het niet nodig moeten zijn om hacks in te bouwen voor Safari, aangezien in de laatste versie de Flexbox syntax goed wordt ondersteund (http://caniuse.com/#feat=flexbox).

Verder kan ik je aanraden om iets als autoprefixer (https://github.com/postcss/autoprefixer) te gebruiken om je vendor prefixes toe te voegen, autoprefixer houdt namelijk ook rekening met de oude Flexbox syntax. Een voorbeeld hiervan is "align-items", wat in de oudere syntax "box-align" was.

[ Voor 3% gewijzigd door eXtreaL op 01-10-2015 18:50 ]

[Verwijderd]

Hallo eXtreaL
Dank voor je snelle reactie.

Het script komt van http://codepen.io/anon/pen/ftrdA

inderdaad gewijzigd
.flex-container { flex-flow: row wrap; }

Toch heeft deze in mijn Safari = v.5.1.7 in Windows 7
deze hack nodig:
.flex-container { display:flex; display:-webkit-box; }

Heel vreemd, maar de volgende heeft geen hack nodig:
.flex-box { display:flex; }

Maar heeft het dan toch geen voorkeur om zoveel mogelijk crossbrowser te werken - er zijn nog steeds bezoekers met oudere versies ?

In ieder geval hartelijk, hartelijk dank zover
- overigens, op codepen doet 'ie het nu wel, maar in m'n eigen website is het nog even zoeken wat er aan schort

gr Clu

[ Voor 7% gewijzigd door Verwijderd op 01-10-2015 19:45 ]

[Verwijderd]

... maar in m'n eigen website is het nog even zoeken wat er aan schort ..

Zoekt en gij zult vinden, nietwaar?

Eind goed al goed !

*snip* post aub gewoon de code/oplossing; je site spammen is niet de bedoeling

helemaal top! ben er blij mee.

Nogmaals, dank u wel

[ Voor 19% gewijzigd door RobIII op 01-10-2015 21:22 ]

[Verwijderd]

Hai Rob
nee hoor, was geen bewuste spam - gewoon een beetje over-enthousiast met het eindresultaat.

Sorry, zal niet weer gebeuren.
Groeten en prettige avond, Clu

[eXtreaL]

Het klopt inderdaad dat je om Safari versies lager dan 9 te ondersteunen de -webkit- prefix benodigd is. Je noemt het een hack, maar eigenlijk is het ondersteuning voor een specificatie die op dat moment mogelijk geïmplementeerd zou gaan worden.

Om deze reden heb ik je in mijn vorige bericht ook gewezen op Autoprefixer. Wat je hiermee kunt doen is de properties slechts volgens de huidige syntax schrijven, waarna Autoprefixer de juiste vendor prefixes aan de properties toevoegt. Hier een voorbeeld van de output die Autoprefixer geeft: https://autoprefixer.github.io/. Je ziet dus dat als je slechts "display: flex;" schrijft, Autoprefixer automatisch de juiste vendor prefixes toevoegt aan je CSS output.

EDIT: dit is trouwens een hele goede bron als je ergens niet uitkomt met Flexbox, staan erg veel handige voorbeelden op. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[ Voor 11% gewijzigd door eXtreaL op 01-10-2015 22:03 ]

[Verwijderd]

Hallo eXtreaL

Heel prima, dank voor je suggestie = prefix
( wil graag meepraten, maar dan moet er niet te veel gestunteld worden, nietwaar

De Autoprefixer lijkt nog een beetje te hoog gegrepen voor deze doe-het-zelver, ik snap dus nog niet hoe te implementeren, ondanks https://css-tricks.com/autoprefixer/

Maar ik heb het bewaard, en wil er in de toekomst zeker nog eens naar kijken.
Typisch zo'n los draadje waar ik wel erg nieuwsgierig naar ben.

Hartelijk dank nogmaals

[TheNephilim]

Verwijderd schreef op donderdag 01 oktober 2015 @ 19:41:
Hallo eXtreaL
Dank voor je snelle reactie.

Het script komt van http://codepen.io/anon/pen/ftrdA

inderdaad gewijzigd
.flex-container { flex-flow: row wrap; }

Toch heeft deze in mijn Safari = v.5.1.7 in Windows 7
deze hack nodig:
.flex-container { display:flex; display:-webkit-box; }

Heel vreemd, maar de volgende heeft geen hack nodig:
.flex-box { display:flex; }

Maar heeft het dan toch geen voorkeur om zoveel mogelijk crossbrowser te werken - er zijn nog steeds bezoekers met oudere versies ?

In ieder geval hartelijk, hartelijk dank zover
- overigens, op codepen doet 'ie het nu wel, maar in m'n eigen website is het nog even zoeken wat er aan schort

gr Clu

Safari op Windows? Heeft het nog zin om die geïnstalleerd te hebben? Hij word niet meer bijgewerkt voor Windows en dus heb je er ook niks aan qua checken van browsercompatibiliteit.

[Verwijderd]

Safari op Windows?
[/quote]

Als een pagina het in deze 'ouwe' Safari naar behoren doet, denk ik er vanuit te kunnen gaan dat het ook OK is op de iPad.
Heb geen iPad maar behelp me met een preview via F12 in Chrome

[Caelorum]

Die preview met Chrome komt meer in de buurt dan de antieke Safari voor Windows. De laatste versie voor Windows is alweer drie jaar oud en niet te vergelijken met wat er op de iPad draait.
Nee die Safari voor Windows moet je gewoon links laten liggen. Als je wilt weten hoe het draait op een iPad zonder iPad te kopen kan je van verschillende diensten gebruik maken, zoals browserstack.

[ Voor 34% gewijzigd door Caelorum op 05-10-2015 22:52 ]