How can I align the content in the 2nd column using flexbox?

user_3503520 0
Viewed 49

I would like to align the content in the 2nd column to look like this: desired look

Currently, it is looking like this: current look

I believed it has got to do with my flex-grow, flex-shrink and flex-basis. but I am not sure. Here is the JSFiddle. https://jsfiddle.net/onestaryx/c70yg2t9/2/

.work-meta-row{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: flex-start;
  justify-content: flex-start;
  line-height: 22px;
  flex-wrap: nowrap;
  .work-meta-label{
    font-weight: bold;
    flex-basis: 200px;
  }
  .work-meta-value{
    flex-grow:1;
  }
}
flexbox sass css html
2 Answers

This will do the trick:

      .work-meta-row{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        align-self: flex-start;
        justify-content: flex-start;
        line-height: 22px;
        flex-wrap: nowrap;
        .work-meta-label{
          font-weight: bold;
          flex: 0 0 200px;
        }
      }
user_31320190

flex grow and flex shrink are ON i.e. 1 by default. You need to disable it to match the UI you require. This is how you can do it:

`.work-meta-row {
    display: flex;
    line-height: 22px;

    .work-meta-label {
        font-weight: bold;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100px;
    }
}`

OR use with the flex shorthand like: 

`.work-meta-row {
    display: flex;
    line-height: 22px;

    .work-meta-label {
        font-weight: bold;
        flex: 0 0 100px;
    }
}`
user_12639040
Related