Breaking News: Grepper is joining Read the official announcement!
Check it out

pushing to the other side with flex box

Ziad Kermadi answered on March 5, 2023 Popularity 2/10 Helpfulness 1/10


More Related Answers

  • css flex align to side
  • flex force div right side
  • how to put two items befside each other using flexbox
  • flex align children to side
  • how to put two items befside each other using flexbox
  • use display inline and display flex at the same time
  • css flex next to each other

  • pushing to the other side with flex box


    We don't have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

    A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a justify-self property, however consider the image below. I have three items on one side and two on the other. If I were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention.

    Five items, in two groups. Three on the left and two on the right.

    Instead we can target item 4 and separate it from the first three items by giving it a margin-left value of auto. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.

    In this live example, I have flex items arranged into a row with the basic flex values, and the class push has margin-left: auto. You can try removing this, or adding the class to another item to see how it works. 

    Popularity 2/10 Helpfulness 1/10 Language whatever
    Source: Grepper
    Tags: box whatever
    Link to this answer
    Share Copy Link
    Contributed on Mar 05 2023
    Ziad Kermadi
    0 Answers  Avg Quality 2/10


    Continue with Google

    By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.
    Grepper Account Login Required

    Oops, You will need to install Grepper and log-in to perform this action.