Can not center thumbs in FlexBox row.

Report · Dec 31, 2017

I have 3 rows (each with a flex class) of which each row contains 4 columns with a thumb container in each column.

Appearance currently visually acceptable, but I find that with all thumbs aligned/floated left, as the md and lg breakpoints it begins to leave more empty space to right than I would prefer.

I have tried several approaches found thru forum and discussion groups, but have only managed to blow up the page a couple of times due to my unfamiliarity with flex.

Guidance would be appreciated.

Page located at: Equity 2 Gain Property Listings

Thank You

Report · Jan 01, 2018

can't you nest two flex container

each row being a flex container containing the four

Report · Jan 01, 2018

Problem is that you are combining Bootstrap 3 classes with flex, which is not a good idea. Bootstrap 3 does NOT navtively support flex - Bootstrap 4 does.

Integrating Flex with Bootstrap 3 is simple - you just ignore the Bootstrap 3 classes. This is how simple it is.

See newly reformated code below - get rid of all the unecessary containers <div class="col-sm-4 col-lg-3"> </div> which wrap your 'thumbnail '<divs> -

they are excess to requirement and just bloat the html mark-up. Get rid of the 'row' class from <div class="flex-row row">

You should have just the one <div class="flex-row"> </div> NOT 2 and all your thumbnail <divs> go inside it, as many as you want.

<h2>615 Frank</h2>

</ol>

</div>

</div>

<h2>619 Frank</h2>

<ol>

</ol>

</div>

</div>

<h2>722 Perry</h2>

<ol>

</ol>

</div>

</div>

<h2>1821 Court</h2>

<ol>

<li>Multi Unit</li>

</ol>

</div>

</div>

<h2>2468 Thomas</h2>

<ol>

<li>Item Three</li>

</ol>

</div>

</div>

<h2>2501 Plainsfield</h2>

<ol>

<li>Item Three</li>

<li>Item Three</li>

</ol>

</div>

</div>

<ol>

<li>Item Three</li>

</ol>

</div>

</div>

</div>

Add the css styling to your page (see below): (this is fully responsive and your 'link' buttons will line up no matter how little or how much text you have in the columns). Obviously you still have the Bootstrap 3 css and js files linked to the page so it can style the 'thumbnail/caption' classes etc. You're really just picking which bits of the page are styled with Bootstrap and which bits you are styling youself - a win, win situation.

<style>

.flex-row {

display: flex;

flex-wrap: wrap;

width: 90%;

margin: 0 auto;

}

.flex-row img {

max-width: 100%;

height: auto;

}

/* 4 columns default */

.thumbnail {

display: flex;

flex-direction: column;

width: 22%;

margin: 0 1.5% 30px 1.5%;

}

/* 3 columns at screen width 1000px */

@media screen and (max-width: 1000px) {

.thumbnail {

width: 30.33%;

}

/* 2 columns at screen width 768px */

@media screen and (max-width: 768px) {

.thumbnail {

width: 47%;

}

/* 1 column at screen width 480px */

@media screen and (max-width: 480px) {

.thumbnail {

width: 100%;

margin: 0 0 30px 0;

}

/* Push link to the foot of column */

.caption {

flex: 1;

}

/* line up link with h2 */

.thumbnail p {

margin: 0 0 15px 10px;

}

</style>

THATS IT - SIMPLE!

Don't forget when you have your construction the way you require it to be and you have used Flex you need to prefix the Flex css so it's compatible with older browsers.

Go to:

Autoprefixer CSS online

Copy any css selector you have used with Flex and paste it in the prefixer window - .flex-row will give you the below combination, so that is what you need to use for your css.

.flex-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 90%; margin: 0 auto; }

Of course this is easier if you use a workflow like SASS or LESS as it will automate the css prefixing. Personally I don't as I think SASS or LESS is overkill purely for css prefixing - css prefixing is something that needs addressing in DW to make it a simpler workflow beacuse its NOT something which is optional.

Report · Jan 01, 2018

well if you really want to get 3 rows containing each 4 cols... you'll have to nest flexbox...

generate the HTML, so paste the code below in between the BODT tag

article.global>(section[class="row$"]>(div>img[src="https://placeholdit.co//i/200x130"]+p>lorem20)*4)*3

hit TAB just at the end of the line (no space in between the 3 and the TAB)

add a STYLE tag on the HEAD

to get the first global container being a flexbox add this one to the style sheet

.global { width:94%; margin:0 auto; display: flex; flex-direction: column; }

we change the flex-direction to get what we look for

now if you want to figureout... just for testing and developping mode, add color to your rows...

.row1 { background-color: lightblue; } .row2 { background-color: lightgray; } .row3 { background-color: lightgreen; }

now to get each child of this first container being flexbox themselves add this one

.global section { display: flex; flex-wrap: wrap; }

we need to control the way the child of the child grows and shrink... so add this one

.global section div{ flex:1; }

all of the above are strict minimum to make it works... but it certainly need adjustement for fits the real life and your needs...

Report · Jan 01, 2018

woaw formatting and mixing code and text is a pure headlock

Report · Jan 01, 2018

Dont think it needs to be anywhere near as complex as that. The OP doesn't understand why they are getting more space to the right of the thumbnail sections when reducing the width of the browser, that's because they are mixing Bootstrap 3 and Flex - like half Float and half Flex, which tells me that's nuts.

I have no idea why the OP is using 3 Flex sections of 4 thumbnails (probably because of lack of understanding - obviously the 1st image in the 2nd section cannot move up to sit next to the last image in the 1st section, the 1st image in the 3rd section cannot move up to sit next to the last image in the 2nd section, hence also the huge gap to the right once the browser window gets narrowed.

This is a no brainer simple layout achievable with simple Flexbox. The question might well be why is the OP using Flexbox anyway as the layout can work perfectly ok without it just using the Bootstrap 3 float classes. The only thing Flexbox adds is its nice if the link buttons line up, plus if youre a bit of a code snob as I am its a better solution than using floats.

Why use a sledge hammer to crack a nut - I'm losing the will to live.....the whole web-development scene is packed full of 'nutty professors' who like to complicate the simplest of procedures.

Report · Jan 01, 2018

I thought that the OP was looking for presenting three differents section from a presentation... so using a row for each... then each of thos row could contaons as many items as needed.. in that case 4...

I agree for the manually float aspect... or the pure 3 BS use...

Report · Jan 01, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
I thought that the OP was looking for presenting three differents section from a presentation... so using a row for each... then each of thos row could contaons as many items as needed.. in that case 4...

Well it 'could' be but to me it just looks like the OP is wanting to present a number of thumbnail images accompanied by some text and a link button

Its says:

Michigan Property LIstings - Residential/Commercial

IF as you think then I would have expected the Residental/Commerical heading to be split up, each pertaining to a specific flex section heading.

Lets wait until the OP comes back and we might find out. Its always a bit difficult with limited information.

Report · Jan 01, 2018

Osgood:

“Problem is that you are combining Bootstrap 3 classes with flex”

I can see I’m overworking the code, thanks for the reminder.

Developing is not my primary skill set, so there are going to be areas where my inability to keep up with the fast and ever changing code which leads to confusion, which should serve to remind me to use what I know, not that which is intriguing.

“Integrating Flex with Bootstrap 3 is simple - you just ignore the Bootstrap 3 classes.”

“I have no idea why the OP is using 3 Flex sections of 4 thumbnails (probably because of lack of understanding”

(Neither does he.)

“Why use a sledge hammer to crack a nut - I'm losing the will to live.....the whole web-development scene is packed full of 'nutty professors' who like to complicate the simplest of procedures.”

(Awwww, triggered much. You chose to do this work, then you complain about it?”

There are many others for whom this is not their primary line of work posting to this forum for answers and guidance, and if you feel this is all a bit much to bear, don’t respond to them. You’ve been helpful many times in the past, but I do not respond well to snark)

I appreciate your providing the framework example; taking the time to do that, for myself, is extremely helpful in understanding.

Thank You for your time.

Report · Jan 01, 2018

Humm...nothing l said was aimed at you as l know you from past posts and realise you are learning.

The bit about the nutty professor was a generic response to another post (not yours) which l thought was overcomplicating the solution for you and more so to the many so called skilled developers beyond this forum who teach complex ways to solve simple problems.

Im not complaining about showing you how simple it can be. Now you just need to store that information somewhere and run with it the next time a similar problem comes along, that's how we all learn.

Humm........not a great start to the new year.

Report · Jan 01, 2018

osgood_ wrote
Humm........not a great start to the new year.

I slept late this morning. And I'm kind of glad I did .

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 01, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
I slept late this morning. And I'm kind of glad I did .

Post 5, which the OP objected to was a general response to post 3 as lm sure you know. I can see why the OP may have thought it was aimed at them, which it certainly was not. I purposely spent time explaining step by step in post 2 how to solve the problem they were encountering and why they were encountering it plus commenting the css as l know the OP, from past posts and as they have said themselves, might need some help with coding.

The one thing which they should not do as they also say is use what they know if they find something else intriguing. Exploring and investigating optional methods is an essential part of the learning curve and l would encourage them to do that.

Report · Jan 01, 2018

It's all too much to think about on New Years Day.

I'm all for experimenting and learning new things. But I don't think combining CSS models is a swift idea until one has mastered all model concepts first. Meanwhile, find a method that works and stick with it.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 01, 2018

As this is probably one of my last posts in the forums, (Nancy probably knows the reason, i would first like to thank you all for your work over the years and wish you all the best for the future, I have enjoyed working with you all, and even with the not so seldom disagreements we have had, it was still fun).

Now to the OP's problem -

Once you apply flexbox to a layout it disables all float properties to the layout, unless those float properties are within the individual elements that the original layout controlled using floats. This completely messes up any of the layout that was previously controlled by the use of floats. For this reason alone trying to debug a mixture of floats and flexbox is at best a problem, and a nightmare at worst.

Hope you all understood that

Paula.

Report · Jan 01, 2018

Paula,

I hope this is NOT one of your last posts. That would be dreadful.

If the JIVE PM system was working better, I would take this off forum but since it's not, I'll just say

you have my full support and the support of at least one other ACP who gets it.

Garbage posts no matter how well-meaning or by whom do not enrich the product forums. They pollute them. I think you were right for calling the person(s) on the carpet about it. Unfortunately, too few people fully understand the context of why self-serving behaviors are not beneficial to the forums. Hopefully that will change in the next week or so. So please don't throw in the towel yet.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 01, 2018

I’ll present my synopsis of the chain of events to my original post.

My unnecessary response to Osgood’s aside in first posts were a result of not seeing their wasn’t a connection to my post, but simple a conversational back and forth between moderators.

I’ll have to consider my wife’s opinion that I, now well into my seventh decade and still working, that I “might” be a bit short on patience; especially with myself. I will certainly refrain, in the future, from any response not necessary to the question at hand.

I hope, Osgood, that you reconsider this to be a bad start to a new year. It’s a good year, and as usual I learned how little I really know from the forum.

And, this is so much more interesting than bingo or crossword puzzles.

Thanks to all.

Report · Jan 01, 2018

A pity that this is discussed as an irrelevant part of the OP's discussion, but I share Nancy's reply

I hope this is NOT one of your last posts. That would be dreadful.

I also know that I am one of the reasons for your decision, however, my one dimensional arguments were never meant to be personal.

To all, have a prosperous and healthy New Year!

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jan 02, 2018

pziecina wrote
As this is probably one of my last posts in the forums, (Nancy probably knows the reason, i would first like to thank you all for your work over the years and wish you all the best for the future, I have enjoyed working with you all, and even with the not so seldom disagreements we have had, it was still fun).
Paula.

Hey Paula, stick around if you can please. I know you're coming up to full retirement at the end of January and maybe 'enough is enough' - I can understand that and if I was in your position I would probably walk away from the forum as well, why flog a dead horse. Web-development isnt the be all and end all - there is life after it, sometimes I think we get too consumed out of passion and it becomes overwhelming and eventuallly quite boring.

In saying that I dont think there is much more to offer in this particular forum, it is what it is. I'm not learning anything anymore which is a negative environment for me to be in. The forum over the years has definately deteriorated in the number of experienced users contributing which makes it less exciting and less attractive. DW is never going to be the bit of kit you 'dream' of - too many ignorant people at the top.

Web-development is changing, not always for the better in my opinion - everything is becoming blurred and with so many farmeworks, plugins, extensions, new techniques now arriving on a seemingless daily basis its a lot more complex than ever before.

Your decision is your decison and I fully respect that decision and wish you all the best for the future. Everyone moves on at some stage, other things in life become higher priority, be happy

Report · Jan 02, 2018

Thank you for all your support, but my decission has nothing to do with the Dw forum.

Ben - we have had disagreements, but we always worked them out eventually, and our last disagreement has nothing to do with my leaving the forums. You may be interested to know, (admission follows) I can fully understand you when you disagree with me regarding css and flexbox in particular, as getting flexbox to work in 2 dimensions is not something that is easy, and doing so is probably one of the least understood parts of using Flexbox.

All the best for the future to you all.

Can not center thumbs in FlexBox row.

1 Correct answer

Michigan Property LIstings - Residential/Commercial