3

I am trying to learn Flexbox but having trouble getting what I want.

What I want:

  1. 1 box which will have 2 labels (a number over top a label)

  2. 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>
chobo2
  • 83,322
  • 195
  • 530
  • 832

2 Answers2

4

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Cool!. I am wondering though with the 7 Container. How can I make it so there is no spacing between flex-item and flex-item-2 and make it always the same size as flex-item-2? – chobo2 Mar 02 '16 at 17:31
  • Remove the `margin: 10pt` rule applied to `.flex-item`. That margin is creating space around the 7 Container. Here is a demo with the margin removed: https://jsfiddle.net/8mryt421/2/ – Michael Benjamin Mar 02 '16 at 17:36
  • With my first flex-item. Do I need to wrap that in it's own container as well? As you can see I started
    but stopped there as was not sure if it was needed. also when do I need to put display:flex? I see sometimes it is put in the item and sometimes it is not.     – chobo2 Mar 02 '16 at 19:00
  • The extra `div` container is not necessary. I left it because I thought you had a reason for it. You can remove it and switch to `flex-direction: column`. Here's the revised demo: https://jsfiddle.net/8mryt421/3/ – Michael Benjamin Mar 02 '16 at 19:03
  • Whenever you want to apply flex properties to an element, you need to make the parent a flex container (by applying `display: flex` or `inline-flex`). – Michael Benjamin Mar 02 '16 at 19:04
  • How about the item? Does it need need to say display:flex or just the parent? As in Flex-item2 we add it but not sure if it is needed. – chobo2 Mar 02 '16 at 20:28
  • Only the parent needs `display: flex`. This may be helpful: http://stackoverflow.com/a/34685539/3597276 – Michael Benjamin Mar 02 '16 at 20:40
  • That helped. I have a new layout try but got stuck on one problem. – chobo2 Mar 03 '16 at 16:06
  • @chobo2, you may want to consider posting your edit as a new question. This post is becoming confusing and convoluted, and the answers to your original question may no longer apply. – Michael Benjamin Mar 03 '16 at 16:14
  • Ok, I will post as a new question. – chobo2 Mar 03 '16 at 16:20
  • New questions here: http://stackoverflow.com/questions/35777660/having-some-layout-issues-with-flexbox – chobo2 Mar 03 '16 at 16:27
1

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;
}
Cooper Buckingham
  • 2,503
  • 2
  • 15
  • 23