Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to make child in flex go full width?

Tags:

html

css

flexbox

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>
like image 729
vikrantnegi Avatar asked Mar 18 '16 09:03

vikrantnegi


People also ask

How do I make my Flex container full space?

Use the flex-grow property to make a flex item consume free space on the main axis. This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

How do you adjust flex width?

You have to add a wrapper around the right column, and then only specify flex-basis on the . menu element. Now when the menu is hidden, the right column expands the full amount. Great, that works as expected!


1 Answers

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>
like image 156
Tarek.hms Avatar answered Sep 20 '22 20:09

Tarek.hms