現(xiàn)在的網(wǎng)站建設(shè)大部分都是用CSS布局，在此之前卻是完全不同的。這得力于CSS的快速發(fā)展和更好的應(yīng)用，Penpot通過Flex Layout徹底改變了這一點，使設(shè)計人員能夠使用CSS Flexbox直觀地制作布局，并無縫地將其轉(zhuǎn)換為代碼。


在設(shè)計工具中，筆筒有著特殊的地位。它是一個開源的設(shè)計工具，旨在讓設(shè)計師和開發(fā)人員一起工作，幫助他們使用同一種語言。它也是第一個完全開源的基于開放網(wǎng)絡(luò)標準的設(shè)計工具。對于密切合作的設(shè)計師和開發(fā)人員來說，這是一個完美的選擇，因為Penpot的方法可以幫助從根本上改善設(shè)計到開發(fā)的過程，并毫不費力地使它們無縫和更快。

作為開源軟件，Penpot在社區(qū)的支持下發(fā)展得非?？?。當我第一次寫筆筒幾個月前，我分享了我對該應(yīng)用的布局功能的興奮，這些功能最終帶來了設(shè)計和代碼之間的平等，并遵循與CSS相同的規(guī)則。從那時起，Penpot背后的團隊已經(jīng)使創(chuàng)建布局變得更好，所以他們值得另眼相看。我真的很喜歡玩新的鋼筆功能，我相信你可能也想嘗試一下。

如果您曾經(jīng)編寫或閱讀過CSS代碼，那么您很有可能已經(jīng)偶然發(fā)現(xiàn)了Flexbox。它是構(gòu)建現(xiàn)代網(wǎng)絡(luò)布局的基石，很有可能，你每天訪問的每個網(wǎng)站都會用到它。Flexbox是創(chuàng)建簡單、靈活布局的基礎(chǔ)。這是定位元素最常見的方式:將它們堆疊成行和列，并決定它們應(yīng)該如何對齊和分布。

因此創(chuàng)建Flexbox布局是大多數(shù)web移交流程的重要部分。并且經(jīng)常耗費時間，導(dǎo)致設(shè)計和開發(fā)之間的摩擦。通常，開發(fā)人員試圖通過從頭開始重建設(shè)計師制作的布局來將靜態(tài)模型翻譯成代碼。由于大多數(shù)設(shè)計師不寫CSS代碼，而且大多數(shù)設(shè)計工具遵循與CSS不同的邏輯，很多東西可能會在翻譯過程中出錯或丟失。

這就是Penpot的Flex布局發(fā)揮作用的地方。內(nèi)置鋼筆的布局不需要繁瑣的翻譯成代碼。盡管設(shè)計師可以使用熟悉的可視化界面來構(gòu)建它們，但它們是現(xiàn)成的生產(chǎn)代碼。即使他們需要調(diào)整，他們?nèi)匀豢梢怨?jié)省開發(fā)人員大量的時間和猜測，因為他們遵循的邏輯是他們已經(jīng)熟悉和理解的。

所以從根本上來說，這對每個人都有好處。開發(fā)人員的工作量減少了，因為他們可以直接獲得所需的代碼。這對設(shè)計師來說更好，因為他們可以更好地控制最終效果，更好地理解他們設(shè)計的技術(shù)。最后，這對業(yè)務(wù)有好處，因為它節(jié)省了每個人的時間。