通过设置display样式为table-cell。
1、定义div的css
<style>div{
display:table-cell
}
</style>
2、定义水平div
<body><div>1</div><div>2</div><div>3</div>
</body>
补充：
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性。
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，
同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。
————————————————
1.什么是flex
flex 是 Flexible Box 的缩写,意为 弹性布局
flex布局中把一个元素作为容器，容器中的子元素称为项目
可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。
2.flex布局的方向
flex布局项目的排列方向可以有两个维度，一水平，二垂直
项目排列方向称为主轴，与主轴垂直的方向叫交叉轴
在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。
2.1 flex水平布局
在水平维度，默认方向是从左至右
可以通过 flex-direction：row-reverse设置为从右到左排列
效果图：
1).默认方向,从左至右
2).反方向
2.2 垂直布局
效果图：
1).默认方向，从上到下
2).反方向
3. 容器内项目换行
通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。
不换行的称为单行容器，换行的称为多行容器
也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）
效果图：
1).默认不允许换行，项目被压缩
2).允许换行，当剩余宽度不足容纳一个项目块时，就换行
相关知识：
css如何实现边框长度控制功能
详细介绍css中的数学表达式calc()
关于书籍：需要学习资料的小伙伴们可以加群， 点击此处
