CODEWITHSUNDEEP
css
PLazzo
PLazzo

Reputation: 169

A group of CSS buttons aligned

I have a group of buttons generated dynamically, so I need to align them as according follow example:

enter image description here

The 1st, 2nd and 3rd buttons must be expanded to fill full line width and keep with the same size. The 4th and 5th buttons must be 50% each one to divide the same line in full.

I'm using the follow code but have no idea how to format as desired.

.block {
  width: 400px;
}

.button {
  float: left;
  background-color: #cec;
  border: none;
  color: white;
  margin: 15px;
  padding: 15px;
  display: inline-block;
  font-size: 16px;
}
<div class="block">
  <div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a>
  </div>
  <div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#3 - SOME TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#4 - SHORT TEXT</a>
  </div>
  <div class="button"><a href="#">#5 - SHORT</a>
  </div>
</div>

Upvotes: 1

Views: 47

Answers (2)

yinsweet
yinsweet

Reputation: 2851

This is to add-on what @Zachary Haber has solved. If we want button 4 and 5 to have equal width, we can add another flex setup for button 4 and 5.

.block {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}

.button {
  background-color: #cec;
  border: none;
  color: white;
  margin: 15px;
  padding: 15px;  
  font-size: 16px;
  flex: 1 0 auto;
}

.button.button45 {
  flex: 1;
}

.container {
  display: flex;
  width: 100%;
}
<div class="block">
  <div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a>
  </div>
  <div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#3 - SOME TEXT HERE</a>
  </div>
  <div class="container">
    <div class="button button45"><a href="#">#4 - SHORT TEXT</a>
    </div>
    <div class="button button45"><a href="#">#5 - SHORT</a>
    </div>
  </div>
</div>

Upvotes: 1

Zachary Haber
Zachary Haber

Reputation: 11047

Here's an example of what it seems like you are asking for. Flex works well for making sure the longer text examples are the full size of the block. Unfortunately, it doesn't work well for getting the smaller ones to be exactly equal width, as the remaining space is portioned out between them after their normal widths.

.block {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}

.button {
  background-color: #cec;
  border: none;
  color: white;
  margin: 15px;
  padding: 15px;
  display: inline-block;
  font-size: 16px;
  flex: 1 0 auto;
}
<div class="block">
  <div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a>
  </div>
  <div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#3 - SOME TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#4 - SHORT TEXT</a>
  </div>
  <div class="button"><a href="#">#5 - SHORT</a>
  </div>
</div>

Here's a fiddle since stacksnippets is down at the time of posting: https://jsfiddle.net/6vamdcz2/

Upvotes: 2

Related Questions