留言板（含图）案例：文字span水平对齐，flex布局垂直居中

已解决问题的方法：
1、多行字母换行：
word-break：break-all；

2、浮动导致的水平不对齐：
flex布局

3、不使用浮动时如何左右排布：
flex布局的justify-content：space-between；

4、中间文字如何靠左：
加flex-basic属性

5、隐藏显示需要占位的情况：
opacity:0

6、右侧×号如何垂直居中：
父元素：position: relative;
子元素： position: absolute; transform: translateY；

留言板原效果图（布局待完善效果）

图示 中间留言内容部分 代码

      <li v-for="(item,index) in list">
        <span>{{index+1}}.</span>
        <span id="essay">{{item}}</span>
        <!-- <div class="delBox"> -->
          <span class="delete" @click="remove(index)">×</span>
        <!-- </div> -->
      </li>

li{
      color: #999999;
      border-bottom: 0.5px solid #e4e4e4;
      font-size: 15px;
      padding: 14px 12px;
      list-style-type: none;
      /* word-wrap: break-word; */
      word-break: break-all;
      /* flex布局 */
      display: flex;
      /* justify-content: row; */
      justify-content: space-between;
    }
    li span{
      color: #b1b1b1;
      font-size: 10px;
      padding: 0 8px;
      background-color: rgb(17, 24, 114);
    }
    .delete{
      padding: 0 5px;
      font-size: 12px;
      cursor: pointer;
      /* 隐藏效果 */
      /* opacity: 0; */
      display: inline-block;
      vertical-align: middle;
    }

一开始使用浮动，后来出现很多问题，比如不能对齐，查了一下float导致不对齐的原因：

*原作者回答：https://zhidao.baidu.com/question/584664527.html*

• 右边的删除元素设置的css是鼠标悬浮显示，原先使用的是display：block和none
• 由于display：none；不占位置，导致了鼠标悬浮时文字重新排列问题，影响布局
• 后来改用flex布局代替float
• 用justify-content: space-between; 解决了×号跟随文字的问题

• 使用opacity:0代替display，解决了占位问题
  （给两个span添加了padding）

现在又出现几个问题：

1、中间文字如何靠左
给中间的span加flex-basic属性

	li span:nth-child(2){
     	 flex-basis: 310px;
	}

来自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html详细的flex布局教程，十分感谢！

2、以及右侧×号如何垂直居中
（display: inline-block; vertical-align: middle;无效）

父元素：position: relative;
子元素： position: absolute; transform: translateY；

查到另一种方法：
父元素：display: table;
子元素：display: table-cell; vertical-align: middle;
但在这里不适用，因为破坏了flex布局的space-between

display:table和display:table-cell实现单行，多行文本垂直居中
https://blog.csdn.net/lishuai_it_trip/article/details/88411550