Skip to content

Instantly share code, notes, and snippets.

@mochsner
Last active July 22, 2021 15:18
Show Gist options
  • Save mochsner/7563f18543557c2da773ac2c325b655c to your computer and use it in GitHub Desktop.
Save mochsner/7563f18543557c2da773ac2c325b655c to your computer and use it in GitHub Desktop.
Flex Img Wrap 2 (Sandbox)
<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>
<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>
</>
</div>
.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: 100vw;
.img {
height:inherit;
width: auto;
border: double;
border-color: red;
display:flex;
align-items: flex-start;
img {
height: 100%;
object-fit: contain;
border: 5px 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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment