weixin_47192981的博客

关于flex布局基础知识差不多介绍完了，这个布局是我平时使用很多的一个布局，可以解决很多手动排版以及图片与文字对齐等等的问题，希望大家可以掌握好这个布局，会十分得心应手！即，定义时要将flex定义在父元素，把父元素当做‘容器’，然后改变内部子元素的排列方式。如上图，父元素宽度已经不能承载所有子元素放到一行，但是由于没有设置换行，所以会压缩子元素，强制排到一行。在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。主轴和交叉轴是垂直的，两个轴的由来取决于子元素的排列方式，如图。

首先四个方向（top、bottom、left、right）的boder都设置颜色，为了区分，设置不同的颜色，最终就会呈现上图中第一张图的颜色。首先四周的边框厚度可以根据自己的需求来调节（我采取的100px），虚实线都可以，都是透明色（后面颜色覆盖）。如果只要某一个方向的，比如尖角向上（上图红色），那么就只设置border-bottom-color就可以啦。思路：盒子的高度和宽度必须是0，呈现的效果完全是通过盒子的上下左右边框撑起来。