Flex wrap is causing additional space within the layout

When using flex-wrap, if there are more textBoxes than the available width in the container, they shift to the next line. This is fine, but it leaves too much space between the button and the textBox.

This spacing issue can make the layout look odd. I have tried various solutions, but have not been able to place the button right next to the textBox on the first line.

.container{
    background: #E3E3E3;
    width: 500px;
    display: flex;
}

.textContainer{
    background: #AFACAC;
    display: flex;
    flex-wrap: wrap;
}

.textContainer div{
    background: #E3FF33;
    height: 30px;
    padding: 5px;
    margin: 5px;
}

.addBtn{
    background: #5C5AF5;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px
}
htmlcss

Answer №1

When you include a rule for the individual flex-lines such as justify-content: space-between; or justify-content: space-evenly, it will automatically adjust to accommodate any number of elements added and present them in a more adaptable manner. Take a look at the examples provided below.

Update: Towards the end, there is a third example that utilizes specific margin rules instead of flex rules. While it may not be my preferred choice, it could potentially offer a cleaner appearance in your particular scenario.

With space-between 

.container{
    background: #E3E3E3;
    width: 500px;
    display: flex;
}

.textContainer{
    background: #AFACAC;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.textContainer div{
    background: #E3FF33;
    height: 30px;
    padding: 5px;
    margin: 5px;
}

.addBtn{
    background: #5C5AF5;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px
}
<body>
    <div class="container">
        <div class="textContainer">
            <div>aaaaa</div>
            <div>eeeeee</div>
            <div>ee</div>
            <div>cccc</div>
            <div>ggg</div>
            <div>ggggggggg</div>
            <div>uuu</div>
            <div>12222qqqqqq</div>
            <div>qqq</div>
            <div>zzzzzzzz</div>
        </div>
        <div class="addBtn">
            <span>+</span>
        </div>
    </div>
</body>

With space-evenly 

.container{
    background: #E3E3E3;
    width: 500px;
    display: flex;
}

.textContainer{
    background: #AFACAC;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.textContainer div{
    background: #E3FF33;
    height: 30px;
    padding: 5px;
    margin: 5px;
}

.addBtn{
    background: #5C5AF5;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px
}
<body>
    <div class="container">
        <div class="textContainer">
            <div>aaaaa</div>
            <div>eeeeee</div>
            <div>ee</div>
            <div>cccc</div>
            <div>ggg</div>
            <div>ggggggggg</div>
            <div>uuu</div>
            <div>12222qqqqqq</div>
            <div>qqq</div>
            <div>zzzzzzzz</div>
        </div>
        <div class="addBtn">
            <span>+</span>
        </div>
    </div>
</body>

Margin rules have been used in the following example; I have commented out the CSS code where I made changes. 

.container{
    background: #E3E3E3;
    width: 500px;
    display: flex;
}

.textContainer{
    background: #AFACAC;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.textContainer div{
    background: #E3FF33;
    height: 30px;
    padding: 5px;
    /*new margin-rules*/
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: auto;
}

.addBtn{
    background: #5C5AF5;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px
}
<body>
    <div class="container">
        <div class="textContainer">
            <div>aaaaa</div>
            <div>eeeeee</div>
            <div>ee</div>
            <div>cccc</div>
            <div>ggg</div>
            <div>ggggggggg</div>
            <div>uuu</div>
            <div>12222qqqqqq</div>
            <div>qqq</div>
            <div>zzzzzzzz</div>
        </div>
        <div class="addBtn">
            <span>+</span>
        </div>
    </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

utilizing the removeClass method to toggle the visibility of a div by removing the "hidden" class

I am currently developing a dynamic game utilizing HTML, CSS, and jQuery. In the lower right corner of the screen, there is a question mark (which is an image file, not text). My objective is to display a help box when the question mark is clicked and held ...

jqueryhtmlcss

I am receiving a reference error even though the day variable has already been defined. Can you kindly point out

When I attempt to log in, the page is giving me the correct output. Interestingly, even after encountering an error, the webpage continues to function properly. app.get("/", function(req, res) { let day = date.getDate(); console.log(day); r ...

javascripthtmlexpress

Prevent the box from closing automatically after submitting a form using jQuery

Despite my efforts to keep a simple dialog box open after submitting a form, it continues to close. I tried using the preventDefault method in jQuery, but it didn't solve the issue. Below is the code snippet: $(document).ready(function(e) { $(&apo ...

javascriptjqueryhtmlcss

Tips for creating a table that fills the height of its parent div without surpassing it

Issue: I am facing a challenge with making a <table> element fill 100% of its container's height dynamically, without going over the limit. Context: When the height of the <table> surpasses that of the container, I want the ability to s ...

htmlcsshtml-table

JQuery functions are functioning properly in Internet Explorer 10, but are encountering issues in Internet Explorer

My JavaScript function calls a jQuery function that works in IE10 but not in IE7. function test() { // Display message before calling jQuery function... alert("Before"); // Call the jQuery function... $("#boxscroll").getNiceScroll().resize(); // Display m ...

javascriptjqueryhtmlinternet-explorer

Looking for assistance with troubleshooting CSS issues specifically in Internet Explorer

Hey there! I've been working on a landing page and it's looking good in Safari, Firefox, and Chrome. The only issue is that the layout is all messed up in IE (any version). If any of you experts could take a look at it and give me some suggesti ...

htmlcssinternet-explorer

How can I prevent a horizontal scrollbar from appearing in HTML when using margin:-4px and what are some possible solutions to this

I am facing an issue with a <div> element that contains a grid row element from semantic UI. Despite setting the width to 100%, there is a small space visible on all sides of the row element. I tried using margin: -4px to eliminate the white space, b ...

htmlcsssemantic-ui

Transferring HTML table information to Django models for efficient data management

I am currently developing a student attendance management system using the Django framework. The objective is to fetch all the names of the students from the student database and display them in an HTML table. Additionally, I will be updating the informati ...

htmljquerydjangoajaxdjango-models

Creating a fixed top bar button in Ionic and iOS along with a scrollable list

In my app using Ionic with the iOS platform, I am trying to achieve a specific layout: A header A fixed bar button A scrollable list Here is what I have attempted so far: <ion-view view-title="Account"> <div class="button-bar" style="margin ...

ioscssionic-framework

How can I send an HTML document from a WebApi 2 action using the IHttpActionResult interface?

When it comes to building an html document and returning it in a web api, many resources recommend using HttpResponseMessage. However, I am eager to achieve this using IHttpActionResult instead. Here is my current approach: [ResponseType(typeof(HttpRe ...

c#html.netasp.net-web-api

When <tr> is used as a link with the target="_blank" attribute

I'm facing an issue with my HTML and jQuery code. I'm trying to make a table row act as a link, but I'm struggling to figure out how to add the target="_blank" attribute. Could someone assist me in resolving this? Below is the snippet of H ...

jqueryhtmlhtml-table

Switch from hover effects to CSS3 animations triggered on page load

I found this code snippet on https://codepen.io/chriscoyier/pen/NWNJpdJ. Can someone help me modify it to change the counter on page load instead of hover? Also, I want the counter to stop at 100 without resetting back to 0. @property --num { syntax: ...

htmlcss

Is it possible to adjust the position/target values of a webkit CSS transition without interrupting its operation

Is there a way to smoothly change the target position or attributes of a running transition without halting it? To illustrate, let's consider this initial animation: -webkit-transition:-webkit-transform 5s ease-in-out -webkit-transform: translate3d( ...

javascripthtmlcsswebkit

Is it possible for me to adjust these two images to fit the screen perfectly?

Technologies: CSS React JPG/PNG Objective: I am striving to resize two images to achieve this desired look: https://i.stack.imgur.com/B1b0h.png I am currently developing a 'skirt customizer' for either my mom or portfolio, where users can m ...

htmlcssimage

How can I emphasize the React Material UI TextField "Cell" within a React Material UI Table?

Currently, I am working on a project using React Material UI along with TypeScript. In one part of the application, there is a Material UI Table that includes a column of Material TextFields in each row. The goal is to highlight the entire table cell when ...

cssreactjstypescriptmaterial-uitextfield

Displaying PDF files on the internet without allowing them to be downloaded

How can I display PDF files on my website without allowing them to be saved or downloaded? Is there a way to prevent browsers from saving or downloading the PDF files? ...

phpjavascripthtmlcss

After updating the INNERHTML, the NAV tag content is no longer functional

I am facing an issue with replacing the contents of a NAV tag that contains UL list items. The original HTML within the NAV tag works perfectly fine, but when I replace it with my own HTML - which matches the original word for word - the dropdown functiona ...

javascriptcssinnerhtmlnav

Converting Data from MySQL and PHP to Excel

Is there a way to export human resource applications stored in my MySQL table as an Excel file? function exportExcel($filename='ExportExcel',$columns=array(),$data=array(),$replaceDotCol=array()){ global $connect; header('Content-Enc ...

phphtmlmysqlhtml-tableexport-to-excel

How can I extract and display chosen values from multiple dropdown menus in designated text boxes based on their unique identifiers?

A website for evaluating car values is in the works, using a combination of PHP, MYSQL, JQUERY, and JavaScript. The database includes 3 tables: Table "car_make": id make 1 BMW Table "model": model_id model_name make_id 1 M3 1 Table "ca ...

javascriptphpjqueryhtml

Modifying properties through JavaScript is not possible

I created an HTML form and I'm trying to change the attributes of a div and a button but for some reason, it's not working <form> <button type='button' id='other'>Sub</button> <select id="prop"> &l ...

javascripthtml