使用embeddedfolderview把google drive雲端硬碟的資料夾嵌入網頁內

如果單純只是要用iframe把google的雲端硬碟嵌入網頁內，可以使用以下語法
語法中的{GoogleFolderShareId}指的就是分享google drive取得的網址內的參數
網址後方接上#grid那麼網頁上瀏覽時就會是以預覽小圖的方式呈現，如果把#grid拿掉那麼就會是以列表的方式呈現

<iframe src="https://drive.google.com/embeddedfolderview?id={GoogleFolderShareId}#grid" style="min-height:100vh;" height="100%" width="100%" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>

另外一個可以使用object，好處是當假設目錄是公開的，則任何登入 Google 的人都會看到該目錄的資料夾視圖。否則，就會看到替代的文字鏈接「點擊此連結查看目錄內容」：

<object data="https://drive.google.com/embeddedfolderview?id={GoogleFolderShareId}#grid" width="100%" style="height:100vh" >點擊<a href= "https://drive.google.com/drive/folders/{GoogleFolderShareId}">此連結</a>查看目錄內容</object>

再Chrome上關閉單獨input欄位的autocomplete

在chorme上 html內的input加上autocomplete=off並不能禁止該欄位不自動輸入， google後得到可解決的方案如下： 只需將自動完成設置為獨特的即可。如："autocomplete="new-user-email"

<input class="textInput" id="useremail" name="useremail" autocomplete="new-user-email" type="text"/>

google chrome team的回覆如下：
autocomplete=off 禁用自動完成，但保持自動填充啟用。
autocomplete=garbage 禁用自動填充，但保持自動完成啟用。
自動填充嘗試根據您在 chrome://settings/autofill 中保存的數據填寫表單。
自動完成嘗試根據先前在字段中輸入的值來填充字段。 參考此篇：https://bugs.chromium.org/p/chromium/issues/detail?id=1434624

搞懂css flex-grow, flex-shrink, flex-basis

要控制flexbox內的子物件的寬度最好的方法就是善用下面這三個屬性：

flex-grow: 0;     /* 不增長 - 初始值：0 */
flex-shrink: 0;   /* 不收縮 - 初始值：1 */
flex-basis: 25em; /* 寬度/高度 - 初始值：自動 */

//上面三個屬性可簡寫為
flex:0 0 25em;

如下範例

.flexbox .child{
flex:0 0 25em;
}