Flexbox布局基础入门

什么是Flexbox

 Flexbox是 flexible box 的简称（灵活的盒子容器），是css3引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

虽然Flexbox非常适合缩放，对齐和重新排序元素。但对于部分旧版本的浏览器缺乏兼容性，特别对于IE内核的浏览器，IE11及更低版本的浏览器对于Flexbox的渲染效果不是很友好，部分较低版本甚至直接不支持Flexbox。所以如果需要完全支持旧版本浏览器的项目不建议使用Flexbox。

注意： Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网格布局是用于较大规模的布局。 

由于Flexbox是一个整体模块，而不是单一的一个属性，它涉及到了很多东西，包括它的整个属性集。它们之中有一些是在父容器上设置，而有一些则是在子容器上设置。

如图所示：

1. 主轴（侧轴），Flexbox布局里面将一个可伸缩容器按照水平和垂直方向分为主轴或侧轴，如果你想让这个容器中的可伸缩项目在水平方向上可伸缩展开，那么水平方向上就是主轴，垂直方向上是侧轴，反之亦然；
2. 主轴（侧轴）长度，当确定了哪个是主轴哪个是侧轴之后，在主轴方向上可伸缩容器的尺寸（宽或高）就被称作主轴长度，侧轴方向上的容器尺寸（宽或高）就被称作侧轴长度；
3. 伸缩容器：如果要构建一个可伸缩的盒子，这些可伸缩的项目必须要由一个display：flex的属性的盒子包裹起来，这个盒子就叫做伸缩容器；
4. 伸缩项目：包含在伸缩容器中需要进行伸缩布局的元素被称作伸缩项目；

构建Flexbox容器 

首先我们构建一个Flexbox容器，并放置几个可伸缩项目于容器中。

display：flex代表这个容器是一个可伸缩容器，还可以取值为inline-flex,两者的区别在于前者将这个容器渲染为块级元素，后者将其渲染为内联元素。

HTML代码：

<div class="flex-container">
      <div class="flex-item">box1</div>
      <div class="flex-item">box2</div>
      <div class="flex-item">box3</div>
      <div class="flex-item">box4</div>
</div>

css代码：

.flex-container{
    display:flex;
    width:500px;
    height:230px;
    background-color: #ccc;
}
.flex-item{
	background-color:#E8A651;
	width: 100px;
	margin: 5px;
	color: #fff;
}

效果：

四个可伸缩的盒子在水平方向排成一行，同时向左对齐；

flex-direction属性

flex-direction属性：

取值范围为row，column，column-reverse，row-reverse；

默认值是row，表示在水平方向上展开可伸缩项，row-reverse代表反方向展开可伸缩项；

如果取column代表在垂直方向上展开可伸缩项目，column-reverse代表反方向展开可伸缩项；

通俗讲，flex-direction属性就是用来定义主轴侧轴方向的。如下例所示：

HTML代码：

​
<div class="flex-container">
      <div class="flex-item">box1</div>
      <div class="flex-item">box2</div>
      <div class="flex-item">box3</div>
      <div class="flex-item">box4</div>
</div>

​

 CSS代码：

​
.flex-container{
    display:flex;
    flex-direction:column;
    width:500px;
    height:230px;
    background-color: #ccc;
}
.flex-item{
	background-color:#E8A651;
	width: 100px;
	margin: 5px;
	color: #fff;
}

​

效果：

justify-content属性

justify-content属性：

用来表示可伸缩项目在主轴方向上的对齐方式；

取值范围为flex-start,flex-end,center,space-between,space-around；

其中flex-start,flex-end,表示相对于主轴起点和终点对齐，center表示居中对齐，space-between表示两端对齐并将剩余空间在主轴方向上进行平均分配，space-around表示居中对齐然后在主轴方向上将剩余空间平均分配。如下例所示：

HTML代码：

​
<div class="flex-container">
      <div class="flex-item">box1</div>
      <div class="flex-item">box2</div>
      <div class="flex-item">box3</div>
      <div class="flex-item">box4</div>
</div>

CSS代码：

.flex-container{
    display:flex;
    width:500px;
    height:230px;
    background-color: #ccc;
    justify-content: space-between;
}
.flex-item{
    background-color:#E8A651;
    width: 100px;
    margin: 5px;
    color: #fff;
}

效果：

align-items属性

align-items属性：

该属性是用来表示可伸缩项目在侧轴方向上的对齐方式；

取值范围有flex-start,flex-end,center,baseline,stretch；

默认值是stretch表示元素被拉伸以适应容器，center表示元素位于容器的中心，flex-start表示元素位于容器的开头，flex-end则相反位于结尾；

需要注意的是baseline值，它让伸缩项目按照一个计算出来的基准线对齐，基准线的计算取决于可伸缩项目的尺寸及内容，如下例所示。

HTML代码：

 <div class="flex-container">
        <div class="flex-item a">box1</div>
        <div class="flex-item b">box2</div>
        <div class="flex-item c">box3</div>
        <div class="flex-item a">box4</div>
    </div>

css代码：

 .flex-container {
            display: flex;
            flex-direction: row;
            width: 500px;
            height: 230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items: baseline;
        }

        .flex-item {
            background-color: #E8A651;
            width: 100px;
            margin: 5px;
            color: #fff;
        }

        .a {
            margin-top: 10px;
            height: 100px;
        }

        .b {
            margin-top: 20px;
            height: 150px;
        }

        .c {
            margin-top: 30px;
            height: 80px;
        }

效果：

可以看到四个盒子在垂直方向高度不同，外间距也不同，但是最后都在同一条水平基准线上； 

flex-wrap属性

flex-wrap属性：

表示是否支持换行或者换列；

取值范围为nowrap,wrap,wrap-reverse；

默认值是nowrap，表示不换行或者不换列，wrap表示换行或者换列，wrap-reverse表示支持换行或者换列，但是会沿着相反方向进行排列（如主轴是垂直方向换行后就按照先下后上的顺序来排列伸缩项）

 HTML代码：

 <div class="flex-container">
        <div class="flex-item ">box1</div>
        <div class="flex-item ">box2</div>
        <div class="flex-item ">box3</div>
        <div class="flex-item ">box4</div>
        <div class="flex-item ">box5</div>
        <div class="flex-item ">box6</div>
        <div class="flex-item ">box7</div>
        <div class="flex-item ">box8</div>
 </div>

css代码：

.flex-container {
            display: flex;
            flex-direction: row;
            width: 600px;
            height: 230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items: baseline;
            flex-wrap: wrap;
        }

        .flex-item {
            background-color: #E8A651;
            width: 100px;
            height: 70px;
            margin: 5px;
            color: #fff;
        }

效果：

align-content属性

align-content属性：

用来表示换行之后各个伸缩项的对齐方式；

取值范围为 stretch,flex-start,flex-end,center,space-between,space-around；

stretch默认值，表示元素被拉伸以适应容器、center表示元素位于容器的中心、flex-start表示元素位于容器的开头、flex-end表示元素位于容器的结尾、space-between表示元素位于各行之间留有空白的容器内、space-around表示元素位于各行之前、之间、之后都留有空白的容器内。

css代码：

.flex-container{
    display:flex;
    flex-direction: row;
    width:600px;
    height:230px;
    background-color: #ccc;
    justify-content: space-around;
    align-items:baseline;
    flex-wrap: wrap;
    align-content: space-between;
}
.flex-item{
    background-color:#E8A651;
    width: 100px;
    height: 70px;
    margin: 5px;
    color: #fff;
}

效果：

【知识点】flex-flow属性

flex-flow属性属于复属性，它是flex-direction和flex-wrap的复合属性；

用于设置或检索弹性盒模型对象的子元素排列方式。

 flex-direction：row; flex-wrap:wrap就等同于flex-flow:row wrap

 注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。