Flexbox vs Inline-Block

HTML & CSS
1

Hello. Still trying to get the hang of Flexbox and mobile development…

I am working on a couple of web pages that require having a product thumbnail and then product description side-by-side. This includes a checkout page, shopping cart page, and product catalog.

Last weekend I was searching online and found examples where people accomplished this using display: inline-box. And @coothead used this approach with my First name and Middle Initial question.

But then I also got help in another thread dealing with Pink Fuzzy Slippers where @coothead and @DavideMancuso recommended using Flexbox.

So I am confused which approach to take for the web pages that I am currently working on…

I was able to apply the display: inline-block for things like First name/MI" and “State/Zipcode” and that seems to work well.

And I was able to re-create the pink fuzzy slippers example.

But I am unsure of what to do for my Checkout form, and Product Catalog and Shopping cart. :wonky:

Thanks.

2

Hi there UpstateLeafPeeper,

“flexbox vs inline-block” is not really the
way to look at coding methodology. :unhappy:

The CSS methods to use vary according
to required results.

If you are unsure of which method to use,
then use the “Suck it and see approach”

This would not only be good practice for you
but would improve your understanding of the
pros and cons of the various methods. :winky:

coothead

3 Likes
3

@coothead,

It’s a good thing you aren’t a flight instructor with your “Suck it up and see” approach! :wink:

I think what you were trying to say is, “It depends”, right?

Here are some things I can think of…

a.) If I simply had two or more items where I needed them to wrap, then I think using either Inline-Block or Flexbox would work. For example, the “FirstName/MI” and “State/Zipcode” example.

b.) If you need a lot of control with aligning items, then Flexbox is probably the way to go.

c.) For the Pink Fuzzy Slippers example where I wanted the order or the Thumbnail and Product Description to vary, using Media Queries was also needed.

4

Well, not really. :wonky:

There is, quite often, more than one way to skin a cat, so

  1. look at the problem.
  2. think of a way that might solve it.
  3. try it.
  4. if it solves your problem, add it to your skill set
  5. if, on reflection, you think of another way to
    solve the problem, try it.
  6. if it solves your problem, add it to your skill set.
  7. you will now be in a position to consider which
    of your newly acquired skills seems to be the
    more appropriate to employ.

So, what I am trying to say, is that I, personally, believe
that the best way to learn coding methodology is to
simply keep writing code, instead of just thinking about it.

coothead

3 Likes
5

Here is a mockup of a shopping cart that I just made in LibreOffice…

Shopping Cart mockup_v01
Shopping Cart mockup_v01930×1060 63.6 KB

This is an example of what currently has me stumped when it comes to my limited knowledge of Flexbox, Inline-Block, Media Queries, etc.

To be honest, in the past I would have just created an HTML table and dropped in the thumbnails and product details, because the data is very tabular in nature.

But I think I’d get “dinged” by everyone here for choosing an HTML table - especially if I want this to work on mobile.

On one hand, this shopping cart mockup looks like it would work well using the approaches in the links in my OP.

But I think it is more complicated in that because…

1.) I have multiple rows of items - each of which has a thumbnail and product details

2.) Some of the items have descriptions that are just a few lines, but other items have descriptions that extended beyond the height of the thumbnail - which is why I like using HTML tables.

Anyways, I would appreciate some thoughts on the “right” and “wrong” ways to attach a problem like this, before I go too far down the rabbit hole.

(And, yes, I understand that experience is the best teacher, but it also sometimes makes sense to get good advice before you go build a pile of junk!) :wink:

Thanks.

P.S. Sometimes what frustrates me is that there just seems to be sooo many ways to accomplish things these days with HTML/CSS. I think having all of these tools/approaches makes it overwhelming as a newbie.

P.P.S. Yeah, @coothead, I am the king of “Analysis Paralysis”!! :biggrin:

6

OK. :biggrin:

Well, as you are so fond of thinking, think to yourself…

  1. I like the the idea of the table element, I wonder
    if it’s possible to create my desired layout using the
    CSS property display: table instead.
  2. Perhaps I should Suck It And See :lips: :tongue:

It might keep you out of mischief over the weekend. :rofl:

coothead
.

7

See, another concept that I have to master - CSS Tables?! :unhappy:

It’s so frustrating being 90% done with a website, having forgotten most of HTML/CSS, plus now there is like 5X as much HTML/CSS as when I stopped.

I have been trying to avoid going back to school on all of this and just get my site done before I crack open the books for v2.0.

Actually, I think this requires more thinking… :shifty:

Comments:
I shouldn’t have called the above mockup a “Shopping Cart” because that appears during checkout and is more like an “order summary”. (A “Shopping Cart” would have more things like “Quantity”, “Update”, “Delete”, etc. and would definitely be tabular!)


Questions:
1.) I assume using HTML tables is a bad idea if a person wants a responsive solution, right?

2.) Since each Item is a logical grouping, does that mean I shouldn’t use Flexbox or Inline-Block? Or could I use those approaches, and then juts have a parent DIV to encapsulate the Item row?

3.) Are CSS Tables still considered “current”? And are they good for responsive designs?

4.) I found one Shopping Cart example online that as supposedly responsive, but all they did was use a lot of DIVs and Floats which didn’t seem like a good approach. I assume “Divitis” is still a bad thing, right?

8

My approach is to first get it to work, try with min, max and possibly no values or images, etc. If it does not work then try a different approach…

Basically the idea is to produce a finished web page as quickly as possible.

9

That’s why I am fishing for hints and tips before I take the plunge into @coothead’s advice of “Suck it up and see”… :wink:

Speed is not my strength, and so I always worry about going down some horribly wrong path, and that’s why I’m here - to learn how to avoid obvious mistakes.

10

Just accept the fact that you will never, ever please all the people all the time, especially keyboard warriors :slight_smile:

Avoid procrastinating, complete the task and request a review.

No ifs, buts or maybes accepted. Just complete the task. There is always a better way :slight_smile:

1 Like
11

@John_Betong,

Do you agree that CSS tables are the way to go?

Are they still considered “current”?

12

Both queries were covered in my previous post :slight_smile:

13

Definitely not. :unhappy:

The point of the exercise, which I suggested, was to get
you to try it and find out for yourself that it would not work. :winky:

But it seems that all my attempts to get you to write code
instead of your just “thinking about it” are doomed.

You don’t seem to comprehend that writing code that turns
out to be unsuccessful is extremely beneficial to the learning
process.

Further reading:-

  1. Don’t Fear Failure: Nine Powerful Lessons We Can Learn From Our Mistakes
  2. Study Reveals Why We Learn From Mistakes

coothead

1 Like
14

@coothead,

I see.

I understand that concept, but I think you’re missing the fact that I’m asking for help at a higher level.

Do I need a hammer or a saw or a screwdriver or a paintbrush?

If I knew how CSS tables (or other things) worked, then your advice would be spot on.

But there is nothing gained in randomly trying things that are bound to ail.

Would you advise me to take off the rest of the year studying Python or maybe Javascript to solve my problem?

If I had all of the time in the world, I’d take the rest of the year to read the entire SitePoint library of books, then I’d take the first half of next year randomly coding what I learned, then I’d probably have a decent solution.

But since I hope to have my website done by the end of the summer - if that is even conceivable at this point - some guidance would be immensely helpful!

I’ll be the first to admit that it is tough trying to re-learn what you once knew from years ago, plus trying to learn things which you don’t know, when you are 90% into a project, but alas, that’s life!

So please don’t think of me as lazy or afraid to fail, rather see me as someone trying to work smart with limited time and resources… :wink:

I’ll check those out…

15

@coothead,

Please see the attached code and tell me what you think…

sp_review-cart_02.zip (273.8 KB)

(You will need to adjust the IMG path…)

I think things look really sharp, and they seem to work okay, but I’m not sure how “responsive” things are, or how efficient my code is. :wonky:

16

Hi there UpstateLeafPeeper,

the page seems to work reasonably well on page width reduction
but has problems in various browsers on desktop width, see the
attachment for snapshots.

brower-shots.zip (260.2 KB)

I am disappointed to see that you are still using px units where em
or rem would be more appropriate.

coothead.

17

@coothead,

Each of those is a screenshot of a single browser window?

Things are so jumbled up it’s hard to tell what I am looking at.

I tried things in Firefox’s Responsive Design Mode last night on things like various iPhones and Tablets and I thought the page looked awesome.

Am confused by your screenshots…

You’re often disappointed in me! :wink:

I guess I tend to still use pixels when it comes to spacing and boxes and REMs more for text.

So you recommend using EMs or REMs for everything?

18

@coothead,

Attached are screenshots from Chrome’s “Toggle Device Toolbar”…

Things look equally good from what I tried in Firefox last night.

(I cannot speak to IE or Edge since my Dev environment is on my Mac.)

Not sure where/how you are getting such strange results… :wonky:

MobileScreenshots.zip (1.3 MB)

19
  1. Yes.
  2. Each of the screen shots -(1366 x 768 ) - has the browser’s name.
  3. The screen shot for Firefox shows the only acceptable rendition.
  4. I am sorry to here that, but I do not have the ability to help you with
    that condition.
  1. Not you personally.
  2. border: 1px solid #000; seems like a reasonable use for a px unit.
  3. I will give you a treat for that…
     
    deafshadow’s thoughts on the use of the px unit
     
    …but be aware that it’ not suitable reading for the fainthearted. :rofl:

coothead

20

Hi there UpstateLeafPeeper,

My screenshots were taken on Windows 10,
which is not my normal OS, but was used
because it contained a wide range of test
browsers.

The screen resolution was 1366 x 768

It appears that you cannot test your code in
Windows and I cannot test mine on a MAC

The bottom line seems to be that your pages
render as you intended on screen widths that
you set with this code…
@media only screen and (min-width: 768px)

coothead