First-Child Full-Width in Flexbox

First-child full-width in Flexbox

You can set the :first-child to a width of 100%, and the rest of the childs :not(:first-child) to flex: 1.

To put them on multiple lines, use flex-wrap: wrap on the container:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px;
}

.child {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  margin: 12px;
}

.child:first-child {
  width: 100%;
}

.child:not(:first-child) {
  flex: 1;
}

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

First-child and second in Flexbox

Following way you can achieve above layout using flexbox

First you need to create one parent div which have 3 children

<div class="row">
  <div class="child child1">80%</div>
  <div class="child child2">20%</div>
  <div class="w-100">full Row</div>
</div>

Then we are going to provide css to layout our elements, so we will give flex and flex-wrap propertied to parent div.row, when we set flex-wrap property to wrap it will place child div to new row when there is no space available which child exactly required

Here is the css that will place our elements

 .row {
    display: flex;
    flex-wrap: wrap;
  }
  .child1 {
    flex: 0 0 80%;
  }
  .child2 {
    flex: 0 0 20%;
  }
  .w-100 {
    flex: 0 0 100%;
    background: yellow;
  }

Here we are using css flex property to define width of the child element, here is the overview of flex property

CodeSandbox

How can I make Flexbox children 100% height of their parent?

Use `align-items: stretch`

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

Arrange flexbox elements with first child taking entire two row height

If you need to control both height and width at the same time, then you should use CSS-Grid. Flexbox is only good at controlling either height or width.

CSS-Grid creates a table like layout by placing elements on column and row lines.

To use grid, apply display: grid; at the container. To make an element span 2 rows, apply grid-row: span 2; to the element itself.

.container {
  display: grid;
  grid-gap: 10px;
}

@media only screen
  and (min-width: 500px) {
    .container {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .container div:first-of-type {
      grid-row: span 2;
    }
}

/* for styling purpose only */
.container div {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid black;
  min-height: 20vh;
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

how to make child in flex go full width?

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>

Flexbox -how to get first child 50% widht and 100% height while stacking remaining children?

Use flex-direction: column with flex-wrap: wrap, and then size/flex on the list items:

ul {  display: flex;  flex-direction: column;  flex-wrap: wrap;  height: 100vh;  margin: 0;  padding: 0;  list-style: none;}
li {  background: red;  margin: 1%;}
li:first-child {  height: 100%;}
li:not(:first-child) {  flex: 1;}
body {  margin: 0;}

<ul>  <li>one</li>  <li>two</li>  <li>three</li>  <li>four</li></ul>

Force flex item to span full row width

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

Flex child push siblings to the bottom

Pretty simple, just use flex with flex-wrap on the parent, and the first item set flex-basis to 100%. That will push the siblings to the next line.

.items-container {
  display: flex;
  flex-wrap: wrap;
}

.item1 {
  flex: 1 1 100%;
 }

<div class=items-container>
  <div class="item1">item 1</div>
  <div class="item2">item 2</div>
  <div class="item3">item 3</div>
</div>

Make first element full width and the rest in one line

This will try to keep all your subordinate items on one row.

See notes in CSS

.flex-container {  display: flex;  flex-flow: row wrap;  justify-content: space-between;}
.flex-container .flex-item {  background-color: #d94a6a;  flex: 1 1 0;                                       /*  for 2nd line to not wrap  */  margin: 0 1px;                                                  overflow: hidden;                                  /*  for 2nd line to not wrap  */  min-height: 75px;  text-align: center;  -webkit-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);  -moz-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);  box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);}
.flex-container .flex-item:nth-child(1) {  background-color: #3b5bb2;  flex-basis: 100%;                                  /*  make first take full width  */  min-height: 400px;  margin-bottom: 20px;}

<div class="flex-container">    <div class="flex-item">I'm the biggest!</div>    <div class="flex-item">#2</div>    <div class="flex-item">#3</div>    <div class="flex-item">#4</div>    <div class="flex-item">#5</div>    <div class="flex-item">#6</div>    <div class="flex-item">#7</div></div>

Stop flex child from being full width

You can simply set align-self: flex-start to the class .resource-item__link. In this solution the hyperlink elements (<a>) are all on the same level and not placed directly under the content of each column (.col).

.row {
  display: flex;
  flex-direction: row;
}
.col {
  display: flex;
  flex-direction: column;
  padding: 0 0 15px 0;
  margin: 0 19px 65px;
  width: calc((100% / 3) - 38px);
  background: red; 
}
.col .resource-item__title {
  font-weight: bolder; 
}
.col .resource-item__summary {
  margin: 0 0 5px 0;
}
.col .resource-item__link {
  align-self:flex-start;
  background: yellow;
  margin-top: auto;
}
.col .resource-item__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  color: green;
  font-size: 22px;
  cursor: default;
}
.col .resource-item__icon.disabledIcon {
  color: red; 
}

<div class="row">
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">view</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
</div>

First-Child Full-Width in Flexbox