How can I arrange items in rows with equal space between them, without a large gap in the last row?
<div fxFlex="row wrap" fxLayoutAlign="space-around">
<my-item *ngFor="let item of items"></my-item>
</div>
Current Issue:
https://i.stack.imgur.com/YRAH0.png
I want the same "space-between" layout for the items in the last row as in the other rows. https://i.stack.imgur.com/BN2hn.png
If you want to quickly find what you need, try adding an empty element following the last visible one:
<!-- These are your last 3 boxes -->
<div class="gray-box">
(content goes here)
</div>
<div class="gray-box">
(content goes here)
</div>
<div class="gray-box">
(content goes here)
</div>
<!-- Add an empty box with opacity: 0-->
<div class="gray-box transparent"></div>
If you prefer not using flexbox, consider using display: grid, as it allows for more precise grid size definitions:
display: grid;
grid-template-columns: repeat(4, 25%);
grid-gap: /* gap between your items */
Utilize "filler" elements to maintain the structure of your list. Include 3 invisible elements at the end of the list to ensure proper sizing and spacing when rows break.
const addButton = document.getElementsByClassName('add');
// referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
const addElement = () => {
const newListItem = document.createElement('li');
newListItem.textContent = 'new flexible child';
const position = document.querySelector('li.filler');
position.parentNode.insertBefore(newListItem, position.previousElementSibling.nextSibling);
}
addButton[0].addEventListener('click', addElement);body {
display: flex;
}
ul {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 0;
flex: 1;
}
ul>li {
flex: 0 1 24%;
background: #ccc;
display: block;
height: 40px;
margin-bottom: 20px;
}
ul>li.filler {
height: 0;
padding: 0;
}
button {
background: #333;
color: white;
border: none;
padding: 5px;
flex: 0 0 100px;
height: 100px;
margin: 10px;
}<button class="add">Click here to add children</button>
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li class="filler"></li>
<li class="filler"></li>
<li class="filler"></li>
</ul>Assuming the structure of your HTML and CSS looks something like this:
.container {
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box {
background: lightgray;
width: 200px;
height: 100px;
border: 1px solid black;
}<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>To maintain consistent spacing around each element, you can add margins and adjust the justify-content property to either center or flex-start based on your layout preferences.
.container {
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
background: lightgray;
width: 200px;
height: 100px;
border: 1px solid black;
margin: 0 20px;
}<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>I am a student developer working with the Angular platform. I have my own API and a post method that looks like this: [HttpPost] [Route("login")] public async Task<ActionResult<User>> LoginUser([FromBody] User _user) { var joinedUser = _co ...
Is it possible for a (single-page) website to instruct a user's browser to save the entire page locally? To provide some background: I am running a website on a server that bills based on bandwidth usage. Since the content of the site remains mostly ...
Given the advice against directly accessing the DOM in Angular for various platforms, I am trying to figure out how to achieve the following using Renderer: a) Store the offsetLeft value of $event.target in a variable called left. b) Create a text node wi ...
Details: npm version: 3.10.10 and nodejs version: 6.11.1 I am in the process of setting up a .NET project with an angular web API but am encountering unmet dependencies: "unmet peer dependency @angular/[email protected] and @angular/[email prote ...
Ever since I removed Fiddler, I've been encountering issues with using Angular and npm, specifically related to proxy errors. When attempting an http call with Angular, I receive the following error: [HPM] Error occurred while trying to proxy reque ...
1: In my database I have a hierarchical table of categories: 2: I created a PHP script to convert this table into HTML: 3: The resulting HTML code is as follows: <script> function toggleSubCategories(button) { ...
I'm attempting to extract the price of a flight from Google Flights website using Selenium, but I am unable to locate the specific element on the page. Even after scraping the entire page, the element remains elusive. It has been suggested that it may ...
I'm having trouble allowing users to both view and download files on a web page. I've tried setting headers and using JavaScript, but can't seem to get it right. My goal is to have an HTML page with two links for each file - one to open in ...
I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...
I have encountered a question regarding the use of a custom email template in broadleaf. It seems that I am unable to apply an external CSS file and can only use inline styles. Is this normal behavior, or am I missing something? Below is how I am attempti ...
Hello, I am currently working on integrating a captcha image into a Bootstrap 4 form as an input group item. It is functioning correctly, but there is an issue with a border around the image causing the input field to appear larger than the others. Below i ...
I've encountered an intriguing scenario. In my application, there's a feature that triggers a new window/tab to open when a button is clicked. Upon opening, a predefined HTML page is shown to the user with a specific URL set. I'm curious abo ...
I have implemented the primeNg module from primefaces in Angular 2 to create a timepicker. It seems to be working, but the design appears broken. Is there something else I need to add to correct the design? Below are the versions of the packages I used: P ...
Check out the following link: Within this section of code: //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td, there is a piece of text Mottled Boar slain (10) //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td/a This part contains only: Mo ...
Wondering how to achieve this specific effect within a div using CSS? click here for visual reference I attempted it using the before and after elements, but I struggle with these tags: check out this image for details Apologies if my question is unclear ...
I'm currently experiencing some difficulties when embedding HTML into VBA to send an email. The formatting is not appearing as intended, and I've been experimenting with different options. My first concern is regarding the font size displayed in ...
Is there a method for my node module, created from an Angular 5 application, to access the environment variable from the Angular 5 application (environments/environment.ts)? Perhaps Angular 5 exports its environment variables to JavaScript global variables ...
I've been struggling with this issue for quite some time. Here is the challenge at hand: I am in the process of developing a library to streamline AJAX calls and neatly display error messages directly within a form. The dilemma: Whenever the messag ...
Is there a way to apply multiple background colors to a material UI snackbar? I attempted using linear-gradient as shown below, but it didn't work. import Snackbar from 'material-ui/Snackbar'; const bodyStyle = { border: `2px solid ${co ...
Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...