# Easily position and center HTML elements with Flexbox

**URL:** <https://forum.pinegrow.com/t/easily-position-and-center-html-elements-with-flexbox/7751>\
**Category:** Styling (CSS)\
**Tags:** tutorial, css, ai-assistant\
**Created:** [February 17, 2023, 5:40am UTC](https://forum.pinegrow.com/t/easily-position-and-center-html-elements-with-flexbox/7751 "2023-02-17T05:40:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [February 17, 2023, 5:40am UTC](https://forum.pinegrow.com/t/easily-position-and-center-html-elements-with-flexbox/7751/1 "2023-02-17T05:40:24Z")

</div>

Here is a quick interactive example on how to use Flex to position HTML elements:

> **[Position and center HTML elements with Flexbox](https://pinegrow.online/@pine/positioning-elements-with-flexbox/)**
>
> A Pinegrow Online project

https://pinegrow.online/@pine/positioning-elements-with-flexbox/

Here is a quick video:

[![](https://img.youtube.com/vi/9DCyz55Txug/maxresdefault.jpg "Position and center HTML elements with Flex - Interactive tutorial") ](https://www.youtube.com/watch?v=9DCyz55Txug)

It also includes AI Assistant and Flexbox jokes:

[![](https://img.youtube.com/vi/GD90Mpg6DzM/maxresdefault.jpg "AI Assistant Flexbox positioning with bonus jokes - Interactive tutorial") ](https://www.youtube.com/watch?v=GD90Mpg6DzM)

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 17, 2023, 11:55am UTC](https://forum.pinegrow.com/t/easily-position-and-center-html-elements-with-flexbox/7751/2 "2023-02-17T11:55:43Z")

</div>

Nice!  
Good to see a nice simple, _Back to Basics_ Layout tutorial agian as things seem to have got rather complex in the WP, ACF…Vue…TailwindUI etc etc… Camp.

but, have you noticed the missing inital paragraph on the link?  
I read it and it made no sense… until I RAN it and it fired up in PG online and there was the missing paragraph! so suddenly the 2nd paragraph made sense.

I guess the cut and paste faeries were _on the sauce_ the night before  
😃

I dont understand this…

 ![Screenshot 2023-02-17 at 11.48.10](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/4f9892ae73ed521b92831fb597f48ceffbc9f8fa.png)

Ah! there it is. the Missing paragraph.

 ![Screenshot 2023-02-17 at 11.49.18](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b3e1e161d50b99a6824af486b855df1a9c13331f.png)

I hope to play around with this tonight and also get back into some photo editing.  
Might make for a nice combo.

Keep up the awesome work 🙂

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [February 17, 2023, 11:28pm UTC](https://forum.pinegrow.com/t/easily-position-and-center-html-elements-with-flexbox/7751/3 "2023-02-17T23:28:06Z")

</div>

Good catch @schpengle, thanks! 🙂