Flex Img Wrap

flex-img-wrap.markdown

Flex Img Wrap

A Pen by Marc Ochsner on CodePen.

License.

index.html

<div class="flex1">
  <div class="img">
    <img src="http://place-hold.it/432x324"/>
  </div>
  <div class="img">
    <img src="http://place-hold.it/432x324"/>
  </div>
  <div class="data">
    <div class="category">    
      <div class="title"><h3>A title</h3></div>
      <div class="box">length: 3.0 cm</div>      
      <div class="box">width: 3.0 cm</div>
      <div class="box">depth: 3.0 cm</div>
      <div class="box">surface area: 3.0 cm^2</div>
      <div class="box">volume: 3.0 cm^3</div>
    </div>
    <div class="category">    
      <div class="title"><h3>A title</h3></div>
      <div class="box">length: 3.0 cm</div>      
      <div class="box">width: 3.0 cm</div>
      <div class="box">depth: 3.0 cm</div>
      <div class="box">surface area: 3.0 cm^2</div>
      <div class="box">volume: 3.0 cm^3</div>
    </div>


  </>
</div>

style.scss

.flex1 {
  border: solid purple;
  display: flex; // same as flex
  flex-flow: row wrap;
  // justify-content: flex-start; // default: flex-start
  // align-content: normal; // default: normal
  align-items: flex-start;
  height: 50vh;
  width: 80vw;
  .img {
    height:100%;
    border: double;
    border-color: red;
    display:flex;
    align-items: flex-start;
    
    img { 
      object-fit: contain;
      border: 1px solid #555;
    }
  // }
  .data {
    align-self: flex-end;
    border: solid green;
    display: flex;
    flex-flow: row wrap;
    flex: 0 2 auto; // default: grow 0, shrink 1, basis auto
    .category { 
      border: dotted pink;
      // flex: 0 2 auto; // 0 1 auto
      // display: flex
      
      // display: flex;
      // align-items: flex-start;
      // flex-flow: row wrap;
      // border: solid orange;
      // // display: flex;
      // .box {
      //   // display: flex;
      // }
    }
    .category2 {
      display: flex;
    }
  }
}