10分鐘學會flex布局

彈性盒子由容器和子元素組成。

容器(flex container)：通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。

子元素(flex item)：容器中的每個單元稱為子元素

容器中存在兩條多軸：主軸（預設水平方向）和側軸（預設垂直方向）

row(預設值)：橫向布局（主軸水平），起點在左端

row-reverse：橫向布局（主軸水平），起點在右端

column：縱向布局（主軸垂直），起點在上端

column-reverse：縱向布局（主軸垂直），起點在下端

nowrap(預設值)：不換行

wrap：空間不夠的話自動換行，第一行在上方

wrap-reverse：空間不夠的話自動換行，第一行在下方

flex-start：預設值，與父容器左端靠齊

flex-end：與父容器右端靠齊

center：在主軸居中

space-between：第乙個子元件位於容器最左端，最後乙個子元件位於容器最右端，然後平均分配在容器水平方向上

space-around：所有子元件平均分配在父容器的水平方向上，左右都有留空隙

normal：預設值

flex-start：flex容器起點

flex-end：flex容器重點

center：居中

10分鐘學會Google Map API

前幾天玩了玩google的map api，感覺還不錯，很簡單。但凡有過任何程式設計經驗的同學，看完以下的教程，都可以在10分鐘內掌握它的主要功能。另外我還做了個簡單的小例子，有興趣的話，請參見 第一步 去 申請乙個keyid 第二步 在html的之間加上對mapapi函式庫的引用，第三步 在html...

5分鐘學會 CSS Grid 布局

這是一篇快速介紹 未來布局的文章。css grid 布局 grid 布局是 設計的基礎，css grid 是建立網格布局最強大和最簡單的工具。css grid 今年也獲得了主流瀏覽器 safari，chrome，firefox，edge 的原生支援，所以我相信所有的前端開發人員都必須在不久的將來學習...

3分鐘看懂flex布局

首先要有個容器，並設定display flex display webkit flex 該容器有以下六個屬性 flex direction 元素排列方向 row,row reverse,column,column reverse flex wrap 換行 nowrap,wrap,wrap rever...