How to place the only flex-item as if there's next one?

user_8826100 0
Viewed 44

I have a flexbox row, which can have one or two items, but when there's just one, I need to align it as if its sibling is present. I tried playing around with flex-basis, flex-shrink, flex-grow, but couldn't find a solution. Is there a way to do it without conditional rendering (styling), by means of CSS?

In the snippet below, I need to make "open..." string in the 2nd row aligned exactly the same as in the 1st row.

.PointCard_pointCard__1WRM8 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 0 0;
  gap: 0 0;
  grid-template-areas: "header header header header header header" "content content content content content content";
}

.PointCard_header__2acWz {
  grid-area: header;
}

.PointCardHeader_pointCardHeader__pm6oc {
  --background-color: #E6F7FF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color);
  padding: 17px 30px;
}

.PointCardHeader_pointState__2Bu6n {
  display: flex;
  gap: 14px;
}

.PointCardHeader_cashboxTime__1pfyW {
  display: flex;
  gap: 36px;
}

.PointCardHeader_cashboxTimeLabel__3CBmx {
  display: flex;
  align-items: center;
  gap: 14px;
}

.PointCard_content__2tDUJ {
  grid-area: content;
}
<div class="container">
  <div class="PointCard_pointCard__1WRM8" data-testid="point-info">
    <div class="PointCardHeader_pointCardHeader__pm6oc PointCard_header__2acWz">
      <div class="PointCardHeader_pointState__2Bu6n">
        <h2 class="PointCardHeader_pointName__WneIP">Point1</h2>
      </div>
      <div class="PointCardHeader_cashboxTime__1pfyW">
        <div class="PointCardHeader_cashboxTimeLabel__3CBmx">opened: <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:27</span></div>
        <div class="PointCardHeader_cashboxTimeLabel__3CBmx">closed: <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:40</span></div>
      </div>
    </div>
    <div class="PointCard_content__2tDUJ">content</div>
  </div>
  <div class="PointCard_pointCard__1WRM8" data-testid="point-info">
    <div class="PointCardHeader_pointCardHeader__pm6oc PointCard_header__2acWz">
      <div class="PointCardHeader_pointState__2Bu6n">
        <h2 class="PointCardHeader_pointName__WneIP">Point2</h2>
      </div>
      <div class="PointCardHeader_cashboxTime__1pfyW">
        <div class="PointCardHeader_cashboxTimeLabel__3CBmx">opened: <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:27</span></div>
      </div>
    </div>
    <div class="PointCard_content__2tDUJ">content</div>
  </div>
</div>

Also, I came up with an idea of using visibility: hidden, but it looks like a bad workaround

flexbox css javascript
4 Answers

When a row isn’t “closed”, it still semantically has a closed attribute, but its value is null. Therefore, semantically I would expect the markup for “closed” to still be there.

Additionally, what you have is a two-dimensional layout. In other words, it’s a grid. If you use a grid layout, you can omit the markup for “closed” and its grid track will still be there.

tl;dr use grid instead of flex because it’s a 2D not 1D layout.

user_23916990

A quick fix could be copying the closed element under open and setting opacity to 0 or visibility to hidden

user_66884510

Easy way to do it might be with HTML. Adding an empty div next to the one you want to be moved over.

so instead of this...

    <div class="PointCardHeader_cashboxTime__1pfyW">
            <div class="PointCardHeader_cashboxTimeLabel__3CBmx">opened: 
            <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:27</span>
            </div>
    </div>

trying this....

    <div class="PointCardHeader_cashboxTime__1pfyW">
            <div class="PointCardHeader_cashboxTimeLabel__3CBmx">opened: 
            <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:27</span>
            </div>
            <div class="borderless-empty">(empty) 
      
            </div>
    </div>
user_152760190

This happens because you don't have a fixed width for your flex container and when one of the items is removed it automatically get smaller and aligned to the right side. If you add a width of character size to your flexbox it should be fine, something similar to this:

.PointCardHeader_cashboxTime__1pfyW {
      width: 30ch;
}
user_52277210
Related