位已經入坑的前端小伙伴,前面咱們已經給大家分享了移動端開發時候流式布局的應用場景及注意事項,今天再次給大家分享一個布局叫彈性布局,接下來咱們從如下幾個方面,全方位的給大家介紹彈性布局的使用.

一:什么是彈性布局?

彈性布局(flex container),頁面中任何一個元素只要設置了display:flex屬性,那么當前盒子都稱為彈性盒子.彈性盒子默認有兩條軸: 默認水平顯示的主軸 和 始終要垂直于主軸的側軸(也叫交叉軸),在彈性盒子中所有的子元素都是沿著主軸方向顯示。

二:什么情況下用彈性布局?

①: 以攜程移動頁面為例,在網頁中當遇到需要將父元素按照奇數進行等分,比如攜程中紅色區域是將父元素3等分.如果用流式布局那么就需要設置33.33%.如果用彈性布局只需要給每一個子元素設置一個屬性flex:1即可快速實現.

②:以淘寶網頁為例,當我們需要頁面中多個子元素快速實現在父元素中以左右距離適中顯示的時候,這個時候我們不需要設置任何的px值,只需要給元素設置justify-content:space-around就可以實現.

③:以攜程為例,當頁面中出現子元素按照其他比例分割父元素的時候,依然可以通過彈性盒子中的flex實現快速實現.如圖:紅色區域是按照 2:1:2 和 2:1:1:1的比例顯示.

如果咱們在寫移動端頁面(包括PC端頁面)遇到以上幾種情況的時候,彈性布局是最好的選擇.

三:彈性布局的具體使用

很多小伙伴都清楚彈性布局很好用,但是就是屬性太多記不住而且還容易將屬性對應的效果搞混,所以接下來我將給大家總結一下彈性布局中幾個必須掌握的屬性.

①:彈性布局第一步就是先給父元素設定為彈性盒子,既設置屬性:display:flex.如代碼所示:

②:設置伸縮盒子的主軸方向,默認伸縮盒子中的主軸是水平顯示,所以默認元素都是一行顯示的.可以通過flex-direction屬性調整主軸的方向,改變元素的顯示方式

flex-direction: row的顯示效果如下圖所示:

flex-direction:row-reverse的顯示效果如下圖所示:

flex-direction:column的顯示效果如下圖所示:

flex-direction:column-reverse的顯示效果如下圖所示:

③:設置元素在主軸方向的對齊顯示方式,通過justify-content屬性實現

justify-content:flex-start的顯示效果如下:

justify-content:flex-end的顯示效果如下:

justify-content:space-between的顯示效果如下:

justify-content:space-around的顯示效果如下:

④:設置彈性盒子中元素在側軸(交叉軸)方向的對齊方式通過align-items實現.

align-items: stretch 默認值的顯示效果如下:

align-items:flex-start顯示效果如下:

align-items:flex-end顯示效果如下:

align-items:center顯示效果如下:

⑤:在伸縮盒子中,默認所有的子元素超出父容器寬度后都不換行顯示,如果希望讓超出父元素后換行顯示,可以通過flex-wrap屬性實現

flex-wrap:nowrap 默認效果如下:

flex-wrap:wrap 顯示效果如下:

⑥:在伸縮和中元素換行后設置多行對齊方式,通過align-content屬性實現

align-content:stretch默認值顯示效果:

align-content:flex-start 顯示效果如下:

align-content:flex-end 顯示效果如下:

align-content:center 顯示效果如下:

align-content: space-between 顯示效果如下

align-content: space-around顯示效果如下:

以上屬性都是給彈性盒子設置的屬性,各位小伙伴要注意.如下代碼所示:

⑦:如果希望彈性盒子中子元素按照任何一個比例顯示,可以給子元素設置flex屬性,如下圖所示:

Flex: 1.代表子元素占父元素空間寬度的一份.

Felx:2代表子元素占父元素空間寬度的2份,依次類推

三: 彈性布局優缺點分析

彈性布局在網頁中實現快速分配比例,盒子快速對齊優勢很大,因為通過簡單的幾個屬性就可以實現,進而減少我們設置具體值.但是彈性布局中的屬性對于瀏覽器版本要求比較嚴格,如果瀏覽器版本太低那么彈性布局中的屬性是無法正常使用的.如下圖所示:

寫在最后的幾句話,送給大家.學習任何知識都不是為了去解決某個特定問題的.我們學的知識可以當成是我們工具包中的一個新工具.在恰當的時候使用恰當的工具解決問題就可以了.針對彈性布局中還有其他屬性,由于我們在寫頁面的過程中不是經常用到,所以今天主要分享給大家彈性布局中我們必須會的. 好的這個章節就講到這里。

黑馬最新活動：

黑馬程序員2020年java中級程序員學習路線圖、全部資源免費大放送，點擊下方：“了解更多”的鏈接就可進入頁面領取哦。

開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個由百度開源的低代碼前端框架——amis。

在經歷了十幾年的發展后，前端開發變得越來越復雜，門檻也越來越高，要使用當下流行的 UI 組件庫，你必須懂 npm、webpack、react/vue，必須熟悉 ES6 語法，最好還了解狀態管理，比如 Redux，如果沒接觸過函數式編程，光入門都很費勁，而入門之后會發現它還有巨大的生態，相關的庫有 2347 個，很多功能相似，挑選成本高。

然而前端技術的發展不會停滯，等學完這些后可能會發現大家都用 Hooks 了、某個打包工具取代 Webpack了。使用amis只需要簡單配置就能完成所有頁面開發，你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便沒學過 amis 也能猜到大部分配置的作用，對于大部分常用頁面，應該使用最簡單的方法來實現，甚至不需要學習前端框架和工具。

amis的亮點

• 不需要懂前端：在百度內部，大部分 amis 用戶之前從來沒寫過前端頁面，也不會 JavaScript，卻能做出專業且復雜的后臺界面，這是所有其他前端 UI 庫都無法做到的；
• 不受前端技術更新的影響：百度內部最老的 amis 頁面是 4 年多前創建的，至今還在使用，而當年的 Angular/Vue/React 版本現在都廢棄了，當年流行的 Gulp 也被 Webpack 取代了，如果這些頁面不是用 amis，現在的維護成本會很高；
• 享受 amis 的不斷升級：amis 一直在提升細節交互體驗，比如表格首行凍結、下拉框大數據下不卡頓等，之前的 JSON 配置完全不需要修改；
• amis 內置大量組件，包括了富文本編輯器、代碼編輯器、diff、條件組合、實時日志等業務組件，絕大部分中后臺頁面開發只需要了解 amis 就足夠了；還可以通過 自定義組件 來擴充組件，實際上 amis 可以當成普通 UI 庫來使用。

低代碼可視化編輯器

amis的定位是一個低代碼的前端框架，所以這里我們只介紹低代碼部分，如果你想使用純JSON配置來完成頁面開發，那么請查看一下文檔說明，當然你也可以使用90%低代碼+10%代碼開發的混合模式，既提升了效率，又不失靈活性。

注意：

1.目前 amis-editor 未開源，但可以免費使用（包括商用）

2.要使用編輯器必須熟悉 React

1. 在項目中使用amis-editor

安裝依賴

npm i amis-editor

使用方法

import {Editor} from 'amis-editor';

render() {
  return (
    <Editor
      {...props}
    />
  )
}

屬性說明：

• value: any 值，amis 的json 配置。
• onChange: (value: any) => void。 當編輯器修改的時候會觸發。
• preview?: boolean 是否為預覽狀態。
• autoFocus?: boolean 是否自動聚焦第一個可編輯的組件。
• plugins 插件類集合

2. 添加自定義組件

加自定義編輯器的方式有兩種：

• registerEditorPlugin 注冊全局插件。
• 不注冊，但是調用 <Editor> 的時候時候通過 plugins 屬性傳入。

效果都一樣，重點還是怎么寫個 Plugin，示例：

import {BasePlugin} from 'amis-editor';

export class  MyRendererPlugin extends BasePlugin {
  rendererName = 'my-renderer';

  // 暫時只支持這個，配置后會開啟代碼編輯器
  $schema = '/schemas/UnkownSchema.json'; 

  // 用來配置名稱和描述
  name = '自定義渲染器';
  description = '這只是個示例';

  // tag，決定會在哪個 tab 下面顯示的
  tags = ['自定義', '表單項'];

  // 圖標
  icon = 'fa fa-user';

  // 用來生成預覽圖的
  previewSchema = {
    type: 'my-renderer',
    target: 'demo'
  };

  // 拖入組件里面時的初始數據
  scaffold = {
    type: 'my-renderer',
    target: '233'
  };

  // 右側面板相關
  panelTitle = '自定義組件';
  panelControls = [
    {
      type: 'tabs',
      tabsMode: 'line',
      className: 'm-t-n-xs',
      contentClassName: 'no-border p-l-none p-r-none',
      tabs: [
          {
              title: '常規',
              controls: [
                  {
                      name: 'target',
                      label: 'Target',
                      type: 'text'
                  }
              ]
          },

          {
              title: '外觀',
              controls: []
          }
      ]
    }
  ];
}

定義好 plugin 后，可以有兩種方式啟用

// 方式 1，注冊默認插件，所有編輯器實例都會自動實例話。
import {registerEditorPlugin} from 'amis-editor';

registerEditorPlugin(MyRendererPlugin);

// 方式2，只讓某些編輯器啟用
() => (
  <Editor plugins={[MyRendererPlugin]} />
)

示例只做了簡單的說明，可用屬性還有很多，具體還是先看 npm 包里面的 .d.ts 文件。

3. 編輯器效果

• 網頁版

• 移動端

• 拖拽組件

• 查看代碼

從網頁到移動端，包括App、小程序等，amis可以滿足的頁面需求，但在一些特殊場景，比如有些頁面追求個性化的視覺效果，amis 就不適用，實際上絕大部分前端 UI 組件庫也都不適合，只能定制開發。更多有關amis的內容可自行前往閱讀。

開源地址：https://gitee.com/baidu/amis