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
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 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
Here is the stackbliz show the issue:
https://stackblitz.com/edit/angular-addm8z-rng1eb?file=app/checkbox-overview-example.css
Image of the Issue
Expectation
You need to set the width to cb-wrapper.
i.e
.cb-wrapper
{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100px;
margin: auto;
}
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.
I cannot get these thumbnail images to stack horizontally and clear the text here:
http://svgcuts.com/blog/2016/04/09/fairy-cottage-svg-kit/
I can add a float:left to the line:
191 .entry .ngg-galleryoverview .ngg-gallery-thumbnail img {float: left;}
But the text below keeps wrapping around the containers.
If you inspect ngg-galleryoverview in developer tools you'll see it has collapsed when you float it's children. (aka: it no longer stretches to contain them.) The quickest way to fix this if you'd like to float the children is adding:
.ngg-galleryoverview {
overflow: hidden;
}
.ngg-gallery-thumbnail-box {
float: left;
}
Assuming this is your website, you can use flexbox to achieve what you want.
I noticed the wrapper for the thumbnails and came up with the code:
.entry .ngg-galleryoverview {
padding: 0px !important;
margin: -15px 0px 30px 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Notice that I just added:
display: flex;
flex-direction: row;
flex-wrap: wrap;
It works well for me: