How to center and corner flex items in flexbox? - html

Question

I am trying to learn Flexbox but having trouble getting what I want.
What I want:
1 box which will have 2 labels (a number over top a label)
second box will have 4 labels (1 in top left, 1 in top right, 1 in center and 1 in bottom middle)
.flex-container {
display: flex;
background-color: lightgrey;
flex-direction: row;
align-items: stretch;
align-content: stretch;
}
.flex-item {
display: flex;
background-color: cornflowerblue;
margin: 10pt;
}
.flex-item-2 {
display: flex;
background-color: cornflowerblue;
margin: 10pt;
flex: 2 0 0;
}
.flex-qty-container {
font-size: 27pt;
margin: 0;
}
.flex-sub-container {
display: flex;
background-color: yellow;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
flex: 2 0 0;
}
.flex-item-left-corner {
background-color: red;
}
.flex-item-right-corner {
background-color: red;
align-self: flex-end;
font-size: 10pt;
}
.flex-item-center {
background-color: red;
font-size: 12pt;
}
.flex-item-bottom-middle {
background-color: red;
}
<div class="flex-container">
<div class="flex-item">
<div class="">
<p class="flex-qty-container">7</p>
<p class="flex-qty-label">Label</p>
</div>
</div>
<div class="flex-item-2">
<div class="flex-sub-container">
<p class="flex-item-left-corner">top left corner</p>
<p class="flex-item-right-corner">top right corner</p>
<p class="flex-item-center">Center of box</p>
<p class="flex-item-bottom-middle">Bottom middle</p>
</div>
</div>
</div>

Answer 1

1 box which will have 2 labels (a number over top a label)
This part you seem to have done already. I didn't change anything there.
second box will have 4 labels (1 in top left, 1 in top right, 1 in center and 1 in bottom middle)
This layout can be achieved with a properly nested flex container.
In your code, .flex-item-2 has one flex item: .flex-sub-container. This flex item doubles as a flex container and has four flex items (your labels).
<div class="flex-item-2">
<div class="flex-sub-container">
<p class="flex-item-left-corner">top left corner</p>
<p class="flex-item-right-corner">top right corner</p>
<p class="flex-item-center">Center of box</p>
<p class="flex-item-bottom-middle">Bottom middle</p>
</div>
</div>
Instead of having .flex-sub-container wrap all four labels, have it wrap only the first two. Then apply justify-content: space-between and the top left and top right labels are aligned as intended.
<div class="flex-item-2">
<div class="flex-sub-container">
<p class="flex-item-left-corner">top left corner</p>
<p class="flex-item-right-corner">top right corner</p>
</div><!-- END .flex-sub-container -->
<p class="flex-item-center">Center of box</p>
<p class="flex-item-bottom-middle">Bottom middle</p>
</div>
.flex-item-2 {
display: flex;
flex-direction: column;
}
.flex-sub-container {
display: flex;
justify-content: space-between;
}
With .flex-item-2 now a column-direction flex container, the cross axis is now horizontal and the align-self property can be used to center the lower labels.
.flex-item-center {
align-self: center;
}
.flex-item-bottom-middle {
align-self: center;
}
DEMO

Answer 2

I'm not exactly sure how much of your example is specifically needed, so I put some examples in to show you what your options are, and basically solves what you're asking for. More nesting would support more specifics, etc:
https://jsfiddle.net/1z4unyc2/
HTML:
<div class="flex-container">
<div class="flex-item">
<p class="flex-qty-container">7</p>
<p class="flex-qty-label">Label</p>
</div>
<div class="flex-item-2">
<p class="flex-item-left-corner">top left corner</p>
<div class="flex-item">
<p class="flex-item-center">Center of box</p>
<p class="flex-item-bottom-middle">Bottom middle</p>
</div>
<p class="flex-item-right-corner">top right corner</p>
</div>
</div>
CSS:
.flex-container {
display: flex;
background-color: lightgrey;
flex-direction: row;
}
.flex-item {
display: flex;
background-color: cornflowerblue;
margin: 10pt;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-item-2 {
display: flex;
background-color: cornflowerblue;
margin: 10pt;
flex-direction: row;
justify-content: center;
align-items: center;
}
.flex-qty-container {
font-size: 27pt;
}
.flex-item-left-corner {
background-color: red;
align-self: flex-start;
}
.flex-item-right-corner {
background-color: red;
align-self: flex-start;;
font-size: 10pt;
}
.flex-item-center {
background-color: red;
font-size: 12pt;
align-self: center;
}
.flex-item-bottom-middle {
background-color: red;
align-self: flex-end;
}