why can't we use justify-item in flexbox but we can in grid?
Hello, can someone explain why we can't use justify-item in flexbox but it works in grid, what's the difference?
10 Replies
justify-items works by setting the default value for justify-self for the children, and justify-self doesn't exist for flexboxMDN Web Docs
Box alignment in flexbox - CSS | MDN
The box alignment module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of flexbox. As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the box alignment overview guide, which details the common features...
ah ok, but what about align-item, does it work by targeting each children separately like justify-items does in grids ?
On the main axis, Flexbox deals with the flex items as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution.Oh ok, this is different for align-item where we treat each item separately as if they have thei own axes?
On the cross axis align-self makes sense as we potentially have additional space in the flex container in that dimension, in which a single item can be moved to the start and end.
the difference between this behaviour in flexbox and grid is that in grid, we have a cell which gives room to the item inside it while in flexbox, we don't really have a cell, we have the item directly?
it's a difference in how flexbox and grid organize their items. Grid somewhat-rigidly defines the areas items are allowed to go in, flexbox shoves as many as it can in the same row
yeah I see, in grid, we explicitly set the size of the columns for example but in flex we don't have that, so in grid, it may happen that the item is less that the size of the column, it has enough space for justify-items stuff ?
here is what I get for a grid display vs a flex display
basically the grid display has enough space for things like justify-item but the flex doesn't have any leftover space ?
flex tries to minimize leftover space yeah
noted, ty !