CODEWITHSUNDEEP
cssflexbox
Erik
Erik

Reputation: 5791

Using Flex - change two child div's to stack on each other with 100% width

I want the two child div's to justify to the left and stack on each other 100% width at a certain browser media width of 1000px.

I have two child div's in a parent that appear correctly:

.relationFRAME {
 background: #151515;
color: #FFF;
display: flex;
}

.relationLEFT {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.relationRIGHT {
float: right;
flex: 1;
}

I want the two child div's to justify to the left and stack on each other 100% width at a certain browser media width of 1000px.

Can someone help me understand the change in the CSS to do this?

Upvotes: 0

Views: 1488

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105853

You can set a min-width to the child and allow wrapping on the parent :

.relationFRAME {
  background: #151515;
  display: flex;
  flex-wrap:wrap;/* will stack element if width becomes too small */
}

.relationFRAME > div {
flex:1;
min-width:580px;/* whatever value you want to set as a break point */


/* demo use only */
border:1px solid ;
color:white;
margin:2px;
padding:0.25em;


}
<div class="relationFRAME">
  <div class="relationLEFT"> Play me full page mode and resize window to check out my behavior </div>
  <div class="relationRIGHT">b</div>
</div>

Upvotes: 0

Furkan Poyraz
Furkan Poyraz

Reputation: 692

With @media you can change the styling at an certain width and flex-direction: column; to stack the child elements on top of each other. Here's an example:

.relationFRAME {
  background: #151515;
  display: flex;
}

.relationLEFT {
  background: green;
  flex: 1;
}

.relationRIGHT {
  background: orange;
  flex: 1;
}

@media only screen and (max-width: 1000px) {
  .relationFRAME {
    flex-direction: column;
  }
}
<div class="relationFRAME">
  <div class="relationLEFT">a</div>
  <div class="relationRIGHT">b</div>
</div>

Upvotes: 2

Related Questions