Chrome mobile's justify-content for space-evenly is malfunctioning

Experiencing an issue with the space-evenly value for justify-content on Chrome mobile, while it functions correctly on Desktop and Firefox mobile.

A minimal example can be seen here: Example

Having a flex container in a row direction aiming to evenly space elements, as expected with space-evenly. Despite working on desktop, Chrome mobile (version 59 on Android) aligns elements to the left. See the comparison here: Comparison

center and space-around values function properly, but the preference is to utilize space-evenly or an equivalent (maintaining the flex-wrap: wrap behavior).

Below is the HTML:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

CSS Code:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background: lightgrey;
}

.element {
  margin: 8px;
  width: 42px;
  height: 42px;
  background: black;
}

Thank you in advance!

htmlcssflexbox

Answer №1

Currently, there is no solution available for multi-line/wrapped space-evenly in browsers that do not support it.

One workaround when using flex-wrap: wrap is to set a fixed padding on the flex container, margin on the items, or utilize a script.

If wrapping each row is an option, you can use pseudo elements along with space-between to achieve the same effect as space-evenly.

In the following example, by taking into account the zero width of the pseudo elements, space-between can produce the desired result:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  /* align-items: flex-start;        if "img", this will prevent it from stretching  */
  background: lightgrey;
}

.element {
  margin: 8px;
  width: 42px;
  height: 42px;
  background: black;
}

.container::before,
.container::after {
  content: '';
}
<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer №2

Update This appears to be a workaround specifically for one row only

To achieve space-evenly appearance, you can use margins and possibly a pseudo element.

.container {
  display:flex;
}
.element,.container:before  {
  border:solid;
  margin:0 auto 0 0;
  padding:1em;
}
.container:before {
  content:'';
  border:none;
  padding:0;
}
<div class="container">
  <div class="element">11</div>
  <div class="element">2 </div>
  <div class="element">3333</div>
  <div class="element">444</div>
</div>

or nth-child as recommended by @IlyaStreltsyn

You can also accomplish this without a pseudo element: 

.element:first-child { margin: 0 auto; }

Answer №3

Experiment with various options for the

flex-direction:

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

Building a Loading Bar with Two Images Using JavaScript and CSS

I am currently experimenting with creating a progress bar using two images: one in greyscale and the other colored. My goal is to place these two divs next to each other and then adjust their x-position and width dynamically. However, I'm having troub ...

javascripthtmlcss

The PHP header redirect to "url.php" fails to function correctly on GoDaddy's hosting platform

Hello everyone, I am facing an issue with the header ("Location: url.php") in PHP. I wrote the code using Macromedia Dreamweaver MX 2004. Everything works fine on my localhost server, but when I upload it to the godaddy server, the redirection gets stuck o ...

javascriptphphtmlsessionheader

Change the color of unordered list items only at the same level

Hey there! I'm working with this HTML code: <ul id="nav" class="nav-1"> <li><a href="#">Loans</a></li> <li><a href="#">Bancassurance</a> <ul class="nav-2"> <li><a href="#"&g ...

htmlcss

Unable to apply text decoration to a floating element

Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...

htmlcsscss-floattext-decorations

What could be causing some Fontawesome icons to not display properly?

My index.html is set up correctly with my kit, but I'm having some issues. <script src="https://kit.fontawesome.com/a*******5.js" crossorigin="anonymous"></script> While some icons are showing up just fine, others are ...

htmlcssicons

What new features have they incorporated into the latest Foxy Bingo website?

Foxy Bingo has recently unveiled a new website at www.foxybingo.com that operates as a single-page site, allowing users to click on main menu items to navigate through the content by scrolling down the page. Interestingly, when a link is clicked, the URL ...

javascriptjqueryhtml

The search query highlighted in pagination takes us to page 2

I am currently facing an issue with a search function that provides paginated results. The result I receive is correct, but the problem arises when the highlighted page defaults to page 2 instead of page 1 upon clicking the search button. Despite trying ...

phphtmlpagination

Ways to avoid grid items from overlapping with continuous text

import React from 'react'; import './style.css'; import Container from '@mui/material/Container'; //import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2 import Grid from '@mui/material/Grid'; ...

cssreactjsmaterial-ui

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

jquerycsshtmltwitter-bootstrapparallax

Having difficulty in setting items to a relative position in order to align them properly

I am struggling to align two div items next to each other using Bootstrap. This is for a product detail view where I want the image on the left and text on the right. It's a product detail page for an ecommerce site that I'm trying to create. May ...

javascripthtmlcssbootstrap-5

Loading dynamically generated div content using AJAX with additional hyperlinks to various files has posed the question of how to seamlessly integrate the content of these links into the original div container

Issue: I am facing a challenge with my webpage setup. The main.jsp page contains a header, left panel, and content divs. When a link in the left panel is clicked, I use a JavaScript Ajax call to populate the content div with new information. This content a ...

javascriptajaxhtmldynamicloading

Ways to access the HTML file displayed in the FireFox new tab interface

After opening a new tab in Firefox, I stumbled upon an HTML file that I had believed to be lost after overwriting it on my server. Surprisingly, it's nowhere to be found in my home folder. How can I retrieve it without risking clicking on it and poten ...

htmlfilefirefoxcaching

Flex dimensions causing design elements to break in React Native

When using both import {dimension} from 'react-native' and flex:1 in a CSS style, the design may break on certain devices, especially when there is an input field present in the JavaScript. This issue is unexpected as CSS should typically be stra ...

javascriptcssreactjsreact-native

CSS query: How to eliminate the extra space at the top of a webpage?

How can I eliminate the gray area visible here: The padding in style.css is currently set to: padding: 0; I have attempted to modify this by changing the following: #page { margin-top: 0; } I have tried variations such as: #page { margin-top: 5px !im ...

cssmargin

Image cannot be shown due to unknown URL scheme in Angular

I am currently working on an Angular application and I am facing an issue with displaying images on my website. When I check the console, I see the following error messages: unsafe:url(http://local.api.test.come/Uploads/af21cb1b-066c-48c6-b6d6-0116a133810 ...

htmlangularurlsrc

Invalid template detected within the Kendo dropdown component

I am trying to create a template that will only be displayed if the data value is "Low". This is how I have set up my template column: template: '# if( data=="Low" ){#<span><i class="fa fa-square blue"></i> <span># } ' U ...

javascriptjquerycssangularjskendo-ui

What causes the misplacement of my @section with parameters in Laravel?

I have two PHP files named home.blade.php and customer.blade.php. My goal is to create an HTML table page with 20 rows of customer data. The table data will be fetched from the Customer model. The layout should resemble the following structure: <body> ...

phphtmllaravel

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

javascriptjqueryhtmlcss

Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

My project follows a consistent CSS theme, but the node's CSS style doesn't match. I'm looking to adjust the label colors in the CSS based on whether it's day mode or night mode. How can I accomplish this? this.cy = cytoscape({ con ...

cssangulartypescriptclasscytoscape.js

Separating text for tooltips from the element itself

I'm looking to enhance my website by adding tooltip descriptions to elements based on their CSS classes. While tooltips are usually added using the element's title attribute, I have numerous elements with the same lengthy description and want to ...

javascriptjqueryhtmlcsstooltip