CSS之Flex布局

Flex布局的介绍

 　　Flex布局的出现主要是为了解决一些特殊的网页布局方式，比如垂直居中。传统的网页布局会通过float、position等对DOM结构进行放置，但是这些方式只能适用于一些简单的网页布局，对于一些特殊的布局方式，就不是那么容易的实现了。

　　兼容性：几乎兼容现在所有的浏览器，所以可以大胆的使用

　　DOM元素使用Flex布局：　

.box{
    display:flex;  
    display: -webkit-flex; /* Safari */
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

　　采用Flex属性后的容器，有以下属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Flex布局的具体使用

• 先搭建页面DOM结构

<div class="box">
    <div class="min-box">1</div>
    <div class="min-box">2</div>
    <div class="min-box">3</div>
    <div class="min-box">4</div>
</div>

• 编写初始化样式

.box{
    height: 800px;
    width: 1000px;
    display: flex;
    display: -webkit-flex;
}
.box .min-box{
    width: 100px;
    height: 100px;
    border: 1px solid #83a517;
    margin: 5px;
}

1.flex-direction属性

　　一共有四个值：

　　　　1.row(默认值):水平向右正序排列

.box{
    height: 800px;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
}
.box .min-box{
    width: 100px;
    height: 100px;
    border: 1px solid #83a517;
    margin: 5px;
}

效果：

　　　　2.row-reverse：水平向右倒叙排列

  .box{
      height: 800px;
      width: 100%;
      display: flex;
      display: -webkit-flex;
      flex-direction: row-reverse;
  }
  .box .min-box{
      width: 100px;
     height: 100px;
     border: 1px solid #83a517;
     margin: 5px;
 }

效果：

　　　　3.column：从上到下顺序排列

.box{
    height: 800px;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}
.box .min-box{
    width: 100px;
    height: 100px;
    border: 1px solid #83a517;
    margin: 5px;
}

效果：

　　　　4.column-reverse：从上到下倒序排列

.box{
    height: 800px;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column-reverse;
}
.box .min-box{
    width: 100px;
    height: 100px;
    border: 1px solid #83a517;
    margin: 5px;
}

效果：

 2.flex-wrap属性