一、flex概念

    flex弹性布局，规定了弹性元素的伸长或缩短适应flex容器的可用空间。适应于做手机端页面，方便简洁。

二、flex属性

    2.1、flex-direction属性

            规定元素如何在flex容器中布局中，定义了主轴方向

           2.1.1 flex-direction：row; flex元素的主轴方向与文本方向一样，从左至右。

           2.1.2 flex-direction：row-reverse; flex元素的主轴方向与文本方向相反，从右至左。

           2.1.1 flex-direction：�column; flex元素的主轴方向与浏览器方向一样，从上至下。

           2.1.1 flex-direction：row; flex元素的主轴方向与浏览器方向相反，从下至上。

     2.2、flex-wrap属性

           规定元素在flex元素中换不换行

          2.2.1 flex-wrap：nowrap; 默认值为不换行

          2.2.2 flex-wrap：wrap；表示flex里面的元素换行

     2.3、justify-content属性（flex主轴方向）

          规定了元素如何在其父级容器主轴方向与其他弹性元素以及父级之间的空间

          2.3.1 justify-content：flex-start； �弹性元素与父级的主轴开始位置进行排列，下一个临近元素紧挨着上一个元素排列

         2.3.2 justify-content：flex-end； �弹性元素从父级的主轴结束位置进行排列，下一个临近元素紧挨着上一个元素排列        

         2.3.3 justify-content：center； �弹性元素到父级两端的距离相等，也就是水平方向上居中。

         2.3.4 justify-content：�space-between；弹性元素中第一个元素与最后一个元素与父级对齐，弹性元素中间间隔相等

          2.3.5 justify-content：space-around；弹性元素左右间距相等且不叠加。即弹性元素中第一个与最后一个与flex容器之间的距离是弹性元素与弹性元素之间的一半。

    2.4、align-item属性（flex交叉轴方向）

          2.4.1 align-item：flex-start; 弹性元素从flex容器的交叉轴的起始位置进行排列，下一个临近元素紧挨着上一个元素

          2.4.2 align-content：flex-end；弹性元素从flex容器的交叉轴结束位置进行排列，下一个临近元素紧挨着上一个元素。

          2.4.3 align-ccontent： center；弹性元素在交叉轴上距离flex容器的顶部与底部的距离相等。换句话说就是竖直方向上的垂直居中

          2.4.4 align-content：baseline；基线对齐。如果弹性元素里面有文字，则默认弹性元素的对齐方式按照文字的基线对齐。

         2.4.5 align-content：stretch；如果不给弹性元素设置高度，默认延伸或缩短为flex容器的高度。即可以设置自适应高度。

三、问题

      如何实现位置元素（element2）宽高在未知元素（element1）里面垂直水平居中？

pug代码：

doctype html

html

    head

        meta("charset="utf-8")

        title 水平垂直居中

    body

        element1

            element2 

less代码:

element1 {

    display: flex;

    justify-content: center;

    align-item"center;

}