0

Here is CSS I have to show some Chevron arrows. It works great. The only problem I have is that when flex-wrap kicks in, the items on the now multiple rows are no longer the same size. I want all items to always have equal size.

Is this possible to achieve?

$itemHeight: 40px;
$arrowModifier: 8;

.statusBar {
    display: flex;
    flex-wrap: wrap;

    &_item {
        display: inline-block;
        background: #fff;
        height: $itemHeight;
        position: relative;
        flex-grow: 1;

        text-align: center;
        line-height: $itemHeight;

        min-width: 110px;

        text-decoration: none;
        color: #333;

        &:hover {
            text-decoration: none;
            color: #333;
        }

        &:before,
        &:after {
            display: inline-block;
            content: "";
            border-style: solid;
            position: absolute;
        }
        &:before {
            left:0;
            border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
            border-color: transparent transparent transparent #f2f2f2;
        }
        &:after {
            right:0;
            border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
            border-color: #f2f2f2 transparent;
        }

    }

}

Here is how the arrows look when flex-wrap has caused one to move to the next row:

enter image description here

Andrei V
  • 7,306
  • 6
  • 44
  • 64
user1283776
  • 19,640
  • 49
  • 136
  • 276
  • Well, `flex-grow: 1;` is kind of in your way... – Andrei V Mar 17 '17 at 08:20
  • The question is, what do you really want to achieve? What happens when you have only 3 `item`s? Should they stretch to fit the entire available space? Should `item`s have a fix width? – Andrei V Mar 17 '17 at 08:24
  • They should stretch to fit the entire space. But if wrap causes them to split into two lines, I want all to still have the same size. – user1283776 Mar 17 '17 at 08:30
  • When should they wrap? If they have a dynamic width, the ones on the last row will never know how wide they should be. If you need items to wrap, you need to specify their widths somehow... – Andrei V Mar 17 '17 at 08:34
  • Thank you Andrei. I guess I tried to do something that was not possible. Thank you for educating me. I am going to choose a different solution. – user1283776 Mar 17 '17 at 08:36

0 Answers0