Experimenting with flexbox has been challenging, but I am close to achieving my desired layout:
- Place a label in the top left of the first container
- Position a label in the top right of the first container
- Align a label in the bottom middle of the first container
- Create a box that displays "number" on top of "Label"
- Add text to the center area
- Display multiple of these containers on the same line (currently they stack)
Current Issues
- Need spacing between the green and blue boxes. Attempted to use "space-around" but it's not achieving the desired effect. Also, looking to make the containers the same size for responsiveness.
- Want the text in the center to be aligned at the center of itself, not just the "p" tag
- Would like to fit more than one container on a line for bigger screens. Unsure if another flex container needs to be wrapped around it.
- Improve spacing between the root containers.
.flex-container {
display: flex;
flex-direction: column;
background-color: grey;
padding: 0;
}
.flex-sub-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex-item-left-corner {
/*background-color: red;*/
margin: 0;
padding: 0;
}
.flex-item-right-corner {
/*background-color: red;*/
margin: 0;
padding: 0;
justify-content: flex-end;
}
.flex-bottom-middle {
/*background-color: red;*/
align-self: center;
margin: 0;
}
.flex-sub-container2 {
/*background-color: yellow;*/
display: flex;
flex-direction: row;
justify-content: center;
}
.flex-sub-item {
background-color: green;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.flex-qty {
margin: 0;
font-size: 28pt;
}
.flex-qty-label {
margin: 0 5pt 5pt 5pt;
}
.flex-center {
background-color: royalblue;
align-self: center;
font-size: 15pt;
flex-grow: 3;
}<div class="flex-container card-panel teal lighten-2">
<div>
<div class="flex-sub-container">
<p class="flex-item-left-corner">Left Top</p>
<p class="flex-item-right-corner">Right Top</p>
</div>
</div>
<div>
<div class="flex-sub-container2">
<div class="flex-sub-item">
<p class="flex-qty">7</p>
<p class="flex-qty-label">Label</p>
</div>
<p class="flex-center">This is my very long center text.</p>
</div>
</div>
<p class="flex-bottom-middle">Bottom Middle</p>
</div>
<div class="flex-container card-panel teal lighten-2">
<div>
<div class="flex-sub-container">
<p class="flex-item-left-corner">Left Top</p>
<p class="flex-item-right-corner">Right Top</p>
</div>
</div>
<div>
<div class="flex-sub-container2">
<div class="flex-sub-item">
<p class="flex-qty">7</p>
<p class="flex-qty-label">Label</p>
</div>
<p class="flex-center">This is my very long center text.</p>
</div>
</div>
<p class="flex-bottom-middle">Bottom Middle</p>
</div>