It's very easy to align all of your elements by just setting the parent div as display: grid and aligning the child elements with place-items: center but how does it compare to centering your elements with the margin property performance wise?
I'm finding myself putting grid on every parent, just to align items. Are there other downsides to using grid except that your parent has to be a grid element?
Related
I am trying to align me kitchen sink cards horizontally here is a picture of the cards.
(https://i.stack.imgur.com/4JIXc.png)
These cards ⬆️ are not aligned horizontally as you see I want them aligned horizontally I tried many CSS & HTML codes but none worked.
This is one line of code I tried:
CSS: float:left;clear:none;
you can use a css property called display: flex; i that the default flex direction is row is already enabled. so you can use this property for your cards main root element.
You can use:-
display: flex;
justify-content: center;
on parent element, to horizontally centered the item. There are other values also for justify-content which you can use to align as you want.
In bootstrap, you can simply use classes:-
d-flex justify-content-center
on parent element, to horizontally centered the item. Similarly there are other classes also. You can see bootstrap docs.
I have a nested flex layout.
Here is my codepen link https://codepen.io/mendoncafiles/pen/oNoGbPa
There is a flex container, inside which I have list items. Each list item is a flex, with I tag and SPAN tag as flex items. The I tag has flex-basis of 30px.
The text in last list-item is wrapped to next line.
The text is displayed in single line with two options:
remove display: flex from wrapping DIV
Change flex-basis: 30px to width: 30px to I tag.
Expected:
Issue:
It looks like the problem is that the browser is establishing the size of the container before factoring in the full length of the spans.
You can disable flex-shrink or use white-space: nowrap on the spans. But that will cause an overflow.
Consider setting a minimum width on the top level flex container or the ul.
If a previous sibling is set to float with a width of 100% and the following sibling set to display: flex, the latter overflow the parent container instead of wrap to a new line.
With any other display value but flex (or grid) it wraps, as it should, so how come it won't when set to flex
.float-left {
float: left;
width: 100%;
}
.display-flex {
display: flex;
background: yellow;
}
/* Demo css */
.container {
max-width: 80%;
margin: auto;
background: white;
}
<div class="container">
<div class="float-left">I'm floating left, with a width of 100%.</div>
<div class="display-flex">'Floating left' takes up 100% of the space, but still i don't go onto a new line?</div>
</div>
The reason a block box appears to wrap when its previous sibling is a float with 100% width is because it's not actually the box that's wrapping, it's its inline content that's wrapping.
The reason this doesn't happen with a flex container is because floats cannot intrude into flex formatting contexts. In fact, the same thing happens with block formatting contexts — if you apply overflow: auto or overflow: hidden to the following sibling without display: flex the following sibling will seem to disappear altogether. (This implies that the first paragraph is true only when the block box does not establish a block formatting context.)
Since your float is 100% width, the flex container's (auto) width is reduced to 0. Its inline descendants don't wrap underneath the float, because those inline descendants are participating in an inline formatting context that's within an anonymous flex item, which itself doesn't wrap since it's the only flex item in the flex container. This flex item is overflowing the flex container; however the flex container itself doesn't overflow the containing block since its used width is 0, allowing it to sit next to the float.
The reason the flex container will wrap if it is display: inline-flex instead of display: flex is because an inline-level flex container behaves just like any other inline-level content, wrapping around a float. In this case, it's the flex container itself that wraps — its inline content is still formatted as an anonymous flex item, because flex layout is identical regardless of whether the flex container itself is inline-level or block-level.
The problem is that the element .display-flex is not a flex item. It is a child element in a standard block container.
Therefore, the flex shorthand property, and its longhand component properties, which apply only to flex items, are having no effect.
However, the width property works on both flex items and containers.
More details here: What are the differences between flex-basis and width?
I am a beginner trying to do the following in css / html:
I have two floating elements, one on the left, one on the right. I want these two elements to be vertically centered in a wrapper that has no defined height. I only found a solution for the case when the wrapper has a defined height, but my wrapper can have various heights as the text content is dynamically added.
Thank you for helping me.
You're best of using flex box. On the parent element, i.e. the div, do the following:
display: flex;
flex-direction: column;
justify-content: center;
This will then ensure no matter how many items you have in the child element they are always aligned vertically. You can then align them horizontally with align-items: center;
A visual representation is shown here:
http://codepen.io/pauljohnknight/pen/oZLJPG
Paul.
I am working on a page where I would like a responsive img to align to the left of my section flex container, and the h1 & p text the right of the image, using flexbox.
I have more text and elements in the section flex container, but I would like them to be below the img.
Goal:
I am using codepen as a sandbox to get things done. But for some reason, the h1 is not horizontal but aligning vertically. The image is not keeping it's aspect ratio as the screen size decreases. And the rest of the elements won't stack below each other.
For small screens I would like the elements to just stack below each other in this order:
img
h1
p
a
a
etc...
I am working on a page where I would like a responsive img to align to the left of my section flex container, and the h1 & p text the right of the image, using flexbox.
But for some reason, the h1 is not horizontal but aligning vertically... And the rest of the elements won't stack below each other.
What you're missing are nested flex containers.
You can convert an element into a flex container with display: flex or display: inline-flex. Then all the children of this container become flex items and accept flex properties.
But you can also make flex items into flex containers.
This enables you to mix rows and columns deep into the HTML structure.
I've made some basic revisions to your codepen, as an example: http://codepen.io/anon/pen/xVamQQ?editors=1100
I altered the structure in order to accommodate alternating pattern of row and column flow. It looks like you already have a grasp of the fundamentals of flexbox. What I am concerned with is the lack of any padding and the height given to main was 1000vh. That's literally 10 viewports stacked on top of each other.
main { background-color: Gainsboro; height: 1000vh; overflow-y: scroll; }
CODEPEN