H5-簡單彈性伸縮佈局
阿新 • • 發佈：2019-01-03
HTML部分<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>彈性伸縮佈局</title> <link rel="stylesheet" href="css/flex.css" /> </head> <body> <div id="demo"> <p>Uber此前營收和利潤的爆發式增長只是由於摘到了最低處的果實。如果希望繼續以當前速度增長，Uber將需要開拓郊區和二線城市市場。這些地區的居民更分散，其他的交通出行選擇也較少。這意味著，Uber無法通過這些人群獲得足夠多的收入，而單均價格可能也不如人口眾多的大城市。</p> <p>與此同時，Uber還將面臨更大的競爭壓力，這將導致Uber在美國的利潤率下降。桑達拉拉簡表示：“從長期來看，分享出行是一項廉價服務，因此未來多家公司都可以獲得發展空間。”</p> <p>Uber的另一大增長領域在於美國國外市場。Uber已覆蓋了72個國家的400多座城市。Uber將關閉中國業務，不過訊息人士表示，Uber正在重新分配資源，此前從事中國專案的150名工程師將被分配至其他市場，包括拉美和東南亞。</p> </div> </body> </html>
CSS部分
@charset "utf-8"; div{ width: 100%; display: flex; flex-direction: column; 排列方式 從上到下 flex-direction: column-reverse; 從下到上 flex-direction: row; flex-direction: row-reverse ;從右到左 flex-wrap: wrap;自動換行 flex-wrap: nowrap;不自動換行[預設] justify-content: center;所有列居中 justify-content: flex-end; justify-content: flex-start; justify-content: space-around;同下，但兩邊保留一半空間 justify-content: space-between;伸縮專案平局分佈 /*處理剩餘空間*/ align-items: baseline; align-items:center; align-items:flex-end; align-items: flex-start; align-items: inherit; } p{ width: 150px; border: 1px solid red; background: #929292; margin: 20px; padding: 50px; color: white; font-weight: bold; } p:nth-child(1){ /*flex: 1; 分配空間*/ order: 3; } p:nth-child(2){ align-self: center; /*flex:3;*/ order: 2; } p:nth-child(3){ /*align-self:flex-start;*/ /*flex:1;*/ order:1; } /**/