Flexbox - Build flexible, responsive layouts without writing code by xawi

View this thread on steempeak.com
· @xawi ·
$4.20
Flexbox - Build flexible, responsive layouts without writing code
# Flexbox
Build flexible, responsive layouts without writing code

---
## Screenshots
<center><img alt="f1.png" src="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/6288b906-f1.png"/></center>

| <center><img alt="f2.png" src="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/1cc1eba3-f2.png"/><br><a href="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/1cc1eba3-f2.png">View Image</a></center> | <center><img alt="f3.png" src="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/7cbe65f1-f3.png"/><br><a href="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/7cbe65f1-f3.png">View Image</a></center> | <center><img alt="5987c1e5aeea4300016b8b18_Web Design Fundamentals.png" src="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/f9627e54-5987c1e5aeea4300016b8b18_Web Design Fundamentals.png"/><br><a href="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/f9627e54-5987c1e5aeea4300016b8b18_Web Design Fundamentals.png">View Image</a></center> | <center><img alt="59c8d2c3a99f5700012f6039_14-flexbox-flex-child.jpg" src="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/d7cfd011-59c8d2c3a99f5700012f6039_14-flexbox-flex-child.jpg"/><br><a href="https://s3-us-west-2.amazonaws.com/steemhunt/production/steemhunt/2019-01-21/d7cfd011-59c8d2c3a99f5700012f6039_14-flexbox-flex-child.jpg">View Image</a></center> |
| - | - | - | - |
|

---
## Hunter's comment
Hi hunter's, Lemme introduce you the first visual CSS flexbox builder.
So basically **What is Flexbox?**
>  It’s a powerful layout mechanism that lets you solve common responsive web design problems with ease. And with Webflow, you can do it all in 2 simple interfaces.

# 1. Flex Parent
# 2. Flex child 
And its all with #Webflow so **What is webflow?**
> It’s a web design tool, CMS, and hosting platform in one.

They have created a [flexbox game](https://preview.webflow.com/preview/flexbox-game?preview=d1a26b027c4803817087a91c651e321f&m=1) just to help you to learn flexbox faster. and also check out their tutorials for [centering elements with flexbox](https://university.webflow.com/article/centering-elements-with-flexbox) and [ building equal-height layouts with flexbox](https://university.webflow.com/article/equal-height-layouts-with-flexbox)
# Video Review
https://www.youtube.com/watch?time_continue=11&v=KIktkACny9w

---
## Link
https://flexbox.webflow.com/

---
<center><br/>![Steemhunt.com](https://i.imgur.com/jB2axnW.png)<br/>
This is posted on Steemhunt - A place where you can dig products and earn STEEM.
[View on Steemhunt.com](https://steemhunt.com/@xawi/flexbox-build-flexible-responsive-layouts-without-writing-code)
</center>
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 73 others
properties (23)
post_id69,116,836
authorxawi
permlinkflexbox-build-flexible-responsive-layouts-without-writing-code
categorysteemhunt
json_metadata"{"tags":["steemhunt","flexbox","webdevlopment","webflow","css"],"image":["https:\/\/s3-us-west-2.amazonaws.com\/steemhunt\/production\/steemhunt\/2019-01-21\/6288b906-f1.png","https:\/\/s3-us-west-2.amazonaws.com\/steemhunt\/production\/steemhunt\/2019-01-21\/1cc1eba3-f2.png","https:\/\/s3-us-west-2.amazonaws.com\/steemhunt\/production\/steemhunt\/2019-01-21\/7cbe65f1-f3.png","https:\/\/s3-us-west-2.amazonaws.com\/steemhunt\/production\/steemhunt\/2019-01-21\/f9627e54-5987c1e5aeea4300016b8b18_Web Design Fundamentals.png","https:\/\/s3-us-west-2.amazonaws.com\/steemhunt\/production\/steemhunt\/2019-01-21\/d7cfd011-59c8d2c3a99f5700012f6039_14-flexbox-flex-child.jpg"],"links":["https:\/\/flexbox.webflow.com\/"],"community":"steemhunt","app":"steemhunt\/1.0.0"}"
created2019-01-21 15:00:24
last_update2019-01-21 15:00:24
depth0
children9
net_rshares9,121,211,480,024
last_payout2019-01-28 15:00:24
cashout_time1969-12-31 23:59:59
total_payout_value3.097 SBD
curator_payout_value1.107 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length2,830
author_reputation165,958,690,743,756
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries
0.
accountsteemhunt
weight1,000
1.
accountsteemhunt.pay
weight500
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (137)
@dayleeo ·
$0.20
https://cdn.steemitimages.com/DQmapJ121LEyQtfmmtwbxwXg9vpurv9Un6zjMZt19gR3EyR/sh-up.png
><center>*Hunt-Master-Extrordinaire! Thank you for following our posting guidelines! Your hunt has been verified- Yay!*</center>

---

Please read our [posting guidelines](https://github.com/Steemhunt/web/blob/master/POSTING_GUIDELINES.md).
Connect with Steemhunt
* [Discord Group](https://discord.gg/mWXpgks)
* [Telegram Chat](https://t.me/steemhunt)
* [Twitter](https://twitter.com/steemhunt)
πŸ‘  , ,
properties (23)
post_id69,117,073
authordayleeo
permlinkre-xawi-flexbox-build-flexible-responsive-layouts-without-writing-code-20190121t150418320z
categorysteemhunt
json_metadata{"tags":["steemhunt"],"community":"steemhunt","app":"steemhunt\/1.0.0","verified_by":"dayleeo"}
created2019-01-21 15:04:21
last_update2019-01-21 15:04:21
depth1
children0
net_rshares380,030,635,501
last_payout2019-01-28 15:04:21
cashout_time1969-12-31 23:59:59
total_payout_value0.150 SBD
curator_payout_value0.047 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length482
author_reputation100,000,000,000,000
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (3)
@steemitboard ·
Congratulations @xawi! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x60/http://steemitboard.com/notifications/postallweek.png</td><td>You published a post every day of the week</td></tr>
</table>

<sub>_[Click here to view your Board](https://steemitboard.com/@xawi)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>


To support your work, I also upvoted your post!


> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
post_id69,119,972
authorsteemitboard
permlinksteemitboard-notify-xawi-20190121t161426000z
categorysteemhunt
json_metadata{"image":["https:\/\/steemitboard.com\/img\/notify.png"]}
created2019-01-21 16:14:27
last_update2019-01-21 16:14:27
depth1
children0
net_rshares0
last_payout2019-01-28 16:14:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length752
author_reputation38,705,954,145,809
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@dinshatech ·
$0.44
An easy way to layouts for your next web idea. There are many options to choose from and the beeter part is uou no need to write any code to buid layouts from Flexbix. 
Great hunt
πŸ‘  , , , , , , ,
properties (23)
post_id69,121,905
authordinshatech
permlinkre-xawi-flexbox-build-flexible-responsive-layouts-without-writing-code-20190121t170528336z
categorysteemhunt
json_metadata{"tags":["steemhunt"],"community":"steemhunt","app":"steemhunt\/1.0.0"}
created2019-01-21 17:05:30
last_update2019-01-21 17:05:30
depth1
children0
net_rshares839,148,963,266
last_payout2019-01-28 17:05:30
cashout_time1969-12-31 23:59:59
total_payout_value0.332 SBD
curator_payout_value0.105 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length179
author_reputation22,387,211,385,683
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (8)
@tfame3865 ·
$0.57
I am really enjoying what am seeing this days. The way a lot of platform has make coding more easier this days has gotten me really happy. This has really shown that a lot of persons are working. Very soon,  it will be more easier than all this.

I love what Flexbox is offering, they have web design tool, CMS, and hosting platform all in one. This is really powerful @xavi
πŸ‘  , , , , , , , ,
properties (23)
post_id69,125,912
authortfame3865
permlinkre-xawi-flexbox-build-flexible-responsive-layouts-without-writing-code-20190121t185115299z
categorysteemhunt
json_metadata{"tags":["steemhunt"],"community":"steemhunt","app":"steemhunt\/1.0.0"}
created2019-01-21 18:51:18
last_update2019-01-21 18:51:18
depth1
children0
net_rshares1,086,531,262,722
last_payout2019-01-28 18:51:18
cashout_time1969-12-31 23:59:59
total_payout_value0.428 SBD
curator_payout_value0.137 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length374
author_reputation338,844,156,139,202
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (9)
@m-ssed-t ·
$0.53
Flexbox is a powerful tool for non-coders, but I'm always wary when a tool has hosting build-in.

I've not checked whether it's an option, but I suspect it's not. In which case, your website is tied to Flexbox for it's hosting. Which means a) no Flexbox, no website, and b) you can't take your website to another hosting company. Either way, it's not a compromise I'd be willing to take.

And CSS Grids can do pretty much anything Flexbox can (plus more), is fairly easy to code, and as it's part of the CSS language, you can use it on any website, on any platform, and once you've used it, host your website anywhere you like.

Yes, Flexbox is easy, but that ease-of-use could come at a hefty price down the line.

If you're thinking of looking at Flexbox, I'd strongly recommend you check out CSS Grids too. Just sayin's all.

Nice hunting @xawi
πŸ‘  , , , , , , , ,
properties (23)
post_id69,133,713
authorm-ssed-t
permlinkre-xawi-flexbox-build-flexible-responsive-layouts-without-writing-code-20190121t230942133z
categorysteemhunt
json_metadata{"tags":["steemhunt"],"community":"steemhunt","app":"steemhunt\/1.0.0"}
created2019-01-21 23:09:45
last_update2019-01-21 23:09:45
depth1
children0
net_rshares1,052,877,754,263
last_payout2019-01-28 23:09:45
cashout_time1969-12-31 23:59:59
total_payout_value0.412 SBD
curator_payout_value0.122 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length847
author_reputation4,001,494,480,869
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (9)
@moeenali ·
$0.43
Great hunt! Now most of the tool are drag and drop and without coding because coding is not easy for everyone so thanks to the maker that help those people who do not know about coding can be able to build layouts easily 
πŸ‘  , , , ,
properties (23)
post_id69,152,615
authormoeenali
permlinkre-xawi-flexbox-build-flexible-responsive-layouts-without-writing-code-20190122t101424699z
categorysteemhunt
json_metadata{"tags":["steemhunt"],"community":"steemhunt","app":"steemhunt\/1.0.0"}
created2019-01-22 10:14:24
last_update2019-01-22 10:14:24
depth1
children0
net_rshares858,065,630,726
last_payout2019-01-29 10:14:24
cashout_time1969-12-31 23:59:59
total_payout_value0.322 SBD
curator_payout_value0.106 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length221
author_reputation236,229,066,263,446
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (5)
@bozz ·
This is really cool!  I have been looking to get into more web design and I have started to work on learning some CSS, but I think this would be really helpful for me.  I still want to learn how things work in the background, but I can see this being an easier tool to use once I learn the fundamentals.  Thanks for sharing.
πŸ‘  
properties (23)
post_id69,155,651
authorbozz
permlinkre-xawi-flexbox-build-flexible-responsive-layouts-without-writing-code-20190122t115650696z
categorysteemhunt
json_metadata{"tags":["steemhunt"],"community":"steemhunt","app":"steemhunt\/1.0.0"}
created2019-01-22 11:54:00
last_update2019-01-22 11:54:00
depth1
children0
net_rshares3,467,186,782
last_payout2019-01-29 11:54:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length324
author_reputation129,154,966,501,488
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@steemhunt ·
### Congratulations!
We have upvoted your post for your contribution within our community.
Thanks again and look forward to seeing your next hunt!

Want to chat? Join us on:
* Discord: https://discord.gg/mWXpgks
* Telegram: https://t.me/joinchat/AzcqGxCV1FZ8lJHVgHOgGQ
properties (22)
post_id69,163,558
authorsteemhunt
permlinkre-flexbox-build-flexible-responsive-layouts-without-writing-code-steemhunt
categorysteemhunt
json_metadata{"tags":["steemhunt"],"community":"steemhunt","app":"steemhunt\/1.0.0","format":"markdown"}
created2019-01-22 15:23:06
last_update2019-01-22 15:23:06
depth1
children0
net_rshares0
last_payout2019-01-29 15:23:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length269
author_reputation539,786,752,958,845
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@steem-ua ·
#### Hi @xawi!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your **UA** account score is currently 3.622 which ranks you at **#5709** across all Steem accounts.
Your rank has improved 3 places in the last three days (old rank 5712).

In our last Algorithmic Curation Round, consisting of 364 contributions, your post is ranked at **#149**.
##### Evaluation of your UA score:

* You're on the right track, try to gather more followers.
* The readers appreciate your great work!
* Good user engagement!


**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
properties (22)
post_id69,241,548
authorsteem-ua
permlinkre-flexbox-build-flexible-responsive-layouts-without-writing-code-20190124t061410z
categorysteemhunt
json_metadata{"app":"beem\/0.20.14"}
created2019-01-24 06:14:12
last_update2019-01-24 06:14:12
depth1
children0
net_rshares0
last_payout2019-01-31 06:14:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length642
author_reputation23,203,609,903,979
root_title"Flexbox - Build flexible, responsive layouts without writing code"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000