This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
What are the differences between flex-basis and width?
(6 answers)
Closed 4 years ago.
Given the following code:
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}
<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>
The right container will grow to be 300px high, despite the flex-grow property being set to 0. How do I prevent this from happening? I.E., I want the right container to only be as tall as its content.
Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo
Add align-self: flex-start on the .right-container
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}
<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>
Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.
The align-items property will align the items on the cross axis. The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default.
MDN - Concepts of Flexbox
That is why you need to override either align-items on your .outer-container or align-self to the flex children.
Related
I have three elements I'm trying to align in my layout.
First, I have a div for feedback, and then a search input, and then a div element for suggestions.
I want the first and last element to have a width of 20%, and the search input to have a width of 60%. Using Flexbox I achieve what I want.
But there's a feature that grows all the divs to the highest element. This means that when search results pop up, the feedback and suggestion elements grow in height with the search div resulting in a messed up layout.
Is there a trick to not grow the divs with the highest element? Just make the divs (#feedback and #suggestions) have the height of the content in them?
#container_add_movies {
display: flex;
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>
Feedback
</div>
<div id='search'>
Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>
</div>
<div id='suggestions'>
Suggestions
</div>
</div>
http://codepen.io/alucardu/pen/PPjRzY
You're encountering the flex equal height columns feature.
An initial setting of a flex container is align-items: stretch.
This means that flex items automatically expand the full length of the cross axis of the container. In a row-direction container, the cross axis is vertical (height).
The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.
To override this default setting, add align-items: flex-start to the flex container:
#container_add_movies {
display: flex;
align-items: flex-start;
}
#container_add_movies {
display: flex;
align-items: flex-start; /* NEW */
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
display: block;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
... or align-self: flex-start to the flex items:
#feedback {
align-self: flex-start;
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start;
width: 20%;
background-color: yellow;
}
#container_add_movies {
display: flex;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#feedback {
align-self: flex-start; /* NEW */
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start; /* NEW */
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
align-items sets the default value of align-self. With align-self you can override the default on individual items.
More details in the spec:
8.3. Cross-axis Alignment: the align-items and align-self
properties
Flex items can be aligned in the cross axis of the current line of the
flex container, similar to justify-content but in the perpendicular
direction.
align-items sets the default alignment for all of the flex
container’s items, including anonymous flex items.
align-self allows this default alignment to be overridden for
individual flex items.
A bit of history
Since the beginnings of CSS, there have been two layout challenges that have regularly frustrated, perplexed, and annoyed front-end developers:
How to center things, especially vertically, and
How to create equal height columns (tables aside)
Today, with the advent of flexbox, these problems are over.
Centering things has never been easier:
#container {
display: flex;
justify-content: center; /* center flex items along the main axis */
align-items: center; /* center flex items along the cross axis */
}
Simple. Easy. Efficient. The craziness is over.
In terms of equal height columns, flexbox also excels: It does this by default.
#container {
display: flex;
flex-direction: row; /* not even necessary; default rule */
align-items: stretch; /* not even necessary; default rule */
}
The align-items: stretch rule tells flex items to expand along the cross-axis as much as possible. Hence, in a row-direction container all items can be equal height. More craziness tamed by flexbox.
From one popular answer for equal height columns:
Give overflow: hidden to the container and large (and equal)
negative margin and positive padding to columns. Note that this
method has some problems, e.g. anchor links won't work within your
layout.
Now that's a hack!
The pendulum is now beginning to swing the other way: Designers are asking how to TURN OFF equal height columns.
You can add align-items: flex-start to your #container_add_movies. Here's an example
to have the unequal columns in bootstrap 4, first of all it needs to know how it is making it equal heights of the columns,so the reason is the
align-items: stretch
to remove this property it need to add align-items: flex-start so for this I have added the class="align-items-start" and the issue is fixed,
Setting the child element that was causing the problem to flex:none did the trick for me.
I'm really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don't know how applicable the documentation for the equivalent properties in Flex-box is to grid.
So, I've tried referencing https://css-tricks.com/snippets/css/complete-guide-grid/, which defines them as follows:
justify-items - Aligns the content inside a grid item along the row axis
justify-content - This property aligns the grid along the row axis
justify-self - Aligns the content inside a grid item along the row axis
But I still don't understand what the difference between them is. So, I have 3 questions I want to clarify.
Is the justify-items property in Flex-box the same as the
justify-items property in Grid? or are they different somehow?
(In other words, can I reuse Flex-box documentation for Grid)
What do (justify-)content, self and items do?
How are (justify-)content, self and items different?
Any clarification would be greatly appreciated.
Edit: Since everyone keeps giving me Flex-box resources, I am asking about css-grid, NOT flex-box.
To answer your questions:
1
As reiallenramos mentioned, "The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property." - MDN
2-3
This screen shot from W3 does an excellent job of showing what they do and the differences between them.
Good To Knows:
For more information and example, I would suggest you check out:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
https://www.smashingmagazine.com/2017/12/grid-inspector/
And for some inspiration:
https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/
Key differences between justify-content, justify-items and justify-self in CSS Grid:
The justify-content property controls the alignment of grid columns. It is set on the grid container. It does not apply to or control the alignment of grid items.
The justify-items property controls the alignment of grid items. It is set on the grid container.
The justify-self property overrides justify-items on individual items. It is set on grid items and inherits the value of justify-items, by default.
Example
Here's a 2x3 grid.
2 columns, each 100px wide
3 rows, each 50px tall
The container is:
500px wide
250px tall
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
width: 500px;
height: 250px;
grid-template-areas: " one two"
" three four"
" five six ";
}
.box:nth-child(1) { grid-area: one; }
.box:nth-child(2) { grid-area: two; }
.box:nth-child(3) { grid-area: three; }
.box:nth-child(4) { grid-area: four; }
.box:nth-child(5) { grid-area: five; }
.box:nth-child(6) { grid-area: six; }
/* non-essential decorative styles */
body {
display: flex;
justify-content: center;
}
.container {
background-color: #ddd;
border: 1px solid #aaa;
}
.box {
background-color: lightgreen;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
<div class="box"><span>6</span></div>
</div>
justify-content
The justify-content property aligns columns within the container.
.container {
justify-content: space-between;
}
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
width: 500px;
height: 250px;
grid-template-areas: " one two"
" three four"
" five six ";
}
.box:nth-child(1) { grid-area: one; }
.box:nth-child(2) { grid-area: two; }
.box:nth-child(3) { grid-area: three; }
.box:nth-child(4) { grid-area: four; }
.box:nth-child(5) { grid-area: five; }
.box:nth-child(6) { grid-area: six; }
/* non-essential decorative styles */
body {
display: flex;
justify-content: center;
}
.container {
background-color: #ddd;
border: 1px solid #aaa;
}
.box {
background-color: lightgreen;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
<div class="box"><span>6</span></div>
</div>
With justify-content: space-between both columns are pinned to the edges. The grid items shift only because they exist inside those columns. They are otherwise unaffected.
Note that this property works only when there is free space in the container. If any of the columns were sized with fr, then all free space would be consumed, and justify-content would have no effect.
justify-items
The justify-items property aligns grid items within their tracks (not the entire container)
.container {
justify-items: center;
}
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
width: 500px;
height: 250px;
grid-template-areas: " one two"
" three four"
" five six ";
}
.box:nth-child(1) { grid-area: one; }
.box:nth-child(2) { grid-area: two; }
.box:nth-child(3) { grid-area: three; }
.box:nth-child(4) { grid-area: four; }
.box:nth-child(5) { grid-area: five; }
.box:nth-child(6) { grid-area: six; }
/* non-essential decorative styles */
body {
display: flex;
justify-content: center;
}
.container {
background-color: #ddd;
border: 1px solid #aaa;
}
.box {
background-color: lightgreen;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
<div class="box"><span>6</span></div>
</div>
With justify-items: center the grid items are centered within their columns.
justify-self
The justify-self property overrides justify-items on individual items.
.container { justify-items: center;}
.box:nth-child(2) { justify-self: start; }
.box:nth-child(3) { justify-self: end; }
.box:nth-child(6) { justify-self: stretch; }
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
width: 500px;
height: 250px;
grid-template-areas: " one two"
" three four"
" five six ";
}
.box:nth-child(1) { grid-area: one; }
.box:nth-child(2) { grid-area: two; }
.box:nth-child(3) { grid-area: three; }
.box:nth-child(4) { grid-area: four; }
.box:nth-child(5) { grid-area: five; }
.box:nth-child(6) { grid-area: six; }
/* non-essential decorative styles */
body {
display: flex;
justify-content: center;
}
.container {
background-color: #ddd;
border: 1px solid #aaa;
}
.box {
background-color: lightgreen;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
<div class="box"><span>6</span></div>
</div>
align-content, align-items and align-self
These properties do the same as their justify-* counterparts, but in the perpendicular direction.
More here: What is the difference between align-items vs. align-content in Grid Layout?
Spec Reference
10.3. Row-axis Alignment: the justify-self and justify-items
properties
Grid items can be aligned in the inline dimension by using the
justify-self property on the grid item or justify-items property
on the grid container.
10.4. Column-axis Alignment: the align-self and align-items
properties
Grid items can also be aligned in the block dimension (perpendicular
to the inline dimension) by using the align-self property on the
grid item or align-items property on the grid container.
10.5. Aligning the Grid: the justify-content and align-content
properties
If the grid’s outer edges do not correspond to the grid container’s
content edges (for example, if no columns are flex-sized), the grid
tracks are aligned within the content box according to the
justify-content and align-content properties on the grid
container.
(emphasis added)
CSS Box Alignment Module
You wrote:
Is the justify-items property in Flex-box the same as the justify-items property in Grid?
Although the Flex and Grid specs provide their own definitions for keyword alignment properties, such as justify-items and align-content, the W3C is in the process of phasing out alignment properties for individual box models and implementing their new Box Alignment Module, which seeks to define a set of alignment properties for use across all box models.
From the flexbox spec:
1.2. Module
interactions
The CSS Box Alignment Module extends and supercedes the definitions of
the alignment properties (justify-content, align-items,
align-self, align-content) introduced here.
There are similar references in the Grid spec.
OK, I think I figured it out thanks to Michael_B. My confusion came from the fact that sometimes different properties would randomly not change anything about the layout of the grid.
justify-content allows you to position the grid within it's grid container. This is why the justify-content property will have no effect if the grid-container is the same size as the grid. (Which is always the case if you use fr units). This is also why it can have the values: space-around, space-between and space-evenly (In addition to start, end, centre and stretch), which will break up the grid and place the grid items within the grid container. This is a property of the grid container.
justify-items allows you to set a default position for content placed in the grid's grid items (A grid item being a box in the grid, as defined in Michael_B's post). This is a property of the grid container.
justify-self allows you to override the default position of content in an individual cell. This will override the position set by justify-items. Hence, if you use justify-self on all children of the container, setting justify-items on the grid container will have no effect. This is a property of the content inside a grid item.
Note: If you make a grid-item a grid itself, (In other words, the content inside a grid item is a grid) then you can position it within the outer grid item using either the justify-self property or the justify-content property on the inner grid's grid container, since the inner-grid's grid container is one of the outer grid's grid items's content.
As you might expect, all of this also applies to the align-* properties.
Please correct me if I got anything wrong
justify-content is used to position the entire grid along the row/inline axis of the grid container when the total size of the grid items is less than the grid container.
justify-items is used on a grid container and is used to determine how grid items are spread out along a row by setting the default justify-self property for all child boxes.
justify-self is used to set how an individual grid item positions itself along the row/inline axis. Grid items inherit the value of the justify-items property on the container by default, so if the justify-self value is set, it would override the inherited justify-items value.
Source: Codecademy CSS Grid cheatsheet
This question already has answers here:
How to align groups of buttons on single row with Flex only?
(2 answers)
How to Center and Right-align on a row with CSS Flex only
(3 answers)
Closed 5 years ago.
I have a codepen of my header. How can I align the image to the right of my div?
I have tried justify-content: flex-end and align-items: flex-end
With the given code sample, and to right align the image in its parent, the align-items: flex-end is a flex container property and won't have any effect in the right rule.
The appropriate property for a flex item would be align-self, though as the direction is row, this will still not work since align-* properties affect the cross axis (vertically).
A simple solution is to remove align-items: flex-end from the right rule and instead make the div-container--right a flex container, use justify-content: flex-end to push its child, the image, to the right. That will work with the rest of the rules, and your original layout kept.
Stack snippet
.main-container{
background-color: white;
flex: 1;
display: flex;
flex-direction: row;
}
.left{
flex: 2;
background-color:white;
}
.right {
flex: 2;
/*align-items: flex-end; removed */
}
.div-container {
background-color: #90C3D4;
height: 100px;
}
.div-container--left {
border-bottom-left-radius: 10px;
padding-left: 10px;
margin-left: 10px;
}
.div-container--right {
border-bottom-right-radius: 10px;
padding-right: 10px;
margin-right: 10px;
display: flex; /* added */
justify-content: flex-end; /* changed */
align-items: flex-start; /* added, to avoid image to stretch */
}
<div class='main-container'>
<div class="left">
<div class='div-container div-container--left'>
<img src="http://www.mharrisweb.co.uk/images/calendarIcon.png" width="100" />
</div>
<div class='picker-container'>
</div>
</div>
<div class="right">
<div class='div-container div-container--right'>
<img src="http://www.mharrisweb.co.uk/images/logoGreen.png" width="100" />
</div>
<div class='picker-container'>
image above align right
</div>
</div>
</div>
Besides the above, here is a few more ways to align flex items:
How to align groups of buttons on single row with Flex only?
How to Center and Right-align on a row with CSS Flex only
Center and right align flexbox elements
Right align out the Float Property
The way I see it you have 2 options.
remove flex:2 from the .right class and add margin-left:auto;
to the .right class add display: flex, align-items: flex-end; flex-direction: column (you also have that text that would need to be moved inside a class wrapper as the immediate child of the .right class.
I prefer option 1.
An additional option to the good answer from Sten is to use absolute position. Example:
.right{
position:absolute;
right:0;
}
I have three elements I'm trying to align in my layout.
First, I have a div for feedback, and then a search input, and then a div element for suggestions.
I want the first and last element to have a width of 20%, and the search input to have a width of 60%. Using Flexbox I achieve what I want.
But there's a feature that grows all the divs to the highest element. This means that when search results pop up, the feedback and suggestion elements grow in height with the search div resulting in a messed up layout.
Is there a trick to not grow the divs with the highest element? Just make the divs (#feedback and #suggestions) have the height of the content in them?
#container_add_movies {
display: flex;
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>
Feedback
</div>
<div id='search'>
Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>
</div>
<div id='suggestions'>
Suggestions
</div>
</div>
http://codepen.io/alucardu/pen/PPjRzY
You're encountering the flex equal height columns feature.
An initial setting of a flex container is align-items: stretch.
This means that flex items automatically expand the full length of the cross axis of the container. In a row-direction container, the cross axis is vertical (height).
The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.
To override this default setting, add align-items: flex-start to the flex container:
#container_add_movies {
display: flex;
align-items: flex-start;
}
#container_add_movies {
display: flex;
align-items: flex-start; /* NEW */
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
display: block;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
... or align-self: flex-start to the flex items:
#feedback {
align-self: flex-start;
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start;
width: 20%;
background-color: yellow;
}
#container_add_movies {
display: flex;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#feedback {
align-self: flex-start; /* NEW */
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start; /* NEW */
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
align-items sets the default value of align-self. With align-self you can override the default on individual items.
More details in the spec:
8.3. Cross-axis Alignment: the align-items and align-self
properties
Flex items can be aligned in the cross axis of the current line of the
flex container, similar to justify-content but in the perpendicular
direction.
align-items sets the default alignment for all of the flex
container’s items, including anonymous flex items.
align-self allows this default alignment to be overridden for
individual flex items.
A bit of history
Since the beginnings of CSS, there have been two layout challenges that have regularly frustrated, perplexed, and annoyed front-end developers:
How to center things, especially vertically, and
How to create equal height columns (tables aside)
Today, with the advent of flexbox, these problems are over.
Centering things has never been easier:
#container {
display: flex;
justify-content: center; /* center flex items along the main axis */
align-items: center; /* center flex items along the cross axis */
}
Simple. Easy. Efficient. The craziness is over.
In terms of equal height columns, flexbox also excels: It does this by default.
#container {
display: flex;
flex-direction: row; /* not even necessary; default rule */
align-items: stretch; /* not even necessary; default rule */
}
The align-items: stretch rule tells flex items to expand along the cross-axis as much as possible. Hence, in a row-direction container all items can be equal height. More craziness tamed by flexbox.
From one popular answer for equal height columns:
Give overflow: hidden to the container and large (and equal)
negative margin and positive padding to columns. Note that this
method has some problems, e.g. anchor links won't work within your
layout.
Now that's a hack!
The pendulum is now beginning to swing the other way: Designers are asking how to TURN OFF equal height columns.
You can add align-items: flex-start to your #container_add_movies. Here's an example
to have the unequal columns in bootstrap 4, first of all it needs to know how it is making it equal heights of the columns,so the reason is the
align-items: stretch
to remove this property it need to add align-items: flex-start so for this I have added the class="align-items-start" and the issue is fixed,
Setting the child element that was causing the problem to flex:none did the trick for me.
This question already has answers here:
How to adapt div's width to content with flexbox
(4 answers)
How to change flexbox wrap?
(2 answers)
Targeting flex items on the last or specific row
(10 answers)
Closed 5 years ago.
I have what seems like a simple CSS question but has been rather vexing for me as a styles newbie. Any help is really appreciated. I tried to find another example on Stack Overflow and couldn't which surprised me, so if this is a dupe pls point me in the right direction.
I have a container element that contains some text and a list of elements with fixed dimensions.
<div class='container'>
<p> Title </p>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>
I don't know how many items I will actually have - it might be 3 - 9. I want the container to be centered on the page and the heading to be centered above the items, but I want the items to be added left to right. I want the items to align left so that they appear centered under the heading and on the page when the row is full, but should appear from left to right if a row is not full. So if the screen can fit three and there are four, the fourth should align with the first element and not be in the middle.
.container {
margin: 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
p {
margin: 0 auto;
text-align: center;
justify-content: center;
align-self: center;
display: block;
}
.item {
flex: none;
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
The issue I'm having is that I can center the text, but because the width of the parent is not based on the width of the children, it always appears slightly off center. So, I read that I can force the parent's width to be based on the children's width by setting display: inline-flex on the parent. This accomplishes that, but unfortunately that then forces the heading to be in-line with the items, which defeats the purpose. The only reason I need the width of the parent to be calculated based on children's width is so that the text will know how to center itself inside the parent.
Any help would be really appreciated. I don't need to use flexbox - any other approach that works would be great...this is just the latest in a series of different things I've tried.
If i understood the question correctly, you were on the right track, setting display:block on the p was a good idea, but you also need to set width:100% so it won't stay inline with the other items.
See below or jsFiddle
.container {
margin: 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
p {
width: 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
align-self: center;
display: block;
}
.item {
flex: none;
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
<div class='container'>
<p> Title </p>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>