zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout mit zwei Spalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.03.2023, 16:04
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard Layout mit zwei Spalten

Hallo Leute,

Ich habe ein ganz einfaches Layout mit zwei Spalten, welches mit flexBox umgesetzt ist, aber die linke Spalte hat nicht die gewünschte Breite und das verstehe ich überhaupt nicht.

Flexbox 2 columns

Könnte mich da mal jemand aufklären was da los ist, wieso die Speise nicht so breit ist wie in der CSS festgelegt
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.03.2023, 11:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

flex heißt, das ganze ist "flex-ible". Also nicht fix.
Das ist die große Stärke von flexbox: Es passt sich flexibel dem verfügbaren Platz an.

Man kann das Verhalten aber auch ausstellen indem man festlegt ob ein Element größer oder kleiner wird.

Gibst du zB deinem side-Element ein flex-shrink: 0, dann heißt das, dass das Element nicht kleiner werden darf.

Es gibt zusätzlich auch flex-grow property, welches festlegt wie das Element wachsen darf.

Zusätzlich dazu gibt es auch flex-basis property welches die basis-Größe eines flex Elements festlegt.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.03.2023, 16:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Zitat:
Könnte mich da mal jemand aufklären was da los ist, wieso die Speise nicht so breit ist wie in der CSS festgelegt
Da liegt ein Verständnisproblem bei dir vor. Die Spalte wird so breit angezeigt wie du mittels CSS bestimmt hast.

CSS funktioniert aber nicht intuitiv. Man muss lernen was welche Angaben bewirken. Zusätzlich kniffelig wird es mit Prozentangaben.

Bei Flexbox wird die Breite der Spalten nach unterschiedlichen Kriterien abhängig vom Inhalt und vom Leerraum automatisch verteilt. Sachlich ist Flexbox eine sogenannte Leerraumverteilung.

Nach dieser automatischen Verteilung sind die Spalten unterschiedlich breit, bei zwei Spalten eine zum Beispiel 350px und die daneben 780px. Jede dieser Spalten ist für sich aber wiederum 100% breit. Wenn du für die linke Spalte bei der Breite (width) nun 33,33% angibst ist die Breite nur noch 33,33% von 350px, also ungefähr 116px.

Du willst offensichtlich die linke Spalte 33,33% und die rechte Spalte 66,66% breit haben. Dazu ist CSS-Grid (display: grid) mit der neuen Einheit fr besser geeignet.

Dazu solltest du die Anweisungen "display: flex" und "width" entfernen. In die Klasse "flexbox" trägst du dann zwei Zeilen ein:

Code:
display: grid;
grid-template-columns: 1fr 2fr;
Dadurch ist das Verhältnis der beiden Spalten immer 1 zu 2.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.03.2023, 17:02
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank die beiden für eure detaillierten Informationen.

Da habe ich wohl bisher einiges falsch verstanden.

Wie mache ich es am besten, wenn ich ein Layout mit zwei Spalten haben möchte, die beide zusammen eine Breite von 100 % haben und die linke Spalte eine feste Breite von zum Beispiel 320 Pixel haben soll???
Mit Zitat antworten
  #5 (permalink)  
Alt 07.03.2023, 17:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Indem du bei CSS-Grid die Breiten anpasst:

Code:
display: grid;
grid-template-columns: 320px 1fr;
Die linke Spalte wird 320px breit und die rechte Spalte schnappt sich den restlichen zur Verfügung stehenden Platz.
Mit Zitat antworten
  #6 (permalink)  
Alt 07.03.2023, 17:48
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Tipp!
Warum mir jetzt nicht sicher, ob das mit Grid funktioniert oder nicht und wenn ja wie.
Kann das ganze aktuell nicht ausprobieren, aber morgen oder spätestens übermorgen sollte es möglich sein.
Dann kann man die beiden Spalten bestimmt auch durch eine Lücke trennen.
Beispielsweise so, oder?
Code:
    grid-column-gap: 2rem
Mit Zitat antworten
  #7 (permalink)  
Alt 07.03.2023, 17:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Fast.

Code:
gap: 2rem
Mit Zitat antworten
  #8 (permalink)  
Alt 07.03.2023, 18:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Fast, es ist
Code:
column-gap: 2rem;
gap ist natürlich auch nicht ganz falsch, dann hat man einen Abstand zwischen rows- und columns Der grid- prefix fällt weg, da das auch für flexbox angewandt werden kann.

Ich bin auch ein Fan von grid, soll es aber nur um eine Zeile, also eindimensional sein, dann kann man auch theoretisch bei flexbox bleiben.

Die Lösung für dein Problem mit Flexbox habe ich schon gepostet, nur für den fall dass es untergangen ist:

flex-shrink: 0; zu deiner column hinzufügen wo du die breite definiert hast. Dann wird sie nicht kleiner.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.03.2023, 18:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine Erläuterung!
Das hilft mir sehr weiter.

Vielen Dank euch beiden für eure Hilfe!
Schönen Tag noch
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.03.2023, 12:25
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Fast, es ist
Code:
column-gap: 2rem;
Der grid- prefix fällt weg, da das auch für flexbox angewandt werden kann.
Wo kann man den nachschauen, bei was der grid- prefix weggelassen werden kann?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Zwei Spalten Layout unterschiedlich scrollbar MrMacStripe CSS 1 09.11.2013 20:00
2 Spalten Layout INKL. 1 Spalten Layout miedsegadse CSS 20 14.04.2011 01:02
Layout: 2 Spalten gleich langer Höhe Boof CSS 1 05.03.2010 11:50
3 Spalten fixed width css layout sharepointkb CSS 9 28.02.2010 21:00
Layout mit bis zu 7 Spalten (DIV) michael-r CSS 3 23.06.2009 19:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:34 Uhr.