HTML/CSS Flex column & Flex row with same width size

user_11051541 0
Viewed 90

I would like to get the same width size for my horizontal & vertical butons. I used flex-basis (which by the way doesn't work for me in the code snipet here...) but the problem is flex-basis in column mode will adjust the height and not the width. What would be a better way to do it ?

#adjustButonVertical {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 20px;
}

#adjustButonHorizontal {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0px;
  left: 10%;
}

#adjustButonHorizontal>* {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
}

#adjustButonVertical>* {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
}
<div class="container">
  <div id="adjustButonHorizontal">
    <button id="buton1" class="btn btn-primary" type="button">buton1</button>
    <button id="buton2" class="btn btn-primary" type="button">buton2</button>
    <button id="buton3" class="btn btn-primary" type="button">buton3</button>

    <div id="adjustButonVertical">
      <button id="buton4" class="btn btn-primary" type="button">buton4</button>
      <button id="buton5" class="btn btn-primary" type="button">buton5</button>
      <button id="buton6" class="btn btn-primary" type="button">buton6</button>

    </div>
  </div>
</div>

flexbox css html
2 Answers

Whenever you work along the x and y axis, I'd recommend you use CSS Grid This way, you can position the buttons explicitly using grid-row: [selected lines] or grid-column: [selected lines]. This method would allow you to adjust the precise size of the grid in each position, easily controlling the width.

You would require a 3x3 grid that can be easily achieved through creating a wrapper div and applying the following CSS:

  1. display: grid
  2. grid-template-column: repeat(3, 1fr);
  3. grid-template-row: repeat(3, 1fr)

Then select your buttons in CSS and position them using grid-row: and/or grid-column:. If you are new to CSS grid and position, watch this video by Web Dev Simplified

Another possible (and quicker but less well maintainable solution) is to select <div id="adjustButonHorizontal"> and set a fixed width, with the child button set to width: 100%. Keep in mind this is not responsive design and will likely break when using different devices. Take advantage of CSS grid's fractional units!

user_178919710

I would just use a text element for the text that has the rotating button and then use a transform to rotate the text. This allows for the text to not determine the width of the button, therefore matching the sizes.

#adjustButonVertical {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 20px;
}

#adjustButonHorizontal {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0px;
  left: 10%;
}

#adjustButonHorizontal>* {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
}

#adjustButonVertical>* {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
  width: 20px;
}

button>p {
  transform: rotate(-90deg);
  margin: 0;
}
<div class="container">
  <div id="adjustButonHorizontal">
    <button id="buton1" class="btn btn-primary" type="button">buton1</button>
    <button id="buton2" class="btn btn-primary" type="button">buton2</button>
    <button id="buton3" class="btn btn-primary" type="button">buton3</button>

    <div id="adjustButonVertical">
      <button id="buton4" class="btn btn-primary" type="button"><p>buton4</p></button>
      <button id="buton5" class="btn btn-primary" type="button"><p>buton5</p></button>
      <button id="buton6" class="btn btn-primary" type="button"><p>buton6</p></button>

    </div>
  </div>
</div>

user_164963570
Related