Css Flex vs Grid

外卡：多國語言實作 React-18next

複習 flexbox的flex屬性排版

  display: flex;
  flex: 1;

  display: flex;
  flex: 2;

  display: flex;
  flex: 1;

內藏玄機↓

補充說明： flex-basis

1. 設定 flex 的子元素比例時，最好把 flex-grow , flex-shrink 和 flex-basis 分開寫清楚

2. flex-basis：指子元素的基本大小，預設值為 0 ，用來替代 width ，而會優先於width被採用

因此，當設定了flex-grow後，卻沒有按照比例排列，原因通常是子元素的width把它撐開了，這時，設定flex-basis : 0% ，就能取代掉子元素的width，讓比例正常顯示。（畫圖）

Flex vs Grid

一維佈局 vs 二維佈局

（行 or 列 vs 格子狀）

內容 vs 網格

Grid 實現方式：在頂層 (Containers) 寫好

行數、列數以及各自的大小。

Grid Containers

1. grid-template-columns 用來定義這個 Grid 有幾個 columns，每個 column 可以有多少寬度

2. grid-template-rows 就是用來定義 row 的屬性。

單位可以是任何長度(px)、百分比(%) 或是 fr

同時也可以寫成 repeat(n, size)

fr : 一樣是分配剩餘空間，以下圖的 column為例，意思即：將去掉 100px 與 10px 後的剩餘空間，如上例則是分配為 30% 與 70%。

.container {
  grid-template-columns: 100px 10px 0.3fr 0.7fr;
  grid-template-rows: 25% 100px auto;
}

Grid Items

grid-column & grid-row

start / end
span [number]：該 item 會橫跨 [number] 個 block
auto：自動放置，等於 span 1

.grid-container {
  display: grid;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.item5 {
  grid-column: 1 / span 3;
  grid-row: 3;
}

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
</div>

Grid 置中方法

1. Grid Container 可以用 justify-items 與 align-items 來控制每個 Grid-item 的垂直與水平位置。

2. Grid Item 則是可以用 justify-self 與 align-self 來控制自己在網格中的位置。

外卡：多國語系套件 react-i18next

1. package.json

i18next
i18next-browser-languagedetector
i18next-xhr-backend
react-i18next

2. 建立 i18n.js 取用 i18next

// @flow

import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import Languagedetector from 'i18next-browser-languagedetector';

// 創 locales 資料夾存不同語言的json檔
import en from './locales/en.json';
import cn from './locales/cn.json';
import tc from './locales/tc.json';
import fr from './locales/fr.json';
import de from './locales/de.json';
import esp from './locales/esp.json';

i18n
  .use(XHR)
  .use(Languagedetector) //偵測瀏覽器語系
  .init({
    debug: false,
    lng: 'en',
    resources: { //能取用的資源
      en: { translation: en },
      cn: { translation: cn },
      tc: { translation: tc },
      fr: { translation: fr },
      de: { translation: de },
      esp: { translation: esp },
    },
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

3. locales/en.json

{
  "stringID" : "value",
  "Welcome to React": "Welcome to React",
  "CHOOSE_IMAGE": "Choose image",
  "WRAPPER_NOT_SUPPORT": "The file format is not supported",
  "IMAGE_ADDED": "Image added",
  "CHANGE_IMAGE": "Change image",
  "WRAPPRE_DELELTE": "Are you sure you want to delete the image?",
  "WRAPPER_CHANGE_MIND": "No, I change my mind",
  "WRAPPER_CONFIRM_DELETE": "Yes, delete the imgae",
  "IMAGE_REMOVED": "Image removed",
  "SAVE_CHANGES": "Save changes",
  "DISCORD_CHANGES": "Discord changes",
  "WALLPAPPER_REPLACED": "Wallpapper replaced"
}

4. App.js (引用 i18n.js)

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n.js';

// 可使用 changeLanguage 強制轉換語系
//i18n.changeLanguage('zh-TW');
function App({
  client,
  store,
  history,
}: any) {
  return (
    <ApolloProvider client={client} store={store}>
      <Provider store={store}>
        <I18nextProvider i18n={i18n}>
          <StyleRoot style={styles.root}>
            <ConnectedRouter history={history}>
              <Switch>
                <Route path="/" component={MainBoard} />
              </Switch>
            </ConnectedRouter>
          </StyleRoot>
        </I18nextProvider>
      </Provider>
    </ApolloProvider>
  );
}

export default hot(module)(App);

5. component.jsx (使用多國語系)

import React from 'react';
    
 // the hook
import { useTranslation } from 'react-i18next';
    
 function MyComponent () {
   const { t, i18n } = useTranslation();
   // i18n.changeLanguage('cn');

  return <h1>{t('Welcome to React')}</h1>
  }

有以下四種方法：

1. HOC

2. render prop

3. <Trans> component

4. Hook