I have a flex container with some text (an h1, for example) that has a line break due to the width of the container. I'm trying to keep the text inline so that it doesn't automatically take up 100% of the width of the container, so that it stays centered horizontally, but having Flex on the container breaks this. I've tried using align-self: center on the h1 and a number of other things with no luck. Any help would be much appreciated.
Edit: I want to keep the text itself left-aligned, but have the h1 element centered within the container.
.container {
width: 250px;
background-color: tomato;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
display: inline; /* should only take as much space as it needs */
align-self: center;
}
<div class="container">
<h1>Text text sdfsdlfkjs</h1>
</div>
Is this what are you looking for?
.container {
width: 250px;
background-color:tomato;
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
width: 90%;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}
Related
Does anyone know how I can get all the h4s in this pen to align? I'd like all the icons to be on the same line, and also the h4s to start on the same line as well. I've tried messing with the flex baseline property but no luck.
Each flex item has this css:
.grid-item {
flex-basis: 25%;
display: inline-block;
padding: 0;
width: 100%;
text-align: center;
}
https://codepen.io/jpaul1982/pen/RwBypMj
In your codepen , you need to change the block-grid to
.block-grid {
display: flex;
align-items: baseline;
gap: 5%;
}
So, I have centred the content within the flex item like so. (the flex items just have a h3 and a paragraph within, in the mark-up.)
.flex-container {
margin-top: 80px;
display: flex;
height: 90vh;
align-items: center;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px black solid;
margin: 20px;
padding: 20px;
height: 200px;
}
So, rather than when I re-size the page and the h3 and the paragraph flowing out of the border, how do I contain it within the border no matter what when I resize the page? The reason I've made the flex items display: flex too is so i could centre the content inside both vertically and horizontally. But, obviously when I resize to a smaller screen, the h3 and paragraph go outside the border :S
I have a container with children items:
HTML
<div id="container">
<div className="item">1</div>
<div className="item">2</div>
<div className="item">3</div>
<div className="item">4</div>
</div>
CSS
#container {
display: flex;
flex-direction: row;
gap: 10px;
}
.item {
flex: 1;
text-align: center;
padding: 0px;
font-size: 30px;
background: #34ace0;
}
This flexbox container sits inside a grid layout, and the cell to the left of the one here has contents which cause the height of the flexbox shown here to be higher than the contents, as shown here:
I need the squares with the numbers inside to stretch/fill the height of its container, like this
...but with the text centered vertically as well.
I tried setting the height of the .item to 100% but it doesn't fill. Is there something like the free-remaining-space used in grid for flexbox?
Make sure the grid layout container has height of 100vh and the container you've shown also has height of 100%.
To center the text inside of each item, you can make each of them display: flex.
.grid-container {
height: 100vh;
}
#container {
height: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
padding: 0px;
font-size: 30px;
background: #34ace0;
}
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 5 years ago.
I have made a simple flexbox jsfiddle To play around with all flexbox values, but stumbled upon something that I can't explain my .item divs are spaced out for some reason and .grid is automatically stretching to full height, I'm not entirely sure why this happens?
HTML
<div class="container">
<div class="grid">
<div class="item red">a</div>
<div class="item yellow">b</div>
<div class="item blue">c</div>
</div>
</div>
CSS
.container {
width: 320px;
height: 480px;
background: black;
padding:15px;
margin: 20px auto;
display: flex;
}
.grid {
background: white;
display: flex;
width: 100%;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 100%;
flex-grow: 0;
flex-basis: 100%;
align-self: auto;
align-items: flex-start;
padding: 10px 0;
}
.red { background: red; }
.yellow { background: yellow; }
.blue { background: blue; }
The align-items: flex-start (set on .grid) causes this type of behavior. As specified in the MDN docs
The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container.
If you disable it, the value will be set to stretch by default (each flex item will be stretched to fill the container).
I have a 3 box example here all horizontally centered and trying to make them responsive, so if the resolution drops they will stack. I've tried doing this with flex box because it allows any box to grow and still lines up. Originally I put the boxes in bootstrap 3 row with the cols-lg (md etc) set but it would never unstack them! The outer wrapper (.wpr) will on implementation be a banner which is why I would like the positional boxes horizontally aligned where possible.
Note: The answer doesn't have to use flexbox!
Here is the fiddle
HTML
<div class="wpr">
<div class="box" style="background-color: red;">A B C</div>
<div class="box" style="background-color: blue;">2</div>
<div class="box" style="background-color: pink;">3</div>
</div>
CSS
.wpr
{
width: 100%;
background: grey;
padding: 10px 30px;
display: flex;
justify-content: center; /* align horizontal */
align-items: top; /* align vertical */
}
div.box
{
width: 200px;
min-width: 200px;
float: left;
margin: 0 5px;
padding: 30px;
text-align: center;
color: white;
font-size: 72px;
min-height: 100px;
}
You could add a flex-wrap: wrap; to .wpr as seen in my demo.
You just need to add the flex-wrap: wrap; property to the .wpr class.
.wpr
{
width: 100%;
background: grey;
padding: 10px 30px;
display: flex;
justify-content: center; /* align horizontal */
align-items: top; /* align vertical */
flex-wrap: wrap; <===
}
http://jsfiddle.net/h4h75mnn/
Check out this Pen # Codepen to play around with flexbox: http://codepen.io/enxaneta/full/adLPwv/