css布局之爱上flex

一.关于display

display用于规定元素生产的框架类型,设置元素如何显示.

display的值可以为：

none：

隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：

指定对象为内联元素。

block：

指定对象为块元素。

list-item：

指定对象为列表项目。

inline-block：

指定对象为内联块元素。（CSS2）

table：

指定对象作为块元素级的表格。类同于html标签<table>（CSS2）

inline-table：

指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）

table-caption：

指定对象作为表格标题。类同于html标签<caption>（CSS2）

table-cell：

指定对象作为表格单元格。类同于html标签<td>（CSS2）

table-row：

指定对象作为表格行。类同于html标签<tr>（CSS2）

table-row-group：

指定对象作为表格行组。类同于html标签<tbody>（CSS2）

table-column：

指定对象作为表格列。类同于html标签<col>（CSS2）

table-column-group：

指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）

table-header-group：

指定对象作为表格标题组。类同于html标签<thead>（CSS2）

table-footer-group：

指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）

run-in：

根据上下文决定对象是内联对象还是块级对象。（CSS3）

box：

将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）

inline-box：

将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）

flexbox：

将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）

inline-flexbox：

将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）

flex：

将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

inline-flex：

二.大爱flex

flex是一种可以伸缩的盒显示,可以方便的适应不同大小的页面.相较于运用float来布局,flex的使用使得布局更加便捷可靠,且不用担心float所引起的意料之外的串行问题.

1.flex的相关属性

在使用flex时,首先定义父元素的display值为flex.然后可以通过一些相关的值对子元素的位置和布局方式进行控制,具体如下;

align-content:规定子元素在垂直方向上的排列位置(只有在元素有多行时才有效果):

值	描述	测试
stretch	默认值。项目被拉伸以适应容器。	测试 »
center	项目位于容器的中心。	测试 »
flex-start	项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

align-items:规定子元素在垂直方向上的排列位置:

值	描述	测试
stretch	默认值。项目被拉伸以适应容器。	测试 »
center	项目位于容器的中心。	测试 »
flex-start	项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
baseline	项目位于容器的基线上。

align-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。align-self 属性可重写灵活容器的 align-items 属性。

该属性的设置方式与align-item一直,用来给容器中需要单独定位的元素定义排列位置.

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述	测试
flex-start	默认值。项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
center	项目位于容器的中心。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

flex-basis 属性用于设置或检索弹性盒伸缩基准值

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。

flex-direction 属性规定灵活项目的方向。

值	描述	实例
row	默认值。灵活的项目将水平显示，正如一个行一样。	尝试一下 »
row-reverse	与 row 相同，但是以相反的顺序。	尝试一下 »
column	灵活的项目将垂直显示，正如一个列一样。	尝试一下 »
column-reverse	与 column 相同，但是以相反的顺序。

flex-flow 属性让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行：

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit 默认值是 "row"。 规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 默认值是 "nowrap"。 规定灵活项目是否拆行或拆列。

flex-grow 属性用于设置或检索弹性盒的扩展比率。

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-shrink 属性用于设置或检索弹性盒的收缩比率。

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0。

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

三.例子

自适应的弹框

html:

<div class="dialog">
  <div class="dialog_main">
    <div class="dialog_head"><span>标题</span>
      <div class="close">x</div>
    </div>
    <div class="dialog_body">内容</div>
    <div class="dialog_foot">
      <div class="confirm">确定</div>
      <div class="close">取消</div>
    </div>
  </div>
</div>

less:

.dialog{
  top:0px;
  left: 0px;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .dialog_main{
    min-width: 400px;
    max-width: 80%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    .dialog_head{
      display: flex;
      justify-content: space-between;
      padding: 15px 10px;
      background: #b10c79;
      color: #fff;
      .close{
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 20px;
        height:20px;
        background: #ffffff;
        color: #b10c79;
      }
    }
    .dialog_body{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30px 0 ;
    }
    .dialog_foot{
      display: flex;
      padding: 15px 10px;
      background: #f5f5f5;
      align-items: center;
      justify-content: center;
      .confirm{
        display: flex;
        background: #b10c79;
        color: #ffffff;
        padding:10px 20px;
        margin-right: 10px;
        border: 1px solid  #b10c79;
      }
      .close{
        display: flex;
        background: #ffffff;
        color: #b10c79;
        padding:10px 20px;
        border: 1px solid  #b10c79;
      }
    }
  }
}