近期因為使用inline-block，在項目部署后出現了一點小問題，幾番解決未果，遂使用flex布局，於是借此機會對flex布局的用法做一個簡要的匯總。
遇到的bug如下：
本想兩個div使用inlin-block，父元素text-align屬性值為右對齊，從而實現兩個圖標右對齊挨在一起，本地沒問題，部署上線之后computed出來的卻是block（其實看上去又不像block），后來使用flex布局右對齊解決了問題。
一、概念
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
二、容器屬性
首先你得讓元素（容器）
display:flex;