Unable to get Flexbox 'align-items: center' to work on Chrome beta browser

In the scenario presented below, all modern web browsers that support flexbox display the page as intended.

Check out the jsfiddle example here.

Thanks to the align-items: center; property, the three colored blocks are evenly spaced within the section element:

https://i.sstatic.net/yHvoR.jpg

However, in the most recent versions of Chrome Beta (54) and Canary (55), the layout appears differently:

https://i.sstatic.net/jWDBi.jpg

Is this change in behavior regarding align-items expected in future Chrome updates? Or is it a potential bug...

UPDATE

Michael_B's explanation clarifies the distinction between align-items and align-content within this particular design. Refer to his updated jsfiddle for testing purposes.

Even with the correct implementation of flexbox properties, Chrome Beta and Canary still fail to render the layout correctly:

https://i.sstatic.net/0eVY0.jpg

htmlcssgoogle-chromeflexbox

Answer №1

To achieve the layout demonstrated above, it is best to utilize the align-content: space-around property (view demo).

When working with a multi-line flex container, the most suitable property to use is align-content.

As stated in the specification:

8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

It's important to note that this property does not impact a single-line flex container.

Only multi-line flex containers have additional space in the cross-axis for lines to be aligned, as opposed to single-line flex containers where the sole line automatically stretches to fill the available space.

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

Modify background color when a column is clicked in a dynamically filled table

I'm in the process of dynamically generating an HTML table as shown below: for (var i = 0; i < rowsToAdd; i++) { var tr = table.insertRow(-1); var colsToAddLength = findColsToAddLength(); for (var j = 0; j < colsToAddLength; j++) { ...

javascripthtml

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...

javascriptjqueryhtmlcss

What is the best way to incorporate the :after pseudo-element in JavaScript code

HTML: This is my current code snippet <div class="one"> Apple </div> I am looking to dynamically add the word "juice" using JavaScript with the .style property. Is there an equivalent of :: after in CSS, where I can set the content in JavaS ...

javascripthtml

Align two containers centrally using absolute positioning inside a division

I am looking for a way to centrally align two "boxes" within a div using CSS. These boxes are positioned absolutely. For reference, here is the JSFiddle link: http://jsfiddle.net/p4sA3/8/ Is there a method to achieve this alignment without specifying spe ...

csshtmlcenter

Using a CSS style to modify a class based on another class at the same level in the hierarchy

I am working with a jQuery carousel that is adding an 'active' class to images within a div. Within the same div, there is also a span with a 'fade' class that has a CSS style of opacity: 0. Is there a way to change the CSS style of the ...

javascriptjquerycss

Trouble accessing Chrome using Selenium webdriver due to lack of internet connection

Currently, I am utilizing Selenium WebDriver to initiate Chrome and execute scripts that navigate to a specific URL. Interestingly, when I run the script on any other machine, it successfully opens the Chrome browser and directs to the assigned URL. Howev ...

google-chromeselenium-webdriverselenium-chromedriver

Navigating a collection of objects in JavaScript: A step-by-step guide

My data consists of objects in an array with the following structure: [{\"user\":\"mcnewsmcfc\",\"num\":11},{\"user\":\"ManCityFNH\",\"num\":7}]; To clean up the array, I'm using this code: ...

javascripthtmlarrays

Eliminating padding or margin for figures in Bootstrap on smaller screens

I've been struggling to create a fullscreen image on small devices without any margin or padding. Unfortunately, the solutions suggested in this thread didn't work for me. Below is the code I'm currently using (tested on https://jsfiddle.n ...

htmlcssbootstrap-4

What is the best way to reduce the spacing between text?

I am trying to figure out how to reduce the spacing between my text so that it aligns like the example below. Take a look at the text "Welcome to my portfolio". Currently, when I run my code, there is a large gap between "Welcome to my" and "Portfolio". ...

htmlcss

Controlling File Upload Edits: A Guide to Effective Management

I am facing an issue on my product page related to adding and updating products in the database. The problem lies with images not displaying correctly. During the product insertion process, everything works fine. In my aspx page, I have the following code ...

c#asp.netajaxhtmlfile-upload

Exploring how Bootstrap 4 can manage flex-wrapped images that overflow into the previous column

In my design, I am requesting a left column that features a larger image and a right column displaying a wrapped list of smaller thumbnails. One issue I am encountering is that when I resize the window to be smaller, the thumbnails end up overflowing int ...

imagebootstrap-4flexbox

Getting checkbox data into a textarea and storing textarea data in a variable

I need to display checkbox data in a textarea and then retrieve the edited data from the textarea using scope. The goal is to display checkbox data in the textarea, allow for editing, and then capture the updated data in {{newer}}. I have successfully inc ...

javascripthtmlangularjsforms

Encountering the issue "Error: Uncaught PDOException - SQLSTATE[42000] - Syntax error or access violation: 1064"

I encountered an error that says: Uncaught PDOException: SQLSTATE[42000]: Syntax error or access violation: 1064. It seems to be a syntax error in my SQL statement. Can you help me figure out what's wrong with it? require_once "dbconnect.inc.php"; $e ...

phphtml

How can I center align all images using Bootstrap?

My current grid images are aligned in a specific way. https://i.sstatic.net/RmNE9.png However, I aim to adjust the grid images to look like this, specifically focusing on centering "img 1". How can I achieve this? https://i.sstatic.net/frNvp.png HTML ...

htmlcssbootstrap-4

Design a section with a blue background for better form organization

I am striving to develop a section similar to this: enter image description here. It will be an area where users can input information for authentication or create an account. I have already crafted a PHP form connected to my database as shown below: <f ...

javascriptphpcssformsbootstrap-4

What is the proper way to incorporate isset($_POST['id'.$var]) into a loop structure?

I am currently working on a project where I need to create multiple fields for users to comment on. In order to achieve this, I have implemented a while loop that generates the following HTML code for the text inputs: <form name = "replyform" method = ...

phphtmlmysql

Trouble accessing Login.html page

Working on a web server project for my job has been both challenging and rewarding. One recurring issue I have encountered is with the login page not redirecting me to the main page and failing to accept the username or password. The codebase was originall ...

javascriptpythonhtmlubuntu-serverbootstrap-5

Tips for creating a dynamic inner DIV that follows the scroll position of an outer DIV without relying on a fixed width

I have created a series of DIV elements to represent a chart. The key element is everything enclosed within the "rightPanel" section in the following code snippet. The "topPanel" section has an absolute position, and its top value (top: 0px) needs to be a ...

jquerycsshtmlscroll

I am having issues with this knob not updating, and the reason for this problem is unknown to me

Within my PHP code, I am utilizing the following: <?php @include_once('fields.php'); $gg = fetchinfo("val","inf","n","current"); $mm = fetchinfo("val","info","n","max"); $cc = fetchinfo("num","games","id",$gg); $percent = $cc / $mm * 100; ...

javascriptphphtml

Retrieve the div element using the jQuery selector for both the id and class

This is the structure I have set up: <div id="list_articles"> <div id="article"> <label>Select:</label><input type="checkbox" class="checked_art" id="1001" /> <div id="hide" style="display:none;" class="1001"> ...

jqueryclasshtmlshow