CODEWITHSUNDEEP
htmlcsslayout
Navigatron
Navigatron

Reputation: 435

HTML - Make inline-block elements act small, but look big

I have a set of inline-block elements (4 of them), all lined up in a neat little row. When the window is re-sized, the elements wrap down to the second line and so on. They don't cause scrollbars on the bottom until the browser reaches the minimum width of the widest one.

This is the "Acting Small" part I'm looking for.

As for "looking big", I'd like elements to appear to take up as much space as possible on their line.

The end result I'm looking for is that when all four are positioned in a vertical row, they are all the same width - namely, the width of the widest element. When there are X elements on one row, Y on another (Maybe Z on a third? I'd like the ability to add more elements as time goes on.), the elements on each row should expand so their row matches the width of the widest row.

In my attempts to achieve this, I've noticed that the shrink-wrap div meant to contain them takes its maximum width once wrapping starts.

Hopefully this can be achieved moderately hack-free, but I'm open to any suggestion.

I'd really like to avoid javascript, but don't hold back if that's what it takes.

A Fiddle.

Code in the fiddle

<style>
.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}

.shrinkwrap {
  display: inline-block;
  margin: 0px 12px;
  border: 1px solid blue;
}

span {
  display: inline-block;
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}
</style>
<!--Master div for centering children-->
<div class="centerParent">
  <p>
    other content
  </p>
  <!-- ShrinkWrap Container -->
  <div class="shrinkwrap">
    <span>MotherDuck</span>
    <span>Duckling The First</span>
    <span>Duck2</span>
    <span>JackInTheBox</span>
  </div>
  <p>
    -- resize left right --
  </p>
</div>

Thank you all very much!

Upvotes: 0

Views: 62

Answers (2)

Asons
Asons

Reputation: 87231

In addition to @Error404's answer, if you want each item to be sized and grow/expand based on their individual content, use flex: 1 0 auto;

.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}
.shrinkwrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 12px;
  border: 1px solid blue;
}
span {
  flex: 1 0 auto;
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}
<!--Master div for centering children-->
<div class="centerParent">
  <p>
    other content
  </p>
  <!-- ShrinkWrap Container -->
  <div class="shrinkwrap">
    <span>MotherDuck</span>
    <span>Duckling The First</span>
    <span>Duck2</span>
    <span>JackInTheBox</span>
  </div>
  <p>
    -- resize left right --
  </p>
</div>

Upvotes: 1

Francisco Romero
Francisco Romero

Reputation: 13199

You can use display: flex on the container and set all the spans with flex: 1 to fill all the available space.

*{
  box-sizing: border-box; /* NEW: the widths will take the borders and paddings on them */
}

.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}

.shrinkwrap {
  display: flex; /* NEW */
  flex-wrap: wrap; /* NEW: It will make the element goes to the next line if it does not have space inside the container. */
  margin: 0px 12px;
  border: 1px solid blue;
}

span {
  flex: 1; /* NEW: It will fill all the available space he can. */
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}
<!--Master div for centering children-->
<div class="centerParent">
  <p>
    other content
  </p>
  <!-- ShrinkWrap Container -->
  <div class="shrinkwrap">
    <span>MotherDuck</span>
    <span>Duckling The First</span>
    <span>Duck2</span>
    <span>JackInTheBox</span>
  </div>
  <p>
    -- resize left right --
  </p>
</div>

Upvotes: 1

Related Questions