Flexbox

• flex-direction：决定主轴的方向；

    <div class="bg-red flex-box" :style="{height:200,width:200}">
            <text class="bg-blue">鱼</text>
            <text class="bg-blue">鱼</text>
            <text class="bg-blue">鱼</text>
        </div>

• align-items 交叉轴的布局
  flex-direction: row;
  image.png

flex-direction: row; align-items:center;

image.png

flex-direction: column;

image.png

flex-direction: column; align-items:center;

image.png

• justify-content 主轴的布局

• line-height
  不直接影响元素高度，而是影响文本每行的高度，如果元素内因换行而产生多行文本，那么 line-height 对元素高度的影响也要乘上行数