最近在写一个类似对话框的功能，包含头像和右侧内容，当时就想到用flex布局，布局实现了，却发现一个样式方面的问题。
这是产品要求的样式，当内容为单行是需要垂直居中对齐，多行的时候需要居上对齐，如图：
当时想的是用flex布局时出现的这种问题，能不能去找找flex的属性，看看能不能有什么好的解决方法
一：flex布局
flex布局是一种布局模型，flex比较好用的原因是布局形式比较灵活，缺点也是有的，flex只能依靠自己的布局新模式，一点处理不好样式就会有问题。例如右侧内容样式没有垂直居中的问题，导致样式看起来就会有点问题。
二：flex 属性是flex-grow 、flex-shrink和flex-basis属性的简写属性
flex属性是定义在需要布局弹性盒模型对象的子元素的父级元素上的，定义后，flex有作用于自身的样式
- flex-direction属性决定主轴的方向（即项目的排列方向）默认值：row（属性值来源于菜鸟教程）
- flex-wrap属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
默认值:nowrap （属性值来源于菜鸟教程）
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值：row nowrap。
（属性值来源于菜鸟教程）
- justify-content属性定义了项目在主轴上的对齐方式。 默认值：flex-start （属性值来源于菜鸟教程）
- align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
默认值： stretch ****（属性值来源于菜鸟教程）
- align-content属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直） 默认值：stretch （属性值来源于菜鸟教程）
看到这里就明白了，我需要在父级元素上加上自身的样式，需要加的是align-items属性。
我以为只要将align-items：center 就可以解决我的问题，结果我发现我错了，加上后左右两个子元素是居中了，但是当右边内容过长时左边的高度也在拉大，然后左边的内容也一直在居中，这显然是不对的。
然后我又发现flex子集的属性
三：flex 子集属性
- align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式 默认值：auto
（属性值来源于菜鸟教程）
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
（属性值来源于菜鸟教程）
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
（属性值来源于菜鸟教程）
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目的本来大小。（属性值来源于菜鸟教程）
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。（属性值来源于菜鸟教程）
看子元素的属性就知道实现这个要怎么去做了
父级div上属性
{
display: flex;
align-items: center;
}
左侧子元素
{
align-self: flex-start;
}
至此就解决问题了，虽然添加的东西不是很多，但是学习到了很多。
