Frage zu Flexbox

[Walther]

Hallo,

wie bekomme ich im folgenden Beispiel zwei Spalten nebeneinander und die Texte jeweils mittig in den Spalten?

> div.zweiSpalten {

  display: flex;
}

> div.item {

  flex: 1 1;
  border: 1px red solid;
}

HTML:

<div class="zweiSpalten">

  <div class="item">links<div/>

  <div class="item">rechts</div>

</div>

[Bertie]

Hallo Walter

z.B. mittels

div.zweiSpalten { 
  display: flex;
  text-align: center;
}

PS: Deine drittletzte Zeile ist mit vorletztem Zeichen falsch geschlossen, richtig wäre: <div class="item">links</div>

Gruss, Bertie

[Walther]

Hallo,

danke für die Tipps.

Wie bekomme ich jetzt die Rahmen direkt an den Text heran, ohne die Länge des Textes zu kennen?

Schönen Sonntag

Walther

[Bertie]

Hallo Walther

Hier ein CodePen zum Spielen.

Wie Gunnar schreibt, sind Textboxen 100% breit, darum die Ergänzung:

.item div {
  display: inline-block;
…

Falls Du zwischen roten und grünen Rahmen Abstand willst, ergänze Margin:

.item div {
  display: inline-block;
  border: 2px solid lightgreen;
  margin: 1rem;
}

Gruss, Bertie

[Rolf B]

Hallo Bertie,

das muss man genauer betrachten. Ein p oder div, das ein Flex-Item ist, ist von Hause aus erstmal so breit wie sein Inhalt. Ist der so lang, dass ein Umbruch nötig wird, dann breitet sich die Box so weit aus wie sie Platz hat oder man ihr Platz lässt.

Das ist jetzt aber erstmal wurscht, wie wissen ja gar nicht, ob meine Tangente überhaupt relevant ist.

Dieses "so breit wie der Inhalt" bedeutet in Antwort auf Walters Frage aber auch, dass ein Rahmen um den Inhalt am Text liegt. Abgesehen von Paddings. Wenn das nicht so ist, wäre eine Onlinedemo von Walters Problemseite hilfreich.

Rolf

[Jonathan Harker]

Hallo Walther,

danke für die Tipps.

div.item {
 flex: 1 1;
 border: 1px red solid;
}

Wie bekomme ich jetzt die Rahmen direkt an den Text heran, ohne die Länge des Textes zu kennen?

Das erinnert mich an Sigrids „Vertikale Ausrichtung“ von vorgestern:

die horizontalen Linien im Beispiel sollten (im Extremfall) von oben/unten an die Schrift anstoßen. Anders ausgedrückt, wie kann ich die Höhe des rot umrandeten Bereichs verringern, wobei dies nicht durch eine exakte Höhenangabe erfolgen soll sondern in Abhängigkeit des Inhalts in dem Bereich.

Vielleicht findest du dort eine Antwort.

Oder – nicht so spezifisch auf die Frage – aber zum grundlegenden Verständnis:

CSS/Tutorials/Boxmodell/Außen- und Innenabstand

Bis bald!
Jonathan

[Rolf B]

Hallo Walther,

Je nachdem, ob die Flex-Inhalte einzeilig oder mehrzeilig sind, möchtest du vielleicht nicht jede Zeile zentrieren, sondern den Textblock als solchen. Dafür kann die Eigenschaft

justify-content:space-around

auf dem Flexbox-Element (nicht auf den Flex-Items) helfen.

justify-content

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Walther,

Je nachdem, ob die Flex-Inhalte einzeilig oder mehrzeilig sind, möchtest du vielleicht nicht jede Zeile zentrieren,

Eine mehrzeilige Textbox ist 100% breit. Wie willst du da den Textblock zentrieren?

sondern den Textblock als solchen. Dafür kann die Eigenschaft

justify-content:space-around

auf dem Flexbox-Element (nicht auf den Flex-Items) helfen.

Inwiefern? Wie willst du dann einzeiligen Text zentrieren?

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

hm, ja, da fehlt wohl noch was. Aber ohne das zu probieren verbrennen ich mir eher die Finger...

Rolf