Center flex child on the page, while ignoring other children
The fiddle below explains it best, but basically I have a two-child flexbox and would like to center the entire container horizontally based on the second child ONLY. Position of the first child should be directly to the left.
Is this possible? Should I use something other than flexbox? I can get close with absolute positioning but the first child moves too far/close to the second.
Fiddle - https://jsfiddle.net/cms07dL3/1/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
8 Replies
@ChooKing you are a saint, thank you
@ChooKing Would you mind a short explanation on how this works? I see this screenshot - is that
flex-grow? flex-shrink? I've never see just flex before. (I also have never used flex-grow or flex-shrink myself at this point. Need more practice with it.) My first thought on a solution for this would've been to create a transparent div on the right the same size as the red. That way it would be centered on the blue but look like you want it to, @ForsetisFate I think that works, as well, but I wanted to get some feedback on that as a solution, too. If @ChooKing doesn't mind!
Crap! I didn't save it dangit.Here it is:
https://codepen.io/salentipy/pen/xxNObGX
The flex:1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0. It fills all available space if there is only one element that has flex:1. If there are multiple elements with flex: 1 in the same flex container, all available space is equally divided between them. I have 3 direct children of the flex container. The left and right both have flex:1 and the blue div is given a specified width of 100px. That means the left and right are given equal amounts of all remaining space not occupied by the blue div.
The red div is inside the left container. It is pushed as far right as possible by using margin-left: auto on it.
Your approach looks like it works, but it requires knowing the width of the red div to make the transparent one the same size. My version does not require knowing the width of the red div.
I know you where after a flex solution but I'll just throw a grid solution in there. This doesn't require any extra markup or empty elements.
https://codepen.io/cbolson/pen/GRaqopP
Thanks! flex-grow and -shrink are up very soon on my list of things to learn about next. It's still a bit confusing for me. I'll have to see about three more examples before if clicks probably. lol
just throwing in another solution based on the original jsfiddle
add an after-element to the parent that has the same width as red
that will create another flex-child at the end, making it all centered