CODEWITHSUNDEEP
htmlcssflexbox
vikrantnegi
vikrantnegi

Reputation: 2492

how to make child in flex go full width?

I've started using flex and I love how it works.

I'm using flex layout and I want the btn-group class inside dashboard-body to go full width of the parent. Right now its width is equal to the width of both buttons together.

What I want to achieve here is adding space between both buttons also I don't want to use margin right or left. I want the btn-group div to have full width of its parent dashboard-body so I can use the flex property align-content: space-between to have enough space between both buttons.

Is there any better way other than adding margin/padding around buttons to do the same?

Thanks.

Here is the code: 

.dashboard-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>

Upvotes: 60

Views: 148376

Answers (4)

Behemoth
Behemoth

Reputation: 9370

Use align-items: stretch to stretch all children to full width (without centering them).

This approach is particularly suitable if you have many children that should all have the full width of the parent flex container.

.dashboard-body {
  width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: strech; /* <- strech children to full width */
}

p {
  text-align: center;
}

.btn-group {
  display: flex;
  justify-content: space-between;
}
<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>
</div>

Upvotes: 0

zemil
zemil

Reputation: 5118

Just add this css rule:

flex: auto;

Upvotes: 12

Tarek.hms
Tarek.hms

Reputation: 1283

This is the right way to achieve that:

.dashboard-body{
  text-align:center;
  width: 300px;
  margin: 0 auto;
}
.btn-group{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}
.btn-group a{
  flex:0 0 auto;
}
<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>
</div>

Upvotes: 42

Mamboleoo
Mamboleoo

Reputation: 519

You can add align-self:stretch on the .btn-group.
Here is a demo : https://jsfiddle.net/f5noh2q7/1/

Upvotes: 25

Related Questions