最近在開發公司專案的時候ui設計稿給了這麼乙個設計(這裡是我手動畫的草圖)：
看這效果，第一感覺很簡單，flex布局，左邊寬度自適應，右邊固定寬度。
先回顧下關於文字溢位隱藏的方式：
/* 單行文字 */
.text
/* 多行文字 */
.text
html**
這是乙個按鈕
9.9元
#flex
#left
#left
#left span
#right
span元素的寬度非常的寬，且超過父容器#left，而#left實實在在的還是正常的寬度。
思考了一會，腦子了出現了各種元素的層疊關係，於是給實際文字內容外面，再新增一層div，來控制內容的寬度。
html**
我在左邊，自適應布局
我在右邊，定寬
#flex
#left
/* 新增的內容的父容器 */
#left .box
#left span
#right
span上的寬度，邊框，圓角和背景色樣式，寫到父容器.box上就可以，span裡面只負責存放文字內容。
然後就大功告成了。
本文純屬個人看法，歡迎討論
Flex 中實現按鈕事件頁面跳轉
flex中實際沒有頁面跳轉的概念，都只有在乙個頁面中，隱藏顯示。那怎樣才能很好地實現頁面的跳轉呢？我經過昨天不懈地努力嘗試，終於實現了一種頁面跳轉的方法。使用viewstack時，我碰到的主要問題是 到底是要把某一頁面的相關處理 比如該頁面的按鈕響應事件 放在該頁面裡處理，還是要放在main.mxm...
使用flex實現聖杯布局
聖杯布局就是所說的3欄布局,左右定寬,中間自適應。使用position和float來實現就不說了，主要說一下用flex怎麼來實現 html 我是左邊 我是中間 我是右邊 css content left middle rightflex代表3個屬性flex grow,flex shrink和flex...
使用flex 實現聖杯布局
移動端flex布局最近挺火的，空閒時間也看了些資料！好記性不如賴筆頭，做下筆記吧。閒話少說 先上 container header 頭部 center dyleft 左欄div dycenter dycenter dyright 右欄divx footer 底部 複製 css html,body c...