模擬公交站臺豎直排列，兩端對齊

今天看到一個公家車站臺的公家站牌，對站名的排列方式頗有興趣，html和css沒有提供文字豎直排列的簡便方法，須要咱們利用一些技巧才能完成

 

 大概要的效果就是這樣的，豎直排列，兩端對齊

首先先對豎直排列進行設計

先上html代碼：

 1     <ul>
 2         <li><b>站牌1</b></li>
 3         <li><b>站牌2</b></li>
 4         <li><b>長站牌3</b></li>
 5         <li><b>很長的站牌4</b></li>
 6         <li><b>超長的站牌5</b></li>
 7         <li><b>站牌6</b></li>
 8         <li><b>站牌一二7</b></li>
 9         <li><b>站牌一8</b></li>
10         <li><b>站牌9</b></li>
11         <li><b>站牌一二10</b></li>
12         <li><b>站牌1</b></li>
13         <li><b>站牌2</b></li>
14         <li><b>長站牌3</b></li>
15         <li><b>很長的站牌4</b></li>
16         <li><b>超長的站牌5</b></li>
17     </ul>

先對ul進行一些基本的配置：

1 ul {
2     width: 260px;
3     height: 90px;
4     border: 1px solid yellow;
5     margin: 15px;
6     list-style: none;
7 }

初步的效果是：

利用flex伸縮盒來實現效果：

ul {
    width: 260px;
    height: 90px;
    border: 1px solid yellow;
    margin: 15px;
    list-style: none;
    /*定義flex伸縮盒*/
    display: -webkit-flex;
    display: flex;
    /*設置伸縮盒的子元素向兩端對齊*/
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
}

ul li {
    font-size: 11px;
    /*固定寬度使文字強制換行豎直排列*/
    width: 12px;
    text-align: center;
    height: 80px;
    margin-top: 5px;
}

豎直排列的效果：

 

接下來是豎直方向的兩端對齊，我使用的方法是給每個元素加上一個標籤，在li裏面再定義一個flex盒子，以達到效果，我的感受有點麻煩：

html代碼：

<ul>
        <li><span>站</span><span>牌</span><span>1</span></li>
        <li><span>站</span><span>牌</span><span>2</span></li>
        <li><span>長</span><span>站</span><span>牌</span><span>3</span></li>
        <li><span>很</span><span>長</span><span>的</span><span>站</span><span>牌</span><span>4</span></li>
        <li><span>超</span><span>長</span><span>的</span><span>站</span><span>牌</span><span>5</span></li>
        <li><span>站</span><span>牌</span><span>6</span></li>
        <li><span>站</span><span>牌</span><span>一</span><span>二</span><span>7</span></li>
        <li><span>站</span><span>牌</span><span>一</span><span>8</span></li>
        <li><span>站</span><span>牌</span><span>9</span></li>
        <li><span>站</span><span>牌</span><span>一</span><span>二</span><span>10</span></li>
    </ul>

css代碼：

ul {
    width: 260px;
    height: 90px;
    border: 1px solid yellow;
    margin: 15px;
    list-style: none;
    /*定義flex伸縮盒*/
    display: -webkit-flex;
    display: flex;
    /*設置伸縮盒的子元素向兩端對齊*/
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
}

ul li {
    font-size: 11px;
    /*固定寬度使文字強制換行豎直排列*/
    width: 12px;
    text-align: center;
    height: 80px;
    margin-top: 5px;
    /*定義li的flex伸縮盒*/
    display: -webkit-flex;
    display: flex;
    /*設置伸縮盒的子元素向兩端對齊*/
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    /*設置子元素的排列方向是豎直方向*/
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    /*即每一個li的子元素span爲豎直方向的兩端對齊*/
}

最終的效果是：

 

主要用到的3句代碼是：

display:flex; 定義flex伸縮盒

justify-content; 設置子元素的對齊方式

flex-direction;設置伸縮盒子元素的方向