Keeping child elements horizontally aligned according to its container, and still aligned left according to the other child elements, on window resize

I want the elements to be aligned centered on their container on window resize, like this:

-----------child1--child2---------- -----------child3-----------------

See that the child elements are horizontally aligned center to their container, but they are aligned
left according to themselves( Using flexbox justify-content flex-start), (see child3 for example is aligned left);
When I resize the window the child elements must remain aligned centered according to its container but aligned left themselves.

How could I do that? Is that possible?

Here is a sample to something close to what I want:

http://jsfiddle.net/z8nxf5w3/193/

Can you post your HTML so far? Hard to visualize it.
– I. R. R.
Aug 31 at 16:54

There you go sorry
– Marcelo Noronha
Aug 31 at 16:56

@I.R.R., did you get it?
– Marcelo Noronha
Aug 31 at 17:01

Just saw your fiddle. It is unclear to me how your requirement is different to the one in the fiddle. Like this?: jsfiddle.net/axkm0p3y/2
– Venkat
Aug 31 at 17:08

@Venkat, hi the elements inside (child elements) must be aligned themselves left but center according to its container. That fiddle is close, but the elements must align center on resize window. You can see that the child elements get a little bit too much to the left, as you increase the container size
– Marcelo Noronha
Aug 31 at 17:12

2 Answers
2

The problem is that you are centering them with margin: auto in the divs, and still trying to make them align left in the .wrapper.

margin: auto

Apart from removing margin: auto, I removed the min-width. You should handle this via media queries if you want to center in the wrapper yet align left.
Why? The way you center things in the wrapper is by making them fill it up completely (except for the padding that you define). I created to sample options: 3 and 2 elements per row. If you calculate margins and widths in percentages, you can make them fill up the entire wrapper.

margin: auto

Here's a working option:

.container padding:30px; background-color:green; text-align:center; .wrapper padding:30px; background-color:yellow; display:flex; justify-content:flex-start; flex-wrap:wrap; margin:auto; width:40%; .wrapper div /*min-width: 100px; --> don't use this, use % and media queries */ width: 31.3%; margin: 5px 1%; /* 31.3 * 3 + 6 * 1 = 99.9% */ background-color: #eee; /* margin-right:auto; --> this centers the elements margin-left:auto; */ @media (max-width: 600px) .wrapper div width: 48%; /* 2*48 + 4 = 100% */

<div class="container"> <div class="wrapper"> <div class="child-1"> text1 </div> <div class="child-2"> text2 </div> <div class="child-3"> text3 </div> <div class="child-4"> text4 </div> <div class="child-5"> text5 </div> </div> </div>

That´s cool, but the elements should have a maximum and minimum size. So they can make more rows on increase container, and get more columns on decrease container
– Marcelo Noronha
Aug 31 at 17:30

In that case you will have to choose: They're either aligned in the center, or the left of the container. You can't have it aligned in both ways...
– Victoria Ruiz
Aug 31 at 17:33

Got it thank you Here is the fiddle with max-width and min-width: jsfiddle.net/z8nxf5w3/103 @Victoria Ruiz, wouldnt be possible using onresize event in javascript?
– Marcelo Noronha
Aug 31 at 17:34

I created a copy of your fiddle as per my understanding. Will try to help based on your need based on this. Let me know.

I think text: center property for your container is causing the issue.

text: center

Check this: http://jsfiddle.net/z8nxf5w3/98/

http://jsfiddle.net/z8nxf5w3/98/

The only problem with that is that the child elements that get a new column get centered horizontally, they should be aligned left according to the child elements, and center according to its container as I ilustrated in my question post, see 'child3" position
– Marcelo Noronha
Aug 31 at 17:40

This is the closest I can get: jsfiddle.net/z8nxf5w3/112 Though you can see, that the elements are not aligned center on container resize
– Marcelo Noronha
Aug 31 at 17:52

I'm trying something like this: Last edit: jsfiddle.net/z8nxf5w3/130 Still the second line/column of the elements is aligned center. I´d like it to be aligned left, according to the child elements, and center according to its container
– Marcelo Noronha
Aug 31 at 18:13

This is my last attempt: jsfiddle.net/z8nxf5w3/193 Try to resize the window
– Marcelo Noronha
Aug 31 at 20:41

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt