CSS Flex, How to Display One Item on First Line and Two on the Next Line

CSS flex, how to display one item on first line and two on the next line

You can do something like this:

.flex {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

.flex>div {

  flex: 1 0 50%;

}

.flex>div:first-child {

  flex: 0 1 100%;

}

<div class="flex">

  <div>Hi</div>

  <div>Hello</div>

  <div>Hello 2</div>

</div>

How to start a new line and align the newline with another item within flexbox?

You can create two divs inside the parent div, one that holds the unique element and one that holds generic children. That's how you get the separation

<div class="parent">
  <div class="unique-wrapper">
    <div class="unique_element">First</div>
  </div>
  <div class="child-wrapper">
    <div class="child">Second</div>
    <div class="child">Third</div>
    <div class="child">Fourth</div>
    <div class="child">Fifth</div>
  </div>
</div>

Style the CSS as shown. Note .unique-wrapper has flex: 3 because you set the width of the element as 30%.

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: flex;
  width: 300px;
}

.unique_element {
  background-color: Crimson;
  padding: 10px 10px 10px 10px;
}

.unique-wrapper, .child-wrapper {
  border: none;
  margin: 0;
}

.unique-wrapper {
  flex: 3;
}

.child-wrapper {
  flex: 7;
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: auto;
  background-color: CornflowerBlue;
  padding: 10px 10px 10px 10px;
}

Here is my codepen if you want to play with the code.

CSS/HTML how to show only the first two lines of a flexbox

Here is a quick solution, although it doesn't calculate the length yet.

items = ["Helooo","Testing","Holaaaa","Hiiii","Hello","Greetings fine sir","Welcome","Bonjour","Oi you there"];

let limit = 5; // You will need to calculate this somehow

function display(limit){
    document.getElementById("searchContainer").innerHTML = "";
    for (let item of items.slice(0,limit)){
        document.getElementById("searchContainer").innerHTML += `<div class=item>${item}</div>`;
    }
    if (items.length > limit){
        document.getElementById("searchContainer").innerHTML += `<div class=item onclick="display(${items.length})">+${items.length-limit}</div>`;
    }
}

display(limit);

.container{
  display: flex;
  flex-wrap: wrap;
  background-color: whitesmoke;
  max-width: 15rem;
  gap: 1rem;
}

.item{
  background-color: rgb(100,100,200);
  padding: 0 0.2rem;
  border-radius: 2px;
}

<div class=container id=searchContainer>
</div>

CSS: How can I ensure flex items wrap to the next line--after the first item--at a certain screen width?

Use the media query to apply flex-wrap:wrap on the flex container and flex:0 0 100% on the first child.

This way you don't need additional HTML markup, and no need to change anything on your code but the media query.

@media (max-width: 800px) {
  .cart-cb{
    flex-wrap:wrap;
  }
  .cart-cb div{
    flex: 0 0 100%;
    text-align:right;
  }
}

https://jsfiddle.net/378b4yLy/

Flexbox item wrap to a new line

If you look at this great answer you'll notice that the only cross-browser way (without 2 line break limit) is inserting 100%-width empty blocks ("line-breaks"). So for similar markup this will look like

.flex {

  display: flex;

  flex-wrap: wrap;

  border: 2px solid red;

}

.item {

  width: 50px;

  height: 50px;

  margin: 5px;

  border: 2px solid blue;

}

.line-break {

  width: 100%;

}

<div class="flex">

  <div class="item"></div>

  <div class="item"></div>

  <div class="item"></div>

  <div class="line-break"></div>

  <div class="item"></div>

  <div class="item"></div>

  <div class="line-break"></div>

  <div class="item"></div>

  <div class="line-break"></div>

  <div class="item"></div>

  <div class="item"></div>

  <div class="item"></div>

</div>

CSS Flex, How to display a list with custom order and horizontall scrolling capabilities

Try using the below snippet. You might need to adjust the second section inside div width, but you can check the outer structure and apply media queries to achieve what you want.

.section {

  display: flex;

  flex-flow: row wrap;

  overflow-x: auto;

  overflow-y: hidden;

}

.second-section {

  display: flex;

  flex-flow: row nowrap;

  flex-grow:1;

}

.home_box {

  flex: 0 0 auto;

  width: 60%;

  height: 300px;

  background-color: #abc;

  margin: 20px;

}

.first-section {

  height: 600px;

}

@media (min-width: 576px) {

  .section {

    flex-flow: row nowrap;

  }

}

<div class="section menu_section_1">

  <div class="home_box box_2 first-section"></div>

  <div class="second-section">

    <div class="home_box box_2"></div>

    <div class="home_box box_2"></div>

    <div class="home_box box_2"></div>

    <div class="home_box box_2"></div>

    <div class="home_box box_2"></div>

  </div>

</div>

How to specify line breaks in a multi-line flexbox layout?

The simplest and most reliable solution is inserting flex items at the right places. If they are wide enough (width: 100%), they will force a line break.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

Flex items with right aligned static items on first row

I have idea with float and use with inline-block if you didn't want flex style

Main factor is...

• display:inline-block on item
• float:right on static item

In this example you can resized div box to test responsive ; )

.container{

  display:block;

  border: 2px solid;

  resize: both;

  overflow: auto;

  background-color: yellow;

}

.item{

display:inline-block;

  background-color: blue;

  margin: 10px 10px;

}

.item.static{

  float:right;

}

<div class="container">

  <div class="item static">item5</div>

  <div class="item static">item4</div>

  

  <div class="item">item1</div>

  <div class="item">item2</div>

  <div class="item">item3</div>

</div>

---

Related Topics