it-swarm.com.de

Flexbox wird bei der Browser-Größenänderung nicht umbrochen

Ich versuche, meine Flexbox auf mobilen Geräten und der Fenstergröße anzupassen.

Für mein Leben habe ich keine Ahnung, warum es nicht funktioniert. Die Flexbox sollte die Größe ändern und in der nächsten Zeile umlaufen, wenn der Browser verkleinert wird.

Demo

here

CSS/HTML

#flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  width: 1000px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

#left-zone {
  background: #fff;
  height: 75%;
  flex-grow: 0;
  display: flex;
  width: 350px;
  align-items: center;
  justify-content: left;
  min-width: 0;
}

#left-zone .list {
  display: flex;
  list-style: none;
  align-content: stretch;
  flex-direction: column;
  /* flex-grow: 1; */
  flex: 1 1 calc(33.33% - 20px);
  margin: 0;
  padding: 0;
}

.item input {
  display: none;
}

label {
  display: block;
  opacity: 0.5;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

label:hover {
  opacity: 0.75;
  cursor: pointer;
}

/* content slides in on the right side of the flexbox */
.content {
  position: absolute;
  left: 350px;
  top: -400px;
  width: 650px;
  height: 400px;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: slideout;
  animation-name: slideout;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* p tag content in the right side of the flexbox */
.content p {
  max-width: 50%;
  text-align: center;
}

#middle-border {
  background-color: #eee;
  height: 75%;
  flex-grow: 1;
  max-width: 2px;
  z-index: 0;
}

/* Right side of flexbox where the content slides in */
#right-zone {
  background-color: #ff000070;
  height: 100%;
  flex-grow: 3;
}




/* ==========Styles only related to the animation slidein: IGNORE============*/
@-webkit-keyframes slidein {
  0% {
    top: -400px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes slidein {
  0% {
    top: -400px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@-webkit-keyframes slideout {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: -400px;
    opacity: 0;
  }
}
@keyframes slideout {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: -400px;
    opacity: 0;
  }
}
input:checked ~ .content {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body {
  background: #eee;
  font-family: Tahoma;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta charset="utf-8">
  <title>Flex Test</title>
</head>
<body>
  <div id="flex-container">
    <div id="left-zone">
      <ul class="list">
        <li class="item">
          <input type="radio" id="radio_strawberries" name="basic_carousel" checked="checked" />
          <label class="label_strawberry" for="radio_strawberries">strawberry</label>
          <div class="content content_strawberry">
            <h1>strawberry</h1>
            <p>The garden strawberry... blah blah</p>
          </div>
        </li>
        <li class="item">
          <input type="radio" id="radio_banana" name="basic_carousel"/>
          <label class="label_banana" for="radio_banana">banana</label>
          <div class="content content_banana">
            <h1>banana</h1>
            <p>A banana... blah blah</p>
          </div>
        </li>
        <li class="item">
          <input type="radio" id="radio_Apple" name="basic_carousel"/>
          <label class="label_Apple" for="radio_Apple">Apple</label>
          <div class="content content_Apple">
            <h1>Apple</h1>
            <p>The Apple... blah blah</p>
          </div>
        </li>
        <li class="item">
          <input type="radio" id="radio_orange" name="basic_carousel"/>
          <label class="label_orange" for="radio_orange">orange</label>
          <div class="content content_orange">
            <h1>orange</h1>
            <p>The orange... blah blah</p>
          </div>
        </li>
      </ul>
    </div>
    <div id="middle-border"></div>
    <div id="right-zone"></div>
  </div>
</body>

</html>

Ich möchte die rechte Seite unter der linken Seite einwickeln, da die Auflösung des Browserfensters geringer wird, aber ich scheine es einfach nicht herauszufinden. 

Der Inhalt auf der rechten Seite der Flexbox wird ausgeblendet und wird mithilfe von CSS-Keyframes einfach von oben eingeblendet. Ich vermute, dass dies ein Problem sein kann, da der Inhalt div auf der rechten Seite der Flexbox im Wesentlichen leer ist

CodePen

ich freue mich über jede Hilfe

7
jpisty

Michael_B erklärt das Problem hier sehr gut. 

Neben seiner Antwort würde ich nur sagen, dass Sie auch mit einem absoluten .content arbeiten, also ist Ihre Flexbox keine "normale" Flexbox.

Übrigens, ich habe versucht, mit Ihrem HTML-Code dafür verantwortlich zu machen. Der Trick besteht darin, alle Ihre feste Breite zu entfernen.

Bootstrap ist ein möglicher Weg, aber wenn Sie Ihre Arbeit bereits begonnen haben, können Sie sie nur mit CSS-Eigenschaften und ohne Javascript beenden (wie Sie es tun): CSS verfügt über alle erforderlichen Berechtigungsnachweise, ohne Framework. Das ist was ich denke.

Ich habe versucht, Ihren HTML-Code nicht zu ändern. Ich habe nur <div id="middle-border"></div> 'entfernt, da Sie mit Hilfe der #left-zone .list-Eigenschaft einen rechten Rand in Ihrem box-sizing erstellen können ... und border-right natürlich;)

In Ihrem CSS habe ich Ihre Animation mit einer einfacheren Deckkraft und translateY-Überblendung geändert (Sie müssen zu Punkt A zu Punkt B ohne eine weitere Animation gehen, so dass ein Übergang ausreicht, denke ich). Nun, es ist kein Fehler bei der Verwendung einer Animation. Ich denke, es ist nur einfacher, einen Übergang für diese Arbeit zu verwenden.

Ein weiterer wichtiger Aspekt ist die Verwendung eines CSS, das eine bessere Browserübergreifende Konsistenz im Standardstil von HTML-Elementen bietet. Dafür habe ich "normalize.css" verwendet: https://necolas.github.io/normalize.css/ )

Dies ist der Code, hoffe es hilft:

 body {
    background: #eee;
    font-family: Tahoma;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }


  #flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%; /* no fixed width */
 
    min-height: 400px; /*add min-height for 1 column layout */
    height: 100vh;
    max-width: 1000px;
    
    margin: auto;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    overflow: hidden;

    flex-direction: column;
    position: relative;
  }

  #left-zone {
    height: 50%;
    flex: 0 0 auto;
    display: flex;
    width: 100%;

  }

  #left-zone .list {
    display: flex;
    list-style: none;
    align-content: stretch;
    flex-direction: column;
    flex: 1 1 auto;
    margin: auto;
    padding: 0;
    box-sizing: border-box;
    
  }

  .item input {
    display: none;
  }

  label {
    display: block;
    opacity: 0.5;
    height: 50px;
    text-align: center;
    line-height: 50px;

    position: relative;
  }

  label:hover {
    opacity: 0.75;
    cursor: pointer;
  }

  /* content slides in on the right side of the flexbox */
  .content {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(100%);

    height: 50%;
    width: 100%;
    
    transition: 0.5s ease-out;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: none;
  }

  /* p tag content in the right side of the flexbox */

  .content p {
    max-width: 50%;
    text-align: center;
  }

  /* Right side of flexbox where the content slides in */
  #right-zone {
    background-color: #ff8f8f;
    width: 100%;
    flex: 1 0 auto;
    height: 50%;
  }

  input:checked ~ .content {
    transform: translateY(0%);
    opacity: 1;
  }

  @media (min-width:480px){
    #flex-container {
      flex-direction: row;
      min-height: auto;
      height: 400px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    #left-zone .list {
      border-right: 2px solid #cccccc;
    }

    .content {
        width: 65%; /* no fixed width */
        height: 100%;
        pointer-events: auto;
        transform: translateY(-100%);
    }

    #left-zone {
        width: 35%; /* no fixed width */
    }

    #right-zone {
      height: 100%;
      width: 65%; /* no fixed width */
    }
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet">
<div id="flex-container">
    <div id="left-zone">
      <ul class="list">
        <li class="item">
          <input type="radio" id="radio_strawberries" name="basic_carousel" checked="checked" />
          <label class="label_strawberry" for="radio_strawberries">strawberry</label>
          <div class="content content_strawberry">
              <h1>strawberry</h1>
              <p>The garden strawberry... blah blah</p>
          </div>
        </li>
        <li class="item">
          <input type="radio" id="radio_banana" name="basic_carousel"/>
          <label class="label_banana" for="radio_banana">banana</label>
          <div class="content content_banana">
            <h1>banana</h1>
            <p>A banana... blah blah</p>
          </div>
        </li>
        <li class="item">
          <input type="radio" id="radio_Apple" name="basic_carousel"/>
          <label class="label_Apple" for="radio_Apple">Apple</label>
          <div class="content content_Apple">
            <h1>Apple</h1>
            <p>The Apple... blah blah</p>
          </div>
        </li>
        <li class="item">
          <input type="radio" id="radio_orange" name="basic_carousel"/>
          <label class="label_orange" for="radio_orange">orange</label>
          <div class="content content_orange">
            <h1>orange</h1>
            <p>The orange... blah blah</p>
          </div>
        </li>
      </ul>
    </div>
    <div id="right-zone"></div>
  </div>

3
ReSedano

Nun, nach einiger Zeit habe ich den nächsten (ansprechenden) Ansatz mit Bootstrap 4 und Animate.css plugin als Ersatz für Ihre Animationen . Ich hoffe du genießt es!

$(document).ready(function()
{
    $("input[type='radio']").click(function()
    {
        $("#right-zone .animated").addClass("d-none");
        var target = $(this).attr("target-div");
        $("." + target).toggleClass("d-none");
    });
});
#flex-container {
    min-height: 50vh;
    margin-top: 25vh;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* On XS screen devices, use all the available height */

@media(max-width:576px)
{
    #flex-container {
        min-height: 100vh;
        margin-top: 0vh;
    }
}

#right-zone {
    background-color: rgba(255,0,0,0.6);
}

.item input {
    display: none;
}

label {
    opacity: 0.5;
    height: 50px;
    line-height: 50px;
}

label:hover {
    opacity: 0.75;
    cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>

<div class="container-fluid">
<div class="row w-75 mx-auto" id="flex-container">

  <div class="col-sm-4 bg-light" id="left-zone">
  <div class="d-flex h-100 align-items-center justify-content-center">
  <div class="items-container text-center">

    <div class="item">
      <input type="radio" id="radio_strawberries" target-div="content_strawberry"/>
      <label class="label_strawberry" for="radio_strawberries">strawberry</label>
    </div>

    <div class="item">
      <input type="radio" id="radio_banana" target-div="content_banana"/>
      <label class="label_banana" for="radio_banana">banana</label>
    </div>

    <div class="item">
      <input type="radio" id="radio_Apple" target-div="content_Apple"/>
      <label class="label_Apple" for="radio_Apple">Apple</label>
    </div>

    <div class="item">
      <input type="radio" id="radio_orange" target-div="content_orange"/>
      <label class="label_orange" for="radio_orange">orange</label>
    </div>

  </div>
  </div>
  </div>
  
  <div class="col-sm-8" id="right-zone">
  <div class="d-flex h-100 align-items-center justify-content-center text-center">

    <div class="content_strawberry animated fadeInDown">
      <h1>strawberry</h1>
      <p>The garden strawberry... blah blah</p>
    </div>

    <div class="content_banana d-none animated fadeInDown">
      <h1>banana</h1>
      <p>A banana... blah blah</p>
    </div>

    <div class="content_Apple d-none animated fadeInDown">
      <h1>Apple</h1>
      <p>The Apple... blah blah</p>
    </div>

    <div class="content_orange d-none animated fadeInDown">
      <h1>orange</h1>
      <p>The orange... blah blah</p>
    </div>

  </div>
  </div>

</div>
</div>

2
Shidersz

Flex Artikel in ihre Behälter einwickeln. Klingt offensichtlich, aber es ist das Schlüsselkonzept, das hier verstanden werden muss.

Wenn sich die Flex-Elemente in einem Container befinden, dessen Breite an die Breite des Viewports gebunden ist - das wäre normalerweise ein Container, der width: 100% des body-Elements nimmt -, würden die Flex-Elemente in Relation zur Breite des Viewports umgebrochen. Ein Ansichtsfenster zur Größenänderung hätte einen direkten Einfluss auf den Flex-Container, was sich direkt auf die Flex-Elemente auswirken würde.

In Ihrem Fall ist der Flex-Container jedoch nicht an die Breite des Viewports gebunden. Es hat eine andere Breite:

#flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
}

In diesem Fall werden die Flex-Elemente in Bezug auf den 1000px breiten Bereich und nicht auf den Viewport-Bereich ausgelegt. Da die Elemente und das Ansichtsfenster keine Zuordnung haben, haben die Elemente keinen Grund, etwas zu tun, wenn die Größe des Ansichtsfensters geändert wird.

2
Michael_B

Das liegt daran, dass Sie die Flex-Wrap-Eigenschaft an das falsche Element übergeben. Die Gesamtheit von #left-zone ist ein untergeordnetes Element des #flex-container-Elements. Sie müssen die Platzierungsreihenfolge der divs ändern, sodass sich die Liste in einem div befindet und der Inhaltsabschnitt ein anderes div ist. Dann wird der Inhalt umgebrochen.

0
Quasar