Question 170673 in Html Question posted in
Some basic documentation can be found here.

How can I create 3 columns in one row & move one column to the next row using HTML & Flexbox?

I am trying to create following structure:

.rowblock {
 display: flex;
 padding: 0.5rem;
 width: 100%;
 flex-direction: row;
}
.col {
height: 50px;
border: 1px solid #ccc;
}
<div class="rowblock">
 <div class="col">10% Width</div>
 <div class="col">80% Width</div>
 <div class="col">100% on Next Row</div>
 <div class="col">10%</div>
</div>

I am trying to move the 3rd column to next row to occupy full width and tried with flex grow but did not worked, pls suggest approach.

Tags:

2

Answers


  1. 0

    Try this:

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

.col {
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid black;
    flex-grow: 1;
}

.col:nth-child(1) {
  order: 1;
}

.col:nth-child(2) {
  order: 2;
}

.col:nth-child(3) {
  flex-basis: 100%;
  width: 100%;
  order: 4;
}

.col:nth-child(4) {
  flex-basis: 10%;
  order: 3;
}
    Login or Signup to reply.
  2. 0 
    .rowblock {
  display: flex;
  padding: 0.5rem;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  height: 50px;
  border: 1px solid #ccc;
  flex-grow: 1;
}

.col:nth-child(1) {
  order: 1;
  flex-basis: calc(10% - 2px);
}

.col:nth-child(2) {
  order: 2;
  flex-basis: calc(80% - 2px);
}

.col:nth-child(3) {
  order: 4;
  flex-basis: calc(100% - 2px);
}

.col:nth-child(4) {
  order: 3;
  flex-basis: calc(10% - 2px);
}
    <div class="rowblock">
  <div class="col">10% Width</div>
  <div class="col">80% Width</div>
  <div class="col">100% on Next Row</div>
  <div class="col">10%</div>
</div>

    In the modified code, I added the flex-wrap: wrap; property to the .rowblock class to allow the columns to wrap onto the next line when necessary.

    For the columns, I used the flex-basis property to specify the initial width as a percentage. The first column has a width of 10%, the second column has 80%, the third column has 100% (which forces it onto the next row), and the fourth column has 10%.

    With these modifications, you should achieve the desired structure with the specified column widths.

    UPDATED:

    I’ve updated the code with the order property as well as subtracting 2px in the flex-basis property to make up for the px’s added by the col border.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search