h5-伸缩布局

1.html代码

 <div class="box">
     <div class="first">1</div>
     <div class="second">2</div>
     <div class="third">3</div>
     <div class="fourth">4</div>
     <div class="fifth">5</div>
 </div>

2.justify-content:属性：设置子元素的排列方式

 <style>
         .box{
             width: 1000px;
             height: 200px;
             border: 1px solid red;
             box-sizing: border-box;
             /*设置为父容器为盒子：会使每一个子元素自动变成伸缩项*/
             display: flex;
             /*设置子元素的排列方式*/
             /*flex-start：让子元素从父容器的起始位置开始排列
             flex-end：让子元素从父容器的结束位置开始排列
             center：让子元素从父容器的中间位置开始排列
             space-between：左右对其父容器的开始和结尾，中间平均分页，产生相同过的间距
             space-around：将多余的空间平均的分页在给每一个子元素的两边  margin：0  auto   ：造成中间合资的间距是左右两边盒子间距的两倍
             space-evenly：使子元素平均分布在把父容器中，且间距相同
             */
             justify-content: space-evenly;
         }
         .box > div{
             width: 200px;
             height: 100%;
         }
         .first{
             width: 200px;
             height: 100%;
             background-color: #65ffdd;
         }
         .second{
             background-color: #5aff61;
         }
         .third{
             background-color: #efffc7;
         }
         .fourth{
             background-color: #47b3ff;
         }
     </style>

效果图：

3.flex-flow:属性：可以代替 flex-wrap和flex-direction

 <style>
         .box{
             width: 900px;
             height: 600px;
             border: 1px solid red;
             box-sizing: border-box;
             margin: 0 auto;
             /*设置父容器为盒子：会使每个子元素自动变成伸缩项
             当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/

             display: flex;
             /*设置子元素在主轴上的排列方式*/
             justify-content: space-evenly;
             /* flex-wrap：控制子元素是否换行显示，默认不换行
             noweap：不换行---则收缩
             wrap：换行显示
             wrap-reverse：翻转
             */
             /*flex-wrap: wrap;*/
             /*flex-direction:设置子元素的排列方向：就是用来设置主轴方向，默认主轴方向是row
             row水平
             column：垂直*/
             /*flex-direction: column-reverse;*/

             /*flex-flow:可以代替  flex-wrap和flex-direction*/
             flex-flow: column wrap;
         }
         .first{
             width: 200px;
             height: 200px;
             background-color: #65ffdd;
         }
         .second{
             width: 200px;
             height: 200px;
             background-color: #5aff61;
         }
         .third{
             width: 200px;
             height: 200px;
             background-color: #efffc7;
         }
         .fourth{
             width: 200px;
             height: 200px;
             background-color: #47b3ff;
         }
         .fifth{
             width: 200px;
             height: 200px;
             background-color: #ff510a;
         }
     </style>

效果图：

4.flex-grow:属性：可以来扩张子元素的宽度：设置当前元素应该占据生于空间的比例值，比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和

 <style>
         .box {
             width: 900px;
             height: 600px;
             border: 1px solid red;
             margin: 0 auto;
             /*设置父容器为盒子：会使每个子元素自动变成伸缩项
             当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/

             display: flex;
             /*设置子元素在主轴上的排列方式*/
             justify-content: space-evenly;

         }
         .first{
             width: 200px;
             height: 200px;
             background-color: #65ffdd;
             /*flex-grow: 可以来扩张子元素的宽度：设置当前元素应该占据生于空间的比例值，
             比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和
             flex-grow的默认值是0：说明子元素不会去占据生于的空间
             */
             flex-grow:;
         }
         .second{
             width: 200px;
             height: 200px;
             background-color: #5aff61;
             flex-grow:;
         }
         .third{
             width: 200px;
             height: 200px;
             background-color: #efffc7;
             flex-grow:;
         }
     </style>

效果图：

5.flex-shrink:属性：定义收缩比例，通过设置的值来计算的收缩空间比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和。默认值为1

 <style>
         .box {
             width: 500px;
             height: 600px;
             border: 1px solid red;
             margin: 0 auto;
             /*设置父容器为盒子：会使每个子元素自动变成伸缩项
             当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/
             display: flex;
             /*设置子元素在主轴上的排列方式*/
             justify-content: space-evenly;
         }
         .first{
             width: 200px;
             height: 200px;
             background-color: #65ffdd;
             /*flex-shrink:定义收缩比例，通过设置的值来计算的收缩空间
             比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
             默认值为1
             */
             flex-shrink:;
         }
         .second{
             width: 200px;
             height: 200px;
             background-color: #5aff61;
             flex-shrink:;
         }
         .third{
             width: 200px;
             height: 200px;
             background-color: #efffc7;

         }
     </style>

效果图：

6.flex:属性：设置当前伸缩子项占据生于空间的比例值

 <style>
         .box {
             width: 100%;
             height: 500px;
             background-color: #ccc;
             margin: 0 auto;
             /*设置父容器为盒子：会使每个子元素自动变成伸缩项
             当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/

             display: flex;
             /*设置子元素在主轴上的排列方式*/
             /*justify-content: space-evenly;*/
         }
         .first{
             /*设置当前伸缩子项占据生于空间的比例值*/
             flex:;
             height: 100%;
             background-color: #65ffdd;
         }
         .second{
             flex:;
             height: 100%;
             background-color: #5aff61;
         }
     </style>

效果图：

7.align-items：属性：设置子元素在侧轴方向上的对其方式

 <style>
         .box{
             width: 900px;
             height: 600px;
             border: 1px solid red;
             margin: 0 auto;
             /*设置父容器为盒子：会使每个子元素自动变成伸缩项
             当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/

             display: flex;
             /*align-items：设置子元素在侧轴方向上的对其方式
             center：设置在侧轴方向上居中对齐
             flex-start：设置在侧轴方向上顶对其
             flex-end：设置在侧轴方向上低对齐
             stretch：拉伸  ：让我的子元素在侧轴方向上尽享拉伸，填充满整个侧轴方向
             baseline：文本基线对齐
             */
             align-items: center;
         }
         .first{
             width: 200px;
             height: 200px;
             background-color: #65ffdd;
         }
         .second{
             width: 200px;
             height: 200px;
             background-color: #5aff61;
             /*设置单个元素在侧轴方向上的对齐方式*/
             align-self: flex-end;
         }
         .third{
             width: 200px;
             height: 200px;
             background-color: #efffc7;
         }

     </style>

效果图：