flex布局

        flex布局的编写不像之前所编写的代码一样，他需要进行分页来编写代码。首先创建一个以css为后缀的flex布局.css文件和一个以html为后缀的flex布局.html文件。在flex布局.css文件的head中编写link元素并在href中输入./flex布局.css，便可在body中编辑自己所要编辑的元素，元素可以是 div 、 section 、  article 等任意元素。然后，我们可以在flex布局.html内添加多个子元素，并使用 flex 属性来控制它们的布局和顺序。

       要在flex布局.html中控制元素需要输入.+加自己编写元素的名称。控制元素有很多子元素 ，接下来将一一展示

       1.flex-direction 属性用于设置子元素的排列方向,可以用于设置项目在主轴方向，通过设置主轴方向可以规定项目的排列方向。在flex-direction中加入row设置主轴为从左到右的水平方向，row-reverse设置主轴为从右到左水平方向。column设置主轴方向从上到下的垂直方向，column-reverse设置主轴为从下到上的垂直方向

       2.justify-content属性用于设置项目于在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间。在justify-content中写入flex-start是默认值，表示项目对齐到主轴起点，项目间不留空隙。flex-end设置项目对齐主轴重点，项目间不留空隙。center设置项目在主轴上居中排列，项目不留空隙。主轴上第一个项目李主轴离主轴起点的距离等于最后一个项目离主轴终点的距离。space-between设置项目两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等。space-around设置每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。

        3.align-items属性用于设置项目在交叉轴上的对齐方式。在align-items中输入center设置项目在交叉轴的中间位置对齐。flex-start设置项目顶部也交叉轴起点对齐。flex-end设置项目底部与交叉轴底部终点对齐。baseline设置项目底部与交叉轴终点对齐。

         4.flex-wrap属性用于规定是否允许项目换行，能够设置多行排列时换行的方向。在flex-wrap中输入nowrap是默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩。wrap设置当容器单行容不下所有项目时允许换行排列。rap-reverse设置当容器单行容不下所有项目时允许换行排列，换行方向为warp的反方向

 flex 属性用于设置子元素的弹性伸缩比例，可以设置为一个数值或 auto 。如果设置为 auto ，则子元素将根据其内容自动调整大小。