✔ FlexBox konflikte Lösen!

Guri

Guri

Mitglied
Hallo Leute,

habe ein Problem die ich nicht lösen könnete, habe auch durch google versucht, habe keine lösung gefunden, hier sollte eis änlche konflikt sein: http://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome und weiter WebSeiten, könnte trozdem meine Problem nicht Lösen, vieleicht hat mir die richtige SuchBegriff gefehlt,

also, zwischen FlexBox und webspace:nowrap steht ein konflikt, vieleicht ist meine Fehler ich bin kein Profi, und sieht so aus:
HTML: 
<style>
.flexBox {
   background: red;
   margin: 5px;
   padding: 5px;
   
   height: auto;
   max-width: 700px;
   width: 100%;
}
.flexContainer {
   background: green;
   margin: 5px;
   padding: 5px;
   
   display: flex;
   flex-flow: row wrap;
}
.flexItem {
   background: blue;
   margin: 5px;
   padding: 5px;
   
   flex: 0 1 35%;
}
.flexText {
   background: orange;
   margin: 5px;
   padding: 5px;

   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
</style>

<div class="flexBox">
<div class="flexContainer">

<div class="flexItem">
   <div class="flexText">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
   <!-- textBox --></div>
<!-- flexItem --></div>

<div class="flexItem">
   <div class="flexText">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
   <!-- textBox --></div>
<!-- flexItem --></div>

<!-- flexContainer --></div>
<!-- flexBox --></div>

es sieht alls OK ein TextBox links und eine rechts, wie ich hebe mir gewünscht, aber ich will ereichen dass der text nur in eine einzige zeile zeigt mit befehl bzw. css code "white-space: nowrap;", so bald füge ich disen befehl bringt den ganzen Design durcheinander,

die Frage ist, was mache ich hier Falsch oder wie Löse es, ich bin Dankbar für jede Hilfe, ich bedanke mich im Voraus, mfg Guri.
 
Hi,
wie soll denn das funktionieren?
Du vergibst eine maximale Breite und dann sagst Du das nicht umbrochen werden soll. Der Text ist aber durch die Zeichenanzahl länger als maximal 700px.
Warum soll der Text einzeilig sein wenn er doch nicht reinpasst?

Grüße
 
Mit diesem CSS wird dein flexText einzeilig, jedoch wird der Überschuss ausgeblendet.

CSS: 
.flexText {
   background: orange;
   margin: 5px;
   padding: 5px;
   overflow: hidden;
   height:0.8em;
   line-height:1em;
}

white-space: nowrap bedeutet quasi, unterbreche nicht die Zeile, daher zieht sich es in die maximale Länge.
 
Jan-Frederik Stieler hat gesagt.:
Hi,
wie soll denn das funktionieren?
Du vergibst eine maximale Breite und dann sagst Du das nicht umbrochen werden soll. Der Text ist aber durch die Zeichenanzahl länger als maximal 700px.
Warum soll der Text einzeilig sein wenn er doch nicht reinpasst?

Grüße
Zum Vergrößern anklicken....
Hallo, ich glaube hat nicht mit maximal länge von 700px, weil das selbe Layout functioniert mit floats aber ich will mit flex das selbe ereichen, hier mit floats, text ist länger als 700px aber est funktioniert wie es soll, aber nichts in flex:
HTML: 
<style>
.floatBox {
   background: red;
   margin: 5px;
   padding: 5px;
   
   height: auto;
   max-width: 700px;
   width: 100%;
}
.floatLeft {
   background: green;
   margin: 5px;
   padding: 5px;
   
  float: left;
  width: 45%;
 
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.floatRight {
   background: blue;
   margin: 5px;
   padding: 5px;
   
  float: right;
  width: 45%;
 
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.floatClear {
   clear: both;
}
</style>

<div class="floatBox">
<div class="floatLeft">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
</div>
 
<div class="floatRight">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
</div>

<div class="floatClear"></div>
</div>

wie gesagt in Floats funtionier, aber nicgt im Flex, ob ich mache fehler ob ist ein konflikt oder ist nicht möglich, keine ahnung, mfg Guri.
 
Guri hat gesagt.:
Hallo, ich glaube hat nicht mit maximal länge von 700px, weil das selbe Layout functioniert mit floats aber ich will mit flex das selbe ereichen, hier mit floats, text ist länger als 700px aber est funktioniert wie es soll, aber nichts in flex:
HTML: 
<style>
.floatBox {
   background: red;
   margin: 5px;
   padding: 5px;
 
   height: auto;
   max-width: 700px;
   width: 100%;
}
.floatLeft {
   background: green;
   margin: 5px;
   padding: 5px;
 
  float: left;
  width: 45%;
 
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.floatRight {
   background: blue;
   margin: 5px;
   padding: 5px;
 
  float: right;
  width: 45%;
 
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.floatClear {
   clear: both;
}
</style>

<div class="floatBox">
<div class="floatLeft">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
</div>
 
<div class="floatRight">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
</div>

<div class="floatClear"></div>
</div>

wie gesagt in Floats funtionier, aber nicgt im Flex, ob ich mache fehler ob ist ein konflikt oder ist nicht möglich, keine ahnung, mfg Guri.
Zum Vergrößern anklicken....
Hier besteht kein Flexbox-, sondern der Boxmodell-Konflikt (siehe Links unter 4.) ;)
  • HTML
HTML: 
<div class="flexBox">
  <div>...</div>
  <div>...</div>
</div>
  • CSS
CSS: 
* { /* added */
  box-sizing:border-box; /* resolves "flex-boxmodell-conflict */
}
.flexBox, .flexBox div { /* added */
   margin: 5px;
   padding: 5px;  
}
.flexBox {
   display:flex; /* added */   
   background: red;   
   height: auto;
   max-width: 700px;
   width: 100%;
}
.flexBox div:nth-child(1) {
   background: green;
   /*margin: 5px;*/ /* disabled */
   /*padding: 5px;*/ /* disabled */   
  /*float: left;*/ /* disabled */
  width: 50%; /* extended 45% -> 50% */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flexBox div:nth-child(2) {
   background: blue;
   /*margin: 5px;*/ /* disabled */
   /*padding: 5px;*/ /* disabled */     
  /*float: right;*/ /* disabled */
  width: 50%; /* extended 45% -> 50% */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Hallo und vieln Dank, das ist die lösung, aber wo war die Fehler,
ich vermute muss sein innerhalb von flex item und nicht in flex container oder auserhalb, damit white-space: nowrap; funktioniert, aber bin ich mir nicht sicher,
ich bedanke mich für die Hilfe, mfg Guri.
 
Guri hat gesagt.:
aber wo war die Fehler,
Zum Vergrößern anklicken....
SpiceLab hat gesagt.:
Hier besteht kein Flexbox-, sondern der Boxmodell-Konflikt (siehe Links unter 4.) ;)
  1. ...
  2. ...
  3. ...
  4. SelfHTML: https://wiki.selfhtml.org/wiki/CSS/Box-Modell | https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing
[edit]Tipp-Ex[/edit]​
Zum Vergrößern anklicken....
Und Zeile 2 behebt ihn, damit padding, margin & border nicht (gemäß dem Boxmodell) zu width / height addiert werden, was die Vergrößerung der Boxdimension zur Folge hat:
CSS: 
* { /* added */
  box-sizing:border-box; /* resolves "flex-boxmodell-conflict */
}

[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Hallo,

ich vermute die Fehler war nicht nur in BoxModell sonder auch in die breite von flex item,
wenn man mit flex-basis arbeitet statt mit width kommt man in konflikt, laut meine jetzige tests,

mit selben gerust habe die flex: 0 1 35%; ersezt mit width: 35% bzw. width: 50%;, es funktionirt,

ich bedanke mich noch mal für die Hilfe, mfg Guri.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück