基础知识：
采用Flex布局的元素，被称为Flex容器(flex container)，简称"容器"。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称"项目"
Flex-direction调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse
要点1：
justify-content: space-between;
使元素分布到容器两端。类似于 float left , float right 的功能。
要点2：
flex-direction: row | column;
使元素按行 或 按 列表 进行排列。
效果：
代码：
<!doctype html>
<html>
<head>
<style>
body {
padding:50px 200px;
}
.item {
width: 300px;
padding: 10px 20px;
background: #f5f6f8;
}
.title-node {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.title-left {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.title-right {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.t-txt {
color: #39a;
font-weight: bold;
}
.t-sub{
color: #888;
}
.icon{
line-height: 36px;
}
</style>
</head>
<body>
<div class="title-node item">
<div class="title-left">
<div class="t-txt">
This is a list item title
</div>
<div class="t-sub">
item(0)
</div>
</div>
<div class="title-right">
<span class="icon">icon</span>
</div>
</div>
<body>
</html>
引用：
https://www.cnblogs.com/wangyawei/p/9103573.html
-