弹性盒子 Flex 布局 之 父元素上的属性

Flex 布局（弹性布局）

弹性盒子是CSS推出的一种新的布局 是一种 当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为。
弹性盒子由弹性容器和弹性子元素组成。弹性容器内包含了一个或多个弹性子元素。
弹性容器通过设置 display 属性的值为 flex（块级元素） 和inline-flex（行内元素）将其定义为弹性容器。

  display: -webkit-flex; /*webkit内核 兼容写法*/
  display: flex;/* 块级元素*/
  display: inline-flex; /*行内元素*/

在设置 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

父元素上的属性：

• flex-direction ：决定主轴的方向
• flex-wrap 用于指定弹性盒子的子元素换行方式。
• flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content 在主轴上的对齐方式。
• align-items 在交叉轴上对齐方式
• align-content 属多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。

flex-direction ：决定主轴的方向

交叉轴（侧轴）：就是与主轴垂直交叉的轴如图：

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

属性	效果
row默认值	左到右
row-reverse	右到左
column	上到下
column-reverse	上到下

 .container { //父元素
    display: -webkit-flex;
    display: flex; //设置弹性布局
	flex-direction: row;/*左到右排列（左对齐）*/
   /*flex-direction: row-reverse;*//* 右到左排列（右对齐）*/
   /*flex-direction: column;*//*上到下排列）*/
   /*flex-direction: column-reverse;*//*上到下排列*/
    width: 400px;
    height: 250px;
    background-color: green;
}
.item {
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px solid yellow;
}

<div class="container">
  <div class="item"> 1</div>
  <div class="item"> 2</div>
  <div class="item"> 3</div>  
</div>

效果：
row默认值

row-reverse

column

column-reverse

flex-wrap 用于指定弹性盒子的子元素换行方式。

属性	效果
nowrap 默认值	单行
wrap	多行
wrap-reverse	颠倒wrap排列

 .container { //父元素
    display: -webkit-flex;
    display: flex; /*设置弹性布局*/
    width: 210px;
    height: 250px;
    background-color: green;
    flex-wrap:nowrap ;/*默认值单行*/
      /*flex-wrap:wrap ;*/ /*多行*/
       /*flex-wrap:wrap-reverse ;*/ /*颠倒wrap*/
}
.item {
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px solid yellow;
}

<div class="container">
  <div class="item"> 1</div>
  <div class="item"> 2</div>
  <div class="item"> 3</div>  
</div>

效果：

nowrap

wrap

wrap-reverse

flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content 在主轴上的对齐方式。

属性	效果
flex-start 默认值	左到右排列（向左对齐）
flex-end	右到左排列（向右对齐）
center	居中
space-between	左右两头不留空隙 元素之间距离平均分布
space-around	左右两头留空隙 元素之间距离平均分布

 .container { //父元素
    display: -webkit-flex;
    display: flex; /*设置弹性布局*/
    width: 500px;
    height: 250px;
    background-color: green;
   justify-content:flex-start ;
      /*justify-content:flex-end;*/ 
       /*justify-content:space-around ;*/ 
       /*justify-content:center ;*/ 
       /*justify-content:space-between;*/ 
       /*justify-content:space-around ;*/ 
}
.item {
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px solid yellow;
}

<div class="container">
  <div class="item"> 1</div>
  <div class="item"> 2</div>
  <div class="item"> 3</div>  
</div>

效果：
flex-start 默认值 | 左到右排列（向左对齐）

flex-end | 右到左排列（向右对齐）

center | 居中

space-between | 左右两头不留空隙 元素之间距离平均分布

space-around | 左右两头留空隙 元素之间距离平均分布

align-items 在交叉轴上对齐方式

属性	效果
flex-start	在交叉轴起始位置的边界紧靠住该行的起始点。
flex-end	在交叉轴起始位置的边界紧靠住该行的结束点。
center	在交叉轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch	如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

 .container { //父元素
    display: -webkit-flex;
    display: flex; /*设置弹性布局*/
    width: 500px;
    height: 250px;
    background-color: green;
    /**/
   align-items: flex-start; /*交叉轴起始位置*/
   /* align-items: flex-end;*/ /*交叉轴结束位置*/
   /* align-items: center;*/ /*交叉轴居中*/
}
.item {
    background-color: red;
    width: 100px;
    border: 1px solid yellow;
}

<div class="container">
  <div class="item"> 1</div>
  <div class="item"> 2</div>
  <div class="item"> 3</div>  
</div>

效果
flex-start

flex-end

center

baseline

stretch

align-content 属多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。也就是需要多行元素

属性	效果
stretch - 默认	如果不设置高度或宽度各行将会伸展以占用剩余的空间。
flex-start	各行向在交叉轴起始点堆叠。
flex-end	各行向在交叉轴结束点点堆叠。
center	各行向交叉轴的中间位置堆叠。
space-between	各行在交叉轴两头不留空隙 元素之间距离平均分布。
space-around	各行在交叉轴平均分布，两端保留子元素与子元素之间间距大小的一半。

.container { //父元素
    display: -webkit-flex;
    display: flex; /*设置弹性布局*/
    flex-wrap: wrap;
    width: 300px;
    height: 300px;
    background-color: green;
    /**/
    align-content:flex-start;
    /*align-content:flex-end;*/
    /*align-content:center ;*/
    /*align-content:space-between;*/
    /*align-content:space-around;*/
}
.item {
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px solid yellow;
}

<div class="container">
  <div class="item"> 1</div>
  <div class="item"> 2</div>
  <div class="item"> 3</div>  
   <div class="item"> 4</div>   
</div>

stretch

flex-start

flex-end

center

space-between

space-around

利用主轴和交叉轴的对齐方式使元素居中

单行元素居中

 .container { //父元素
    display: -webkit-flex;
    display: flex; /*设置弹性布局*/
    width: 500px;
    height: 250px;
    background-color: green;
	justify-content:center;/*主轴居中*/
	align-items: center ;/*交叉轴居中*/
}
.item {
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px solid yellow;
}

<div class="container">
  <div class="item"> 1</div>
  <div class="item"> 2</div>
  <div class="item"> 3</div>  
</div>

效果：

多行元素居中

 .container { //父元素
    display: -webkit-flex;
    display: flex; /*设置弹性布局*/
    flex-wrap: wrap;/*设置多行*/
    width: 500px;
    height: 250px;
    background-color: green;
	justify-content:center;/*主轴居中*/
	align-content:center ;/*交叉轴居中*/
}
.item {
    background-color: red;
    width: 100px;
    height: 100px;
    border: 1px solid yellow;
}

<div class="container">
  <div class="item"> 1</div>
  <div class="item"> 2</div>
  <div class="item"> 3</div> 
  <div class="item"> 4</div>   
</div>

效果：