Take a look at the image below:
The setup currently displayed is in the top-left corner. If I were to add more red boxes, they would wrap to the next line with a 10px right margin on the last box of the first row.
My inquiry:
Is it possible to achieve the layout shown in the image on the top-right, along with any additional desirable features, by using flex-boxes only and avoiding the utilization of JS, display:table, or negative margin tricks?
Assuming you want to display 4 elements per line based on the image with a width set to 25%, the CSS code needed is:
.red-box {
width: calc(25% - 30px/4);
margin: 0 10px 10px 0;
}
.red-box:nth-child(4n) {
margin-right: 0;
}
#wrapper {
display: flex;
flex-wrap: wrap;
background: #01FF00;
}
.red-box {
width: calc(25% - 30px/4);
margin: 0 10px 10px 0;
height: 100px;
background: red;
}
.red-box:nth-child(4n) {
margin-right: 0;
}<div id="wrapper">
<div class="red-box"></div>
<div class="red-box"></div>
<div class="red-box"></div>
<div class="red-box"></div>
<div class="red-box"></div>
<div class="red-box"></div>
<div class="red-box"></div>
</div>A simple solution is to utilize the CSS selector .red-box:not(:last-child) instead of just .red-box.
If you want this to apply to multiple rows, enclose each row within a div element. Check out an example in this JSFiddle link.
While it may be a few years late, if you're facing a similar issue, the key to solving it in both cases is to encase the flex container within another div. Apply negative margins to the flex container, and then give each flex item the same amount of margin back like this:
.container {
border: 4px dashed rgb(105, 125, 160);
width: 600px;
}
.item {
display: flex;
flex-wrap: wrap;
margin:-15px;
}
.item>* {
flex: 1 1 180px;
margin: 15px;
/*styles for visual appeal*/
background-color:#5983ab;
color:black;
height:50px;
}<div class="container">
<div class="item">
<div>Apple</div>
<div>Banana</div>
<div>Cherry</div>
<div>Date</div>
<div>Fig</div>
<div>Grape</div>
<div>Kiwi</div>
<div>Lemon</div>
<div>Mango</div>
<div>Orange</div>
</div>
</div>If you want a more in-depth explanation, check out the MDN documentation
I'm facing an issue with the navigation bar elements in my header. They are currently aligned to the left side of the screen, but I want them to move to the right. Does anyone know why they are not moving? Also, is there a specific rule or method for ...
I am struggling to create a circular spinning navigation bar using CSS3 and HTML. How can I achieve this effect? I have attached a picture from an old game that showcases the animation I am aiming for. When the active circle is selected, the corresponding ...
When attempting to utilize the cols and rows attributes of the <textarea> element in order to set the width and height in characters, I have encountered issues even without implementing CSS. Take a look at this example: link I have configured a 5x5 ...
Can you help me with a dialog box issue I am facing? $(document).ready(function() { $('.ui.modal').modal('show'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link hr ...
In my project, I am utilizing Material UI's simple Date Picker module. However, I am looking to solely display the calendar section without the month and year indicators along with the navigation arrows. Is it possible to remove these specific element ...
Check out this Fiddle When the mouse hovers over the element, an opaque "cloud" appears and I want to completely hide the underline that is normally displayed. The underline is created by using a border-bottom on the parent div. .element_style{ width ...
I am looking to utilize swig (my chosen templating engine) for incorporating JavaScript code that will only display when the user selects the 'other' option from the select menu. <div class="form-group"> <select class="custom-select"&g ...
Here is the function I've created for the onchange event: This is my Javascript code: function optionsModel() { var x = document.getElementById("model"); var option = document.createElement("option"); var makeValue = documen ...
My current project involves building a website using three.js with typescript. However, I am facing an issue where only the header from my index.html file is displayed when I try to load the website onto a local server. The main problem arises when I atte ...
Is there a way to modify the Bootstrap 5 carousel to display approximately 3 items (cards) per slide on desktop/laptop screens, but only 1 item on smaller devices (768px or less)? Currently, the items are stacking on top of each other instead of appearing ...
I'm encountering an issue on IOS 8.3 where I click a checkbox and the arrow color should be green, but it shows up as black instead. Is there a bug fix for this in IOS or is it simply not supported? Here is my SASS/css code: input[type="checkbox"] ...
I am having a column in my table with lengthy text that requires scrolling to see the end. Is there a way to adjust the content to fit within a fixed-width cell? Here is the UI setup for the GridView: <asp:GridView ID="GridView1" runat="server" OnPag ...
When I select the "12 hour" radio button, the drop-down values change to 1 am - 12 am and 1 pm - 12 pm. If I select 24 hours, then the values change to 1-24. Below is my code: <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> ...
I'm looking for some guidance on JavaScript and CSS. Is there a way to create a popup box where users can input a color (any main primary color recognized by CSS) and then have the background color of the page change accordingly in an external styles ...
After some investigation, I have observed a discrepancy between two expressions that I thought should return the same length (refer to the console output): var cssSelector = $('#target').siblings('table > tbody > tr > td') ...
I recently implemented a More/Less toggle button using resources from this website. The functionality is there, but I now want to add a smooth transition effect. When the user clicks on "read more," I would like the hidden content to gradually appear, and ...
I recently started learning Ruby on Rails and encountered an issue with resizing images using CSS. After replacing an image field with the Ruby image_tag, I noticed extra blank space below the image. Upon inspecting the element, I found two tags for the s ...
<div id="page1" data-role="page"> <div data-role="header" data-position="fixed" align="center"><img src="img/VAWE-long-300x30-transparent.png" width="300" height="30" alt="" /></div> <div data-role="content" style="margin ...
When a user forgets their password, I would like to send them an email with a link to a page where they can reset it. What is the best way to structure this link? Should I include the username as a parameter in the URL, and if so, how can I ensure that t ...
Is it possible to connect between an HTML file and a jQuery file? Here is an example scenario: jquery-test.js: $(document).ready(function(){ $('#inputForm').submit(function(){ $('#inputForm :text:not("#submit")').each(func ...