在編寫下圖類似的HTML時，我最初使用的float，發現浮動的寫法很不方便，後面經百度改用display:flex進行布局，並對這一CSS屬性產生了濃厚的興趣。

通過幾行代碼輕松解決了左右對齊顯示，並且意外發現通過 align-items: center 還可以實現上下對齊居中

我正在使用 styled-components 去實現前端效果，所以代碼分為樣式部分style.js和頁面部分index.js

style.js:

 1 export const Legend = styled.div`
 2   width: 100%;
 3   display: flex;
 
 4   display: -webkit-flex;
 5   margin:10px 0px;
 6 
 7   .left {
 8     text-align: left;
 9     font-size: 16px;
10 
11     img{
12       margin-right: 5px;
13     }
14   }
15 
16   .right {
17     flex: 1;
18     display: flex;
19     display: -webkit-flex;    
20     align-items: center;          
 
21     justify-content: flex-end;
22   }
23 `;

index.js:

 1           <Divider>圖例</Divider>
 2           {
 3             this.state.thematicLayers.length>0?(
 4               this.state.thematicLayers.map(item => {
 5                 return (
 6                   <Legend>
 7
 
                     <div className=‘left‘>
 8                       <img src={item.tPic} />{item.tName}
 9                     </div>
10                     <div className=‘right‘>
11                       <Switch />
12                     </div>
13                   </Legend>
14                 )
15               })
16             ):(
17               <div>暫無圖層數據</div>
18             )
19           }

下面進入正題，Flex是彈性布局的意思，可以為任意元素指定為Flex布局

1 .box{
2     display: flex;
3     display: -webkit-flex;     /*兼容Safari（ios）*/
4 }

1.flex-direction 屬性

CSS display:flex的示例