CODEWITHSUNDEEP
htmlcsshtml5-canvasflexbox
Javaish
Javaish

Reputation: 179

Flex-wrap: wrap - image + wrapper with width 100%

Is it possible to have a wrapper with a width of 100% inside a flex-wrap: wrap; wrapper and only make the flex-wrap: wrap; effect take place if the wrapper with 100% is smaller than x amount of pixels?

Sample site here

.wrapper1 {
  display: flex;
  flex-wrap: wrap;
}

.innerWrapper1 {
  width: 100%;
}

.facebook1 {
  background-color: #3a559f;
  height: 50px;
  width: 100%;
}

.twitter1 {
  background-color: #50abf1;
  height: 50px;
  width: 100%;
}

.google1 {
  background-color: #dc4e41;
  height: 50px;
  width: 100%;
}

.wrapper2 {
  display: flex;
  /*flex-wrap: wrap;*/
}

.innerWrapper2 {
  width: 100%;
}
<h2>Sample 1 flex-wrap wrap</h2>
<div class="wrapper1">
  <img src="http://www.xch07.wi2.sde.dk/sandbox/VIGTIG/LOGIN/loginAdminBackup8/uploads/pernille_8.jpg" alt="some image">
  <div class="innerWrapper1">
    <div class="facebook1"></div>
    <div class="twitter1"></div>
    <div class="google1"></div>
  </div>
</div>
<h2>No flex-wrap wrap but what i want</h2>
<div class="wrapper2">
  <img src="http://www.xch07.wi2.sde.dk/sandbox/VIGTIG/LOGIN/loginAdminBackup8/uploads/pernille_8.jpg" alt="some image">
  <div class="innerWrapper2">
    <div class="facebook1"></div>
    <div class="twitter1"></div>
    <div class="google1"></div>
  </div>
</div>

Upvotes: 1

Views: 458

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105923

min-width can be used as a break point and flex boxes can be imbricated.

Some updates: min-width will wrap element everytime division of 300px is reach.

Ff 3 elements are set to min-width: 300px, one will drop at 900px, next one at 600px, then scrollbar will show once 300px is reached.

Update made to your code

.wrapper1 > img,
.innerWrapper1 {
  flex: 1;
  min-width: 320px;
}

.innerWrapper1 {
  flex-direction: column;
  display: flex;
}

.innerWrapper1 > div {
  flex: 1;
}

.facebook1,
.twitter1,
.google1 {
   min-height: 50px;
}


.wrapper1 {
  display: flex;
  flex-wrap: wrap;
}

.wrapper1 > img,
.innerWrapper1 {
  flex: 1;
  min-width: 320px;
}

.innerWrapper1 {
  flex-direction: column;
  display: flex;
}

.innerWrapper1 > div {
  flex: 1;
}

.facebook1 {
  background-color: #3a559f;
  min-height: 50px;
  width: 100%;
}

.twitter1 {
  background-color: #50abf1;
  min-height: 50px;
  width: 100%;
}

.google1 {
  background-color: #dc4e41;
  min-height: 50px;
  width: 100%;
}

h3 {
  color: #dc4e41;
  background: lightgreen;
  text-shadow: 0 0 1px gold, 0 0 1px gold, 0 0 1px gold, 0 0 1px gold, 0 0 1px gold, 0 0 1px gold, 0 0 2px black;
  text-align: center;
}
<h2>Sample 1 flex-wrap wrap + break point at average 640px via min-width:320px</h2>
<h3>load on full page mode to test behavior/breakpoint</h3>
<div class="wrapper1">
  <img src="http://www.xch07.wi2.sde.dk/sandbox/VIGTIG/LOGIN/loginAdminBackup8/uploads/pernille_8.jpg" alt="some image">
  <div class="innerWrapper1">
    <div class="facebook1"></div>
    <div class="twitter1"></div>
    <div class="google1"></div>
  </div>
</div>
imbricate flexbox involved

codepen to play with, it has been updated from comments below where only img gets min-width

Upvotes: 1

Related Questions