So schichten Sie Formen in Flexbox

Ich verwende derzeit this solution für modifizierte für meine Verwendung case specifically here. Als ich das Design sah, dachte ich mir, dass ich zwei Divs in einem Flexbox-Container machen würde, das Div auf der rechten Seite wäre z-indexiert über dem auf der rechten Seite. So etwas wie ...So schichten Sie Formen in Flexbox

.container { 
 
     display: flex; 
 
     width: 200px; 
 
     flex-direction: row; 
 
    } 
 

 
    .left-side { 
 
     flex: 4; 
 
     background-color: red; 
 
    } 
 

 
    .right-side { 
 
     flex: 1; 
 
     background-color: orange; 
 
     z-index: 3; 
 
     border-style: 2px solid white; 
 
     border-radius: 50%; 
 
    }

<div class="container"> 
 
     <div class="left-side"> 
 
     View Cart 
 
     </div> 
 
     <div class="right-side"> 
 
     3 
 
     </div> 
 
    </div>

Dies gilt nicht meine Elemente übereinander überhaupt Schicht, weil sie nebeneinander positioniert sind.

Wie kann ich ein mehrschichtiges Layout verwenden, während ich immer noch die Vorteile der netten Positionierung ausnutze, die flexbox ohne die relative Position/absolute Position der relativen Lösung erlaubt, die ich zusammen hacke? Oder ist diese Position absolut/relativ der richtige Weg, um mein Problem zu lösen?

Quelle

2017-03-14 aisflat439

ist es das, was Sie zu tun versuchen? http://codepen.io/anon/pen/YZxLNj –

Mein Vorschlag http://codepen.io/anon/pen/GWvdNP – DevQuayle

Ja, das ist sehr nahe am Endziel @GCyrillus, Ihre Lösung ist eine Verbesserung gegenüber meiner als Gut. – aisflat439

Sie können den roten Hintergrund auf den Behälter gelten, und verwenden Sie transform: translateX(50%) den orangefarbenen Kreis zur Hälfte außerhalb des Behälters zu bewegen, um diesen Effekt abziehen.

.container { 
 
    display: flex; 
 
    width: 200px; 
 
    flex-direction: row; 
 
    background: red; 
 
    position: relative; 
 
    color: white; 
 
} 
 

 
.container:before { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    content: ''; 
 
} 
 

 
.container:before, 
 
.count { 
 
    border: 2px solid white; 
 
} 
 

 
.left-side { 
 
    flex-grow: 1; 
 
} 
 

 
.center { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.count { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    border-radius: 50%; 
 
    transform: translateX(50%); 
 
}

<div class="container"> 
 
    <div class="left-side center"> 
 
    View Cart 
 
    </div> 
 
    <div class="right-side"> 
 
    <div class="count center">3</div> 
 
    </div> 
 
</div>

Quelle

2017-03-14 21:21:49

Ich verbrachte einige mit jeder Lösung. Alle veröffentlichten Lösungen sind gut. Ich habe das ausgewählt, weil ich denke, dass die Transformation am sinnvollsten ist. – aisflat439

Negative Margen

können Sie negative Margen, um das Problem zu lösen, ohne absolute/relative Lösung unter Verwendung von Position.

.container { 
 
     display: flex; 
 
     width: 200px; 
 
     flex-direction: row; 
 
    } 
 

 
    .left-side { 
 
     flex: 4; 
 
     background-color: red; 
 
    } 
 

 
    .right-side { 
 
     flex: 1; 
 
     background-color: orange; 
 
     z-index: 3; 
 
     border-style: 2px solid white; 
 
     border-radius: 50%; 
 
     margin-left: -60px; 
 
     text-align: center; 
 
    }

<div class="container"> 
 
     <div class="left-side"> 
 
     View Cart 
 
     </div> 
 
     <div class="right-side"> 
 
     3 
 
     </div> 
 
    </div>

Quelle

2017-03-14 21:18:32

So schichten Sie Formen in Flexbox

Antwort

Verwandte Themen