Fluid Boxes – Ausrichtung, Auffüllung und Optional

Im heu­ti­gen Arti­kel stel­le ich Ihnen die wei­te­ren Fluid-Box-Einstellungen „Aus­rich­tung“, „Auf­fül­lung“ sowie „Optio­nal“ vor, über die Sie Ihr respon­si­ves Lay­out ver­fei­nern sowie auch für klei­ne­re Dis­plays opti­mal auf­be­rei­ten können.

 

 

Ausrichtung

Mit der Eigen­schaft Aus­rich­tung kön­nen Sie fest­le­gen, wie sich Objek­te oder Unter-Fluid-Boxes inner­halb einer Flu­id Box anordnen.

Beach­ten Sie: Wie die fol­gen­den Screen­shots zei­gen, müs­sen Sie je nach Aus­rich­tungs­ein­stel­lung sowie auch abhän­gig von den Objek­ten einer Flu­id Box die Opti­on Bild stre­cken deak­ti­vie­ren, um das gewünsch­te Ergeb­nis zu erzielen.

Fluss: Ver­ti­kal / Aus­rich­tung: Horizontal
Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den links ausgerichtet

Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den zen­triert ausgerichtet

Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den rechts ausgerichtet

 

Fluss: Ver­ti­kal / Aus­rich­tung: Vertikal
Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den oben ausgerichtet

Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den zen­triert ausgerichtet

Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den unten ausgerichtet

Fügt einen Zwi­schen­raum zwi­schen Objekten/Unter-FBs inner­halb einer Flu­id Box ein (kein Abstand zum Rand der Flu­id Box)

Fügt einen Abstand um Objekte/Unter-FBs inner­halb einer Flu­id Box ein (auch zum Rand der Flu­id Box)

 

Fluss: Hori­zon­tal / Aus­rich­tung: Horizontal
Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den links ausgerichtet

Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den zen­triert ausgerichtet

Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den rechts ausgerichtet

Fügt einen Zwi­schen­raum zwi­schen Objekten/Unter-FBs inner­halb einer Flu­id Box ein (kein Abstand zum Rand der Flu­id Box)

Fügt einen Abstand um Objekte/Unter-FBs inner­halb einer Flu­id Box ein (auch zum Rand der Flu­id Box)

 

Fluss: Hori­zon­tal / Aus­rich­tung: Vertikal
Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den oben ausgerichtet

Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den zen­triert ausgerichtet

Objekte/Unter-FBs inner­halb einer Flu­id Box wer­den unten ausgerichtet

 

Auffüllung

Mit­hil­fe der hori­zon­ta­len und ver­ti­ka­len Auf­fül­lung kön­nen Sie für eine Flu­id Box Innen­ab­stän­de defi­nie­ren. Die­se gel­ten dann für jede dar­un­ter­lie­gen­de Flu­id Box bzw. jedes Objekt.

Bei­spiel: Sie plat­zie­ren zwei Objek­te in einer Flu­id Box und möch­ten anschlie­ßend einen Abstand von 30 px zwi­schen den Objek­ten und dem Rand der Flu­id Box ein­fü­gen. Mar­kie­ren Sie dazu die Flu­id Box und geben Sie unter hori­zon­ta­ler und ver­ti­ka­ler Auf­fül­lung den Wert 30 px ein. Zwi­schen bei­den Objek­ten ergibt sich in der Mit­te nun ein Abstand von 60 px, da sich die Abstän­de addieren.

Auf­fül­lung der Unter-FB

Wenn Sie kei­nen Abstand zwi­schen den bei­den Objek­ten, aber zum Rand der Flu­id Box wün­schen, fügen Sie eine Unter-FB ein, in die Sie die bei­den Objek­te ver­schie­ben. Mar­kie­ren Sie anschlie­ßend die Ober-FB und geben Sie unter hori­zon­ta­ler und ver­ti­ka­ler Auf­fül­lung den gewünsch­ten Wert für die Brei­te des Ran­des ein.

Auf­fül­lung der Ober-FB

 

Optional

Mit­tels der Ein­stel­lung Optio­nal kön­nen Sie sowohl Objek­te als auch gan­ze Flu­id Boxes in klei­ne­ren Ansich­ten aus­blen­den. Dies ist z. B. ide­al, um Schmuck­ele­men­te, die nur in der Desktop-Ansicht sicht­bar sein sol­len, in der mobi­len Ansicht nicht anzu­zei­gen. Sie fin­den die­se Ein­stel­lung in den Eigen­schaf­ten eines Objek­tes / einer Flu­id Box.

Beach­ten Sie: Damit die Ein­stel­lung Optio­nal greift, muss in den Eigen­schaf­ten der über­ge­ord­ne­ten Flu­id Box (in der sich das Objekt bzw. die Flu­id Box befin­det) die Ein­stel­lung In Zei­le kom­pri­mie­ren bzw. In Spal­te kom­pri­mie­ren aus­ge­wählt sein.

 

Fra­gen und Feed­back zu unse­ren Blog­ar­ti­keln sind wie immer sehr willkommen.

Viel Spaß beim Captivaten!

Ihr Martin Uhrig

 

PS: Wenn Sie immer top infor­miert blei­ben wol­len, kann ich Ihnen mei­nen News­let­ter sehr emp­feh­len, der ein­mal pro Monat erscheint. Abon­nie­ren Sie ihn ein­fach hier!

 

Weiterführende Blogartikel:

Klas­si­sche vs. respon­si­ve Projekte

Fluid-Box-Modus: Aktu­el­le Einschränkungen

Flu­id Boxes – Der Work­flow in der Praxis

Flu­id Boxes – Fluss und Umbrechen

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht.