Struggling to display flex items in a full-width row on a new line

Here is a code snippet where I am trying to display "0 of 2 completed" on a new line at full width. I have used flexbox for this purpose, but I am facing challenges. Can you suggest a better approach to achieve this?

.container {
  display: flex;
  width: 400px;
  height: 40px;
  border: 1px solid blue;
}

.container > div {
  height: 20px;
}

.dragHandle {
  flex: 0 0 20px;
  background-color: rgba(0,0,0,0.2);
}

.checkbox {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.input {
  flex: 0 0 auto;
  flex-grow: 1;
  background-color: rgba(0,0,0,0.1);
}

.avatar {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.footer {
  /* appear on new line */
}
<div class="container">
  <div class="dragHandle"></div>
  <div class="checkbox"><input type="checkbox" /></div>
  <div class="input">Task title</div>
  <div class="avatar"></div>
  <div class="footer">0 of 2 completed</div>
</div>

htmlcssflexbox

Answer №1

To make it work, just set the width to 100% and include flex-wrap:wrap in the container properties:

.container {
  display: flex;
  width: 400px;
  height: 40px;
  border: 1px solid blue;
  flex-wrap:wrap;
}

.container > div {
  height: 20px;
}

.dragHandle {
  flex: 0 0 20px;
  background-color: rgba(0,0,0,0.2);
}

.checkbox {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.input {
  flex: 0 0 auto;
  flex-grow: 1;
  background-color: rgba(0,0,0,0.1);
}

.avatar {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.footer {
  width:100%; /* Alternatively, use flex: 0 1 100% or flex-basis:100%*/
}
<div class="container">
  <div class="dragHandle"></div>
  <div class="checkbox"><input type="checkbox" ></div>
  <div class="input">Task title</div>
  <div class="avatar"></div>
  <div class="footer">0 of 2 completed</div>
</div>

Answer №2

To enhance the layout, a new div can be introduced within the container, containing all div elements except the footer. This new div can be styled with display: flex to achieve the desired effect. Another approach could be utilizing the footer tag instead of a div with a footer class:

.container {
  width: 400px;
  height: 40px;
  border: 1px solid blue;
   }
#newDiv {
   display: flex;
   }
<body>
  <div class="container">
    <div id="newDiv">
      <div class="dragHandle"></div>
      <div class="checkbox"><input type="checkbox" /></div>
      <div class="input">Task title</div>
      <div class="avatar"></div>
    </div>
    <footer>0 of 2 completed</footer>
   </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for accessing information from a FOR loop within DIV tags

Let's explore the following code snippet: Here is the HTML generated: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Website ...

javascripthtmlcssvue.jsvuejs2

Ways to gather all the elements on each page

Currently engrossed in a web scraping endeavor for a car website utilizing Selenium. One potential roadblock I've encountered is that the code seems to only iterate over the initial car element on the page, instead of going through the entirety of ava ...

pythonhtmlselenium-webdriverweb-scraping

Employ a separate function to extract HTML content from a jQuery target in an AJAX response

Initially, the HTML div is empty upon loading the page. However, clicking a button triggers jQuery AJAX to load new HTML content into the div. $("#control-list a#ms").click(function(){ var postData = "actionrequest=ms"; $.ajax({url:"SSSutility.php ...

jqueryhtmlajax

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...

javascripthtmlcssreactjs

I am struggling to move my dropdown list in HTML and CSS

I'm having trouble adjusting the position of a dropdown list on my website using CSS. Can someone help me move the dropdown list to the center? HTML Code: <header> <h1 id="my_cycle_head">MY CYCLE</h1> <ul id= ...

htmlcss

Can this functionality be accomplished using only HTML and CSS, without relying on JavaScript?

Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...

javascripthtmlcss

Troubleshooting a unique CSS bug in jQuery mouseover functionality

Check out this pen: https://codepen.io/anon/pen/eKzEVX?editors=1111 I recently created a Form Select in Laravel: {!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label &apo ...

javascriptjqueryhtmlcssmouseover

Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...

htmlcsswebbootstrap-4

Add some flair to your list by animating the text within it

My goal is to add animation to the text within the list. Below is the code snippet: <div id="about" class="row section"> <div class="col-sm-8"> <h2 style="color:black;">About me!</h2> <ul> <li > ...

javascripthtml

Having trouble triggering drag events efficiently with d3-drag on SVG elements

drawAll refers to a two-dimensional array where each drawAll[i] element represents a drawing containing all the strokes. A stroke is essentially a string representing a series of 2D points that can be utilized to generate a <path>. I am currently at ...

javascripthtmld3.jssvgdrag-and-drop

How to create a mandatory select field in Bootstrap 5 form for submission?

Can anyone help me with setting the required attribute for the select field in a form? Is it feasible to achieve this using Bootstrap 5 or HTML? In order to submit the form, users must select either A or B, similar to how they need to fill out the messag ...

htmlformsbootstrap-5

Which is better for creating a gradual moving background: Javascript or CSS?

I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...

javascriptcss

jQuery swap- enhancing the appearance of numerical values

I am looking to customize specific characters within my <code> tag. While searching online, I came across the .replace() function but encountered issues when trying to style numbers. My goal is to change their appearance without altering the text its ...

javascriptjquerycss

Could you explain the meaning of the :host /deep/ selector?

Can you provide a simple explanation of what the :host /deep/ selector does? :host /deep/ .ui-autocomplete { width: 85%; } ...

cssangularshadow-dom

Child element failing to resize along with parent container

Here is the HTML structure I have for a template.php page within my website. <!DOCTYPE html> <html lang="en"> <head> <title></title> ...... </head> <body> <div id="container"> ...

phphtmlcsscodeigniter

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run ...

javascripthtmlcssreactjs

Prevent the Focus on Submit Button in CSS

Whenever a text field is focused in Opera, the submit button ends up with an unsightly black border. A screenshot clearly shows this issue. At the bottom of the image, you can see how the textarea is focused and the submit button looks unappealing. Is th ...

cssfocusstyling

Endless cycle within the while loop without any obvious cause

I've been tinkering with a timer and thanks to some feedback I received in this community, everything is running smoothly. Here's what the current version looks like for reference: https://i.stack.imgur.com/Qd7ll.png Here's a snippet of my ...

javascriptjqueryhtmlwhile-loopinfinite-loop

The issue with React select right-to-left (RTL) functionality is that it

When using react select, I include isRtl as a prop like so: <Select onChange={handleChange} isRtl isMulti options={colourOptions} /> However, only the input receives the rtl direction style and not the options. How can I ensure that both the input a ...

javascriptcssreactjsreact-select

Ensure the clarity tabs labels have the padding-left CSS property added

In my project, there are 2 clarity tabs (you can view the StackBlitz reference here). https://i.sstatic.net/jhLcn.png I want to apply the padding-left property specifically to Tab1 (the tab label itself, not the content) in order to create some space aro ...

cssangularpaddingvmware-clarity