用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 新手教程 小技巧系列 查看內容

湖人vs掘金视频直播:當小程序的flex布局遇到button時,justify-content不起作用的原因及解決方案 ...

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-12-5 00:31

當小程序的flex布局遇到button時,justify-content不起作用的原因及解決方案在做小程序的時候,要實現下面的搜索歷史界面下面的搜索很明顯的想到是用flex布局,然后把justify-content設置為justify-content: flex-st ...

湖人vs爵士季后赛的flex布局遇到button時,justify-content不起作用的原因及解決方案 
在做小程序的時候,要實現下面的搜索歷史界面

下面的搜索很明顯的想到是用flex布局,然后把justify-content設置為justify-content: flex-start; 
代碼如下:

  1. <view class="flex">
  2. <button class="item">1</button>
  3. <button class="item">2</button>
  4. <button class="item">3</button>
  5. <button class="item">4</button>
  6. <button class="item">5</button>
  7. <button class="item">6</button>
  8. <button class="item">7</button>
  9. </view>
  1. .flex{
  2. display: flex;
  3. flex-wrap: wrap;
  4. justify-content: flex-start;
  5. }
  6. .flex .item{
  7. width: 216rpx;
  8. background-color: red;
  9. margin-bottom: 34rpx;
  10. }

可效果卻不盡人意,發現justify-content不起作用,無論怎么設置都是space-around的效果。 
經過排查,發現原因是小程序button中的默認樣式中的margin-left: auto;margin-right: auto;所引起的。

flex 格式化上下文中,在通過 justify-content 和 align-self 進行對齊之前,任何正處于空閑的空間都會分配到該方向的自動 margin 中去。參考自探秘 flex 上下文中神奇的自動 margin

原因找到了,具體修改就容易多了,我們可以覆蓋button的margin-left和margin-right的默認值,或者在button外面包裹一層view。

在遇到這個問題之前,我也沒想到過flex和margin之間還能這么用,漲姿勢了

分享至 : QQ空間
收藏
原作者: lkkwxy 來自: 簡書