2. 程式人生 > >CSS Flex column排列時的容器寬度問題

CSS Flex column排列時的容器寬度問題

阿新 • • 發佈：2019-01-11

最近在學習Flex佈局，想模仿小米首頁的商品Tab頁效果：

小米官網Tab頁效果

仔細推敲可以發現，圖中商品的陳列方式並不是一行一行的，而是一列一列的。當第一列排滿後，剩下的一項“彩虹7號電池”會被排到第二列。

DOM的文件流通常是從左到右、自上而下橫向排列元素的。像這種列式排列的，可以用JavaScript實現。但如果想用純CSS實現，就會有些難度。

你可能首先會想到使用Flex佈局，把主軸方向設定為垂直方向。雖然這樣商品豎著排列了，但是你會發現，隨著商品列數的增加，外層的容器並不會自動變寬

Flex外層容器不會自動變寬

這是Flex佈局設計上的一個問題，可以參考這個StackOverflow提問。這裡還有個DEMO更直觀地闡述了這個問題：

jsFiddle連結。

解決這個問題的辦法有不少，對比下來最巧妙的辦法就是：完全不考慮用Flex佈局，利用writing-mode屬性就能搞定。writing-mode是個平時用得很少的屬性，原本是用來方排版豎向的文字，如中國古詩詞。對writing-mode的歷史感興趣的話可以閱讀 張鑫旭大神的文章。

writing-mode既然能讓文字豎著排，也就能讓容器內的元素豎著排。給商品列表的外層容器加上writing-mode屬性，就能解決容器寬度的問題：

.tab-pane {
    // lr可理解為left to right，即垂直方向上從左到右
    writing-mode: vertical-lr
 
; 
}

image.png

似乎不太對，容器內的所有元素都繼承了豎向排版，沒關係，把容器內的元素writing-mode重置成通常文件流的方向：

.tab-pane-items {
    // tb可理解為top to bottom，即水平方向自上而下
    writing-mode: horizontal-tb;
}

最終效果圖

這樣就完美了。:-)

附完整例子程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
 
 content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <style>
  .list-group-item {
    cursor: pointer;
    border-radius: 0;
    border: none;
    background: rgba(0,0,0,.8);
    color: white;
    margin: 0;
    position: static;
  }
  .tabs {
    position: relative;
    background: #eee;
  }
  .tabs .list-group {
    width: 20rem;
    margin-bottom: 0;
  }
  .tab-pane {
    box-shadow: 0 5px 20px gray;
    background: white;
    padding: 2rem;
    position: absolute;
    left: 20rem;
    height: 100%;
    top: 0;
    writing-mode: vertical-lr;
  }
  .tab-pane-items {
    display: inline-block;
    margin: 1rem 3rem 1rem 1rem;
    color: black;
    writing-mode: horizontal-tb;
  }
  span.image {
    padding: 10px 20px;
    margin-right: 1rem;
    background: #ccccff;
  }
  </style>
  <title>Document</title>
</head>
<body style="padding-top: 2rem;">
  <div class="container" id="app">
    <div class="tabs">
      <ul class="list-group">
        <li :class="['list-group-item', index==menu.active?'active':'']" 
          v-for="(item,index) in menu.items" @mouseover="menu.active=index" 
          @mouseleave="menu.active=-1" :key="index">{{item}}
          <div v-show="menu.active==index" class="tab-pane">
            <div v-for="n in (((index+1)*31)%19)" class="tab-pane-items">
              <span class="image"></span>
              <a href="#">iPhone手機</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      menu: {
        active: 1,
        items: [
          '手機 電話卡',
          '筆記本',
          '電視 盒子',
          '路由器 智慧硬體',
          '移動電源 電池 插線板',
          '耳機 音箱',
          '保護套 貼膜',
          '線材 支架 儲存卡',
          '箱包 服飾 鞋 眼鏡',
          '生活周邊'
        ]
      }
    }
  });
  </script>
</body>
</html>

相關推薦

CSS Flex column排列時的容器寬度問題

最近在學習Flex佈局，想模仿小米首頁的商品Tab頁效果： 仔細推敲可以發現，圖中商品的陳列方式並不是一行一行的，而是一列一列的。當第一列排滿後，剩下的一項“彩虹7號電池”會被排到第二列。 DOM的文件流通常是從左到右、自上而下橫向排列元素的。像這種列式

css flex多行時，最後一行元素左對齊

info 元素 justify between 圖片 png 分享圖片 結果 一行 在flex多行布局中，justify-content: space-between; 這個屬性如果最後一行元素沒有填滿，會導致最後一行元素兩端對齊 解決方案： 1.添加空的元素(缺少幾個添

css居然有根據容器寬度自動截取長度加省略號功能，強大!!

plain oct sin != 字符長度 src flow repl 技術分享 作者：☆威廉古堡♂ 項目中最初的做法（js截取）： //字符長度截取包括中英文混合 function subStr(str, len) { str = str.to

vue框架下，echarts圖表外部容器寬度設置為百分比時內容超出容器以及echarts圖表自適應的實現方案

eth script 事件 methods 實現 cti on() block tchart 在vue.js框架下，創建echarts圖表，當圖表的外部容器的寬度設置為百分比時，出現圖表內容寬度超出其外部容器的情況，幾番調試，得解決方案如下： （備註說明：問題產生的具體原因

vue框架下，echarts圖表外部容器寬度設定為百分比時內容超出容器以及echarts圖表自適應的實現方案

在vue.js框架下，建立echarts圖表，當圖表的外部容器的寬度設定為百分比時，出現圖表內容寬度超出其外部容器的情況，幾番除錯，得解決方案如下： （備註說明：問題產生的具體原因尚不清晰，後面若知曉了再補充，但是初期解決問題階段一定不要鑽牛角，不是一開始就能或者可以知道真理的） 在建立了e

CSS將超出容器寬度的文字自動替換為省略號

可使用text-overflow屬性。效果如下圖所示 <template> <section> <p id="clip">clip在內容區域上午極限處截斷</p> <p id="ellipsis">el

HTML5基礎加強css樣式篇（伸縮容器屬性：flex-direction， flex-wrap，flex-flow，align-items，align-content）（五十三）

1.justify-content 屬性詳見（五十二）2.flex-direction:row || row-reverse || column || column-reverse //設定主軸的方向row:預設：row 反向設定主軸方向：column :主軸方向設定為縱軸方

Flex容器_Box_Label自動適應容器寬度問題

今天來看一個比較簡單的場景的處理： 要製作一個標題欄，標題要充滿標題欄，但如果標題太長則截斷顯示，如下圖： 可能你會說，你這不就是一個Label嗎？ 但其實Label出現截斷是有條件的：文字的長度超過Label的寬度。如果標題欄的寬度是固定了（即設定了width為某個值）

padding ,margin百分比賦值時（無論豎，橫）都是相對於容器寬度的

你未必知道的CSS小知識：元素豎向的百分比設定是相對於容器的寬度，而不是高度! 這是一個很讓人困惑的CSS特徵，我之前也談到過它。我們大家都知道，當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，但是，對於一些表示豎向距離的屬性，例如padding

html/CSS 容器寬度自適應

可解決問題： 選單水平居中對齊； 容器背景根據容器內容自由擴充套件（比如選單項背景）； ........ 等等容器寬度自適應問題。 解決程式碼：（很經典啊~~） display:inline-block; *display:inline; *zoom:1; 解釋：（以下轉

解決Input與Select設定CSS寬度相同時顯示寬度不同的解決！

我在css中設定了 input select{width:100px}，但顯示效果為，select比input短了一些 首先在標準相容模式IE和firefox是一樣的，在設成同一個高度或寬度的時候，顯示的input和select不一樣寬，也不一樣高。 在IE上，還沒想到

CSS練習絕對定位於頁面寬度自適應

ear family vertica 寬度 content back left display splay <!DOCTYPE html> <html> <head> <title>九宮格布局</title&g

css --- flex布局

isp order any spl eight splay 交叉點 container 位置 Flex 是 Flexible Box 的縮寫，意為"彈性布局"。任何一個容器都可以指定為 Flex 布局。語法部分參考鏈接在文末給出一篇阮一峰大神的文章，講的非常詳細。 采用

CSS--flex常用的屬性

浮動 對齊 w3c 推薦 column 水平 ram con uno Flex布局 display:flex 指定當前盒子為伸縮盒 flex-direction:column 把盒子內容垂直從上往下排列 row 把盒子內容垂直從左往右排列 flex-wrap:

Bootstrap3基礎 container 瀏覽器寬度與容器寬度的四種配合

dal -- ons type nta ext 鍛煉 css http 禮悟：　　 公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。 虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。 　　

CSS Flex布局

auto -a 如果 col 是否 不足 around 可選值 nowrap 容器屬性 flex-direction屬性 決定主軸的方向。有4個可選值: row（默認值）：主軸為水平方向，起點在左端。 row-reverse：主軸為水平方向，起點在右端。 column：主

css:flex

rect ear max str body play 9.png wrap center <div class="div1"> <div class="block" style="background:#f00">item1<

CSS Flex

IT art con content pac sta end start In justify-content: how the flex items will be aligned along main axis options: flex-start | flex-en

文本溢出顯示省略號，CSS未加載時a標簽仍可用處理方法

結合 on() 模型 多行 方案 ott bold -o 範圍 一、文本溢出打點 （1）單行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; （2）多行文本 overflow : hid

使用min-content實現容器寬度自適應於內部元素

強制 布局 sign 延伸 sid spl 顯示效果 exp ldr 前言 設計師可以分為如下兩類： 先做好設計，然後將內容放入靜態框架中 優秀的設計師充分考慮內容的各個方面及其上下文，並創建適合於內容的設計 HTML原生就是響應式的（HTML內容在視口內流式的分布）。