Is there a distinction between the values 'normal' and 'stretch' in the CSS property known as 'align-content'?

When it comes to the CSS declaration 'align-content', the default value is 'normal'. But, there is also another option: 'stretch'. I have been having a hard time figuring out if there is any actual difference between the two. Is it possible that they are essentially the same thing, with one just being outdated?

To investigate further, I decided to tinker around with the Inspector tool in Chrome on a practice website that I created using HTML and CSS. Surprisingly, I found that toggling between 'normal' and 'stretch' had absolutely no impact on the overall appearance of the site.

css flexbox

Answer №1

Here are the definitions from MDN:

align-content: normal: Items are packed in their default position as if no align-content value was set

align-content: stretch: If the combined size of items along the cross axis is less than the alignment container size, any auto-sized items will have their size increased equally (not proportionally), ensuring the combined size exactly fills the alignment container along the cross axis.

It seems that in most cases, the 'normal' and 'stretch' values work similarly in browsers. The main difference is that with stretch, 'auto'-sized items will fill the container.

You can also find more information here and here on CSS_Tricks

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

Disrupting Alignment Due to Input Tag

Hey there, I'm having an issue with my header design. I have a horizontal list of links in my header, and next to them, I wanted to add a search bar. Unfortunately, when I added the search bar next to the links, they all ended up appearing behind my b ...

html css

Animation of lava effect in Angular 7

I have a unique Angular 7 application featuring a homepage with a prominent colored block at the top, along with a header and various images. My goal is to incorporate lava effect animations into the background similar to this CodePen example. If the link ...

css angular typescript angular-animations

Looking for a way to prevent a div element from scrolling in JQuery Mobile?

Here is my implementation: http://jsfiddle.net/coderslay/Lhb5Y/ I have content structured like this: <div data-role="content"> <div></div> <div><ul>.....</ ...

jquery html css jquery-mobile

Problem with CSS layout on Internet Explorer 9

I've encountered some layout difficulties in IE9 and I'm struggling to identify the root of the problem. Even though I'm using Foundation 5, I don't believe that's the issue. The content is within a Foundation grid set at large-12 ...

html css internet-explorer

The collapsed form-control is adjusting its attributes while resizing

Having trouble with a website design featuring a collapsed window and menu items, but the search bar is not displaying correctly? In image 3, you can see that the style of the search bar changes when the width exceeds a certain limit. I've tried vario ...

html css twitter-bootstrap user-interface twitter-bootstrap-3

`Set the body height to equal that of the entire document`

Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...

css height

Suggestions for creating a simple implementation of a 3 x 3 cell layout with a large center using flexbox are

Creating a grid layout like this 3 x 3 cell with large center using CSS Grid is quite straightforward. .container { display: grid; grid-template-columns: 60px 1fr 60px; grid-template-rows: 60px 1fr 60px; } But what if we wanted to achieve the same ...

css flexbox

Update overall font size to be 62% for a consistent look across the website

Recently, I developed a browser extension that adds an overlay button to the LinkedIn website. Everything was running smoothly until I discovered that LinkedIn uses a global font-size: 62,5% that completely messes up my design.. https://i.stack.imgur.com ...

javascript css material-ui

What does the term "root element" refer to in the Material-UI documentation?

I am finding the terminology used in material ui confusing and would appreciate if someone could clarify it for me. For example, let's consider this information from https://material-ui.com/guides/api/: Spread Undocumented properties supplied ar ...

html css reactjs material-ui

line of checkboxes aligned horizontally with the help of Bootstrap

My goal is to create a horizontal row of checkboxes within a form. I've been able to achieve a functional but unattractive version by using the following code: div.form-group(ng-show = 'avariable') label 1 input(type = 'checkbo ...

html css twitter-bootstrap checkbox

Ways to automatically adjust the margins of my HTML body page

I'm currently working on a school project to develop a website. The challenge I'm facing is customizing the navbar and header background colors in such a way that they extend seamlessly to the end of the page. Despite my efforts, there seems to b ...

html css border

"Customizing a footer to resemble a bootstrap nav-bar: A step-by-step guide

My situation involves the need to have a footer that functions similarly to a navbar. I want to be able to hide the list items of a ul list by clicking on a custom button, similar to the functionality of the bootstrap hamburger menu. Is it possible to use ...

html css twitter-bootstrap twitter-bootstrap-3 css-transitions

How can I make an HTML textbox in C# MVC flash a background color for one second using TextBoxFor?

I'm currently working with MVC and have the following code in my razor view. @Html.TextBoxFor(x => model.DateTimeStamp, new { @readonly = "readonly", @class=ViewBag.IsLatest ? "latest":""}) I want to briefly change the background color of this te ...

asp.net-mvc css razor

Creating a fully responsive HTML page with a fullscreen image background

Seeking help from someone who can assist me. I have a challenge in creating a webpage with a background image that fills its <div>. Here is the code I used: <style type="text/css> .myclassdiv { background-image:url('IMAGEURL') ...

html css responsive-design

Display a dropdown menu when clicking on a close button in a single element using Vanilla JavaScript

I'm currently in the process of learning Javascript and trying to grasp the concept of events and selectors. My aim is to have a close button that, when clicked, triggers a specific dropdown related to the card it's attached to. I plan to achie ...

javascript html css

What steps do I need to take to create a custom image for a website?

I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...

javascript css html

Preventing default CSS styles in ASP.NET: A step-by-step guide

When working with multiple CSS files for different themes, I noticed that the Login Page is calling one extra CSS file. However, during runtime, some classes from the default CSS are still being used. How can I resolve this issue? ...

asp.net css

What are some best practices for implementing responsive design using CSS @media queries with makeStyles in React.js Material UI?

const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) } })); I ...

javascript html css reactjs material-ui

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascript css webpack sass

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

html css

CSSer Q&A