I am having a problem moving my h2 header to the right side of the screen while maintaining a given width. I have tried display: flex and float: right but I can't seem to figure out how to effectively align the h2 div to the right side of the screen. My code is here: http://jsfiddle.net/b62tg9un/19/
<div class="container">
<h1>Example Title</h1>
<h2>This is a test sentence to work on my html and css code.</h2>
</div
h2 {
width: 60%;
float: right;
}
.highlight {
display: inline-block;
}
.container {
display: flex;
flex-direction: column;
text-align: right;
justify-items: right;
}
Thanks
If you want the items in the flex container to align to the right side of the container, you should use align-items: flex-end
h2 {
width: 60%;
}
.container {
align-items: flex-end;
display: flex;
flex-direction: column;
}
this will still have the h1 and h2 layed out in a column, but the h2 only takes 60% of the width and is aligned to the right.
You just have to change to flex-direction to row , because you want both of these items to be in a row
If you cant get a good mental model of flexbox try this link. it is well described there.
Flexbox
h2 {
margin: 0px;
width: 60%;
float: right;
}
.highlight {
display: inline-block;
}
.container {
display: flex;
flex-direction: row;
justify-content : space-between;
}
you are missing a bracket at the end. The last Div is not closed. Thats all.
You should use jsutify-content instead of justify-items tho for flex, and end instead of right
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%;
}
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;
}
I would like to add to my header on the right an additional small element that is aligned to to right as follwed:
<h1>Header<small>subheader<span class="pull-right">subheader right</span></small></h1>
However the span element on the right is placed higher/ not in line with the first small element. What am I doing wrong?
I do not want to use the css grid.
This is what you can do.
h1{
display: flex;
width: 100%;
align-items: center;
}
small{
display: flex;
width: 100%;
}
span{
display: flex;
width: 100%;
justify-content: flex-end;
}
You can remove pull right class from span.
This is before display: inline-flex; is implemented:
code:
.testing {
float: right;
}
This is after display: inline-flex; is implemented:
code:
.testing {
float: right;
display: inline-flex;
}
Float removes the element from the normal flow and makes it a "block" element. If display: flex; or display: inline-flex; is used with float, then float has no effect on that particular element. In your case the "inline-flex" changes the size of the div to fit on that particular row where it is "in-lined";
If you want your element to be the same size and is aligned right you should make use of Flexbox, more specifically use display: flex; on parent and justify-self: end; on child. See more here: Justify-self: end
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;
}