CSS样式中 Flexbox 布局模块-弹性布局

*作用：简化代码操作，不用再使用浮动或者定位。

1.确定浏览器版本 

2.在未使用flexbox布局时：

<div class="flex1">
    <div class="flex2">1</div>
    <div class="flex2">2</div>
    <div class="flex2">3</div>
</div>


<style>
    .flex1{
        background-color: blue;
    }
    .flex2{
        width: 50px;
        height: 50px;
        border: 1px solid black;
        background-color:antiquewhite;
    }
</style>

 3.当在外部容器 添加 display：flex 时：

                布局发生改变，横向布局，比原先写法更加简单。

 

  4.flex 容器属性

属性名称	参数	描述
flex-direction	column	设置垂直堆叠 flex 项目（从上到下）
	column-reverse	垂直堆叠 flex 项目（但从下到上）
	row	（从左到右）
	row-reverse	水平堆叠 flex 项目（但从右到左）
flex-wrap	wrap	规定 flex 项目将在必要时进行换行
	wrap-reverse	弹性项目将以相反的顺序换行
flex-flow	先direction后wrap	属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性
justify-content	center	将 flex 项目在容器的中心对齐
	flex-start	将 flex 项目在容器的开头对齐（默认）
	flex-end	将 flex 项目在容器的末端对齐
	space-around	显示行之前、之间和之后带有空格的 flex 项目
	space-between	显示行之间有空格的 flex 项目
align-items	center	将 flex 项目在容器中间对齐
	flex-start	将 flex 项目在容器顶部对齐
	flex-end	将弹性项目在容器底部对齐
	stretch	拉伸 flex 项目以填充容器（默认）
	baseline	使 flex 项目基线对齐
align-content	space-between	显示的弹性线之间有相等的间距
	space-around	显示弹性线在其之前、之间和之后带有空格
	stretch	拉伸弹性线以占据剩余空间（默认）
	center	在容器中间显示弹性线
	flex-start	在容器开头显示弹性线
	flex-end	在容器的末尾显示弹性线

---

        1.flex-direction: column-reverse;

        

        2.flex-direction: row;

         

        3. flex-direction: row-reverse;

        

         4.flex-wrap:wrap;

        

        5.flex-wrap:wrap-reverse;

         

        6.justify-content:center;

                 

        7.justify-content:flex-start;

        

        8.justify-content:space-around;

         

        9.justify-content:space-between;

        

        10.align-items:center;

        

        11.align-items:flex-start;