Frage Navigation Bar einzelne Blöcke verschieben

[Johnny3_3]

Hey zusammen,

Ich bekomme es einfach nicht hin den "search block", wenn man das so nennen kann, nach rechts zu verschieben. Ich habe ein Bild verlinkt auf dem ihr sehen könnt was ich meine. Ich will einfach nur "Suchen" nach rechts verschieben, der Rest soll aber so bleiben.

Danke schon mal ;)

 

[Aaron3219]

Na was hast du denn schon ausprobiert?
Geberell verschiebst du sowas mit margin-left.

Ich gehe aber mal davon aus, dass du die Search-Leiste ganz rechts haben willst. In dem Falle, schau dir Flexboxen an und justify-content: space-between.

 

[basti1012]

aber nicht float:right:
oder positionen verwenden ,damit wollen wir erst gar nicht anfangen

 

[Johnny3_3]

Na was hast du denn schon ausprobiert?
Geberell verschiebst du sowas mit margin-left.

Ich gehe aber mal davon aus, dass du die Search-Leiste ganz rechts haben willst. In dem Falle, schau dir Flexboxen an und justify-content: space-between.

Ich habe mich im Internet ein wenig mit Flexboxen auseinandergesetzt, habe mein Problem allerdings nicht gefixed bekommen. Mein CSS Code für die Search-Leiste lautet: display: flex; justify-content: right;

Mache ich irgendwas falsch? Ich habe mich bis jetzt noch nicht wirklich mit Flexboxen auseinandergesetzt.

 

[MrMurphy]

Hallo

Dazu müssten wir schon das HTML und das CSS kennen. Bilder und aus dem Zusammenhang gerissene Quellcodeschnipsel helfen nicht weiter.

Gruss

MrMurphy

 

[Aaron3219]

Dann hast du dich nicht genug oder richtig mit Flexboxen auseinadner gesetzt.
justify-content: right; existiert nicht!
Also vorweg:
Flexboxen sind quasi die Söhne Zeus' in CSS und HTML.
Sie sind essentiell und sehr, sehr wichtig.
Mit ihnen allein kann man das Layout seiner Website fast vollständig alleine machen.
Es ist also sehr wichtig, dass du Flexboxen verstehst und beherrscht.
W3Schools ist da dein Ansprechpartner.

Stell dir eine Flexbox wirklich wie eine Box vor.
Die Box ist also der Wrapper, in dem die Flex-Items liegen.
Die Flex-Items sind quasi die kleinen Boxen in deiner großen Box.
Diese kannst du nun mit CSS-Attributen verschieben.

Wenn du nun die flex-Items verschiebst, verschiebst du aber nicht automatisch die Gegenstände in deinen Flex-Items. Das ist vor allem bei deinem aktuellen Problem wichtig zu verstehen.
Ich habe dir gesagt, du sollst mit justify-content: space-between arbeiten.
Dieser Attribut muss in deine Flexbox, also das Elternelement deiner zu verschiebenden Elemente, geschrieben werden. Dies verschiebt deine Elemente so, dass zwischen jedem Flex-Item möglichst viel Platz ist.

Was ist also die Lösung:
Du machst 2 Container. Der erste Container werden die Menüpunkte, also die linke Seite. Diese müssen zwingend in einen Container, da sie ansonsten mit als Flex-Items zählen. Du packst sie also in eine Box. Da Bild stellt das 2. Flex-Item dar.

https://jsfiddle.net/Aaron3219/bfsd6yjy/2/

Wichtig ist vielleicht noch align-items: center;
Flexboxen machen es einfach, Elemente sowohl vertikal, als auch horizontal zu zentrieren. Dazu werden die Elemente einfach in eine Flexbox gesetzt, die auf justify-content: center; und align-items: center; gesetzt ist.
Ich hoffe mein Box-Beispiel ist leicht verständlich.

 

[Johnny3_3]

Dann hast du dich nicht genug oder richtig mit Flexboxen auseinadner gesetzt.
justify-content: right; existiert nicht!
Also vorweg:
Flexboxen sind quasi die Söhne Zeus' in CSS und HTML.
Sie sind essentiell und sehr, sehr wichtig.
Mit ihnen allein kann man das Layout seiner Website fast vollständig alleine machen.
Es ist also sehr wichtig, dass du Flexboxen verstehst und beherrscht.
W3Schools ist da dein Ansprechpartner.

Stell dir eine Flexbox wirklich wie eine Box vor.
Die Box ist also der Wrapper, in dem die Flex-Items liegen.
Die Flex-Items sind quasi die kleinen Boxen in deiner großen Box.
Diese kannst du nun mit CSS-Attributen verschieben.

Wenn du nun die flex-Items verschiebst, verschiebst du aber nicht automatisch die Gegenstände in deinen Flex-Items. Das ist vor allem bei deinem aktuellen Problem wichtig zu verstehen.
Ich habe dir gesagt, du sollst mit justify-content: space-between arbeiten.
Dieser Attribut muss in deine Flexbox, also das Elternelement deiner zu verschiebenden Elemente, geschrieben werden. Dies verschiebt deine Elemente so, dass zwischen jedem Flex-Item möglichst viel Platz ist.

Was ist also die Lösung:
Du machst 2 Container. Der erste Container werden die Menüpunkte, also die linke Seite. Diese müssen zwingend in einen Container, da sie ansonsten mit als Flex-Items zählen. Du packst sie also in eine Box. Da Bild stellt das 2. Flex-Item dar.

https://jsfiddle.net/Aaron3219/bfsd6yjy/2/

Wichtig ist vielleicht noch align-items: center;
Flexboxen machen es einfach, Elemente sowohl vertikal, als auch horizontal zu zentrieren. Dazu werden die Elemente einfach in eine Flexbox gesetzt, die auf justify-content: center; und align-items: center; gesetzt ist.
Ich hoffe mein Box-Beispiel ist leicht verständlich.

Danke, dank dem Beispiel habe ich verstanden was du meintest. Habe das Problem gefixed bekommen