CSS界面布局篇—关于display的使用

在做界面布局的时候遇到了这样几个问题：

1. display的使用：

** 目标完成界面**：

实操过程中的结果却如下：

在用flex:1定义了right bar充满剩下的屏幕后，输入任何内容都居中，而我想要让内容从左到右来布局，在尝试了几个方法后发现自己漏了这么一步：

.right1 span{
    display: flex;
}

写入这个css语句后，排版回复正常

2. flex-direction: column

wrapper应用：

.wrapper1{
    margin: 0 auto;
    width: 600px;
    display: flex;
    overflow: hidden;
    padding: 12px 24px;
    flex-direction: column;
  }