弹性盒模型flex布局

flex布局--盒子模型（Flexible Box）

先说flex的兼容性

• IE10部分支持2012，需要-ms-前缀

• Android4.1/4.2-4.3部分支持2009 ，需要-webkit-前缀

• Safari7/7.1/8部分支持2012， 需要-webkit-前缀

• IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前缀

考虑到兼容性，写法会有点麻烦

/* 子元素-平均分栏 */
.flex1 {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 父元素-横向排列（主轴） */
.flex-h {
  display: box;              /* OLD - Android 4.4- */
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  /* 09版 */
  -webkit-box-orient: horizontal;
  /* 12版 */
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}
/* 父元素-横向换行 */
.flex-hw {
  /* 09版 */
  /*-webkit-box-lines: multiple;*/
  /* 12版 */
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
/* 父元素-水平居中（主轴是横向才生效） */
.flex-hc {
  /* 09版 */
  -webkit-box-pack: center;
  /* 12版 */
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  /* 其它取值如下：
    align-items     主轴原点方向对齐
    flex-end        主轴延伸方向对齐
    space-between   等间距排列，首尾不留白
    space-around    等间距排列，首尾留白
   */
}
/* 父元素-纵向排列（主轴） */
.flex-v {
  display: box;              /* OLD - Android 4.4- */
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  /* 09版 */
  -webkit-box-orient: vertical;
  /* 12版 */
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
/* 父元素-纵向换行 */
.flex-vw {
  /* 09版 */
  /*-webkit-box-lines: multiple;*/
  /* 12版 */
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
/* 父元素-竖直居中（主轴是横向才生效） */
.flex-vc {
  /* 09版 */
  -webkit-box-align: center;
  /* 12版 */
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}
/* 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 */
.flex-1 {
  -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
  -ms-flex-order: 1;              /* TWEENER - IE 10 */
  -webkit-order: 1;               /* NEW - Chrome */
  order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 子元素-显示在从左向右（从上向下）第2个位置，用于改变源文档顺序显示 */
.flex-2 {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

为了更好的兼容性

.box{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   

 }

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
}

1、任何容器都可以使用盒子模型

行内元素也是可以的

.div{
  display:flex;  
}
.div1{
  display:inline-flex;  
}

 

2、如果是WebKit内核浏览器要加上-WebKit-前缀

.div{
  display:flex;
  display:-webkit-flex;    
}

 

3、设置了Flex布局之后子元素的float,clear,vertical-align将会失效

.div1{
  float:left;//无效  
}

 

4、属性的设置从‘对谁设置’分为两种

--一种是设置在父容器上

--另一种是设置在子容器上

1）、设置在父容器上的属性有

flex-direction--决定主轴的方向

.div{
    /*主轴方向 默认是row（水平 左到右）*/
    flex-direction:row;
    /*水平（右到左）*/
    flex-direction:row-reverse;
    /*垂直 column 高度不会超出*/
    flex-direction: column;
    /*垂直 column-reverse 从下往上*/
    flex-direction: column-reverse;            
}                            

 

flex-wrap--决定是否换行或是换行方式

.div{
    /*不换行 自动调整间距*/
    flex-wrap: nowrap;
    /*换行 从左到右 从上到下*/
    flex-wrap: wrap;
    /*换行 从左到右 从下到上*/
    flex-wrap: wrap-reverse;  
}

 

flex-flow--是flex-direction和flex-wrap的一起缩写，两个值

.div{
    /*默认 row nowrap*/
    flex-flow: row wrap;
    /*可以两个值混合写*/
    flex-flow: row-reverse nowrap;
}

 

justify-content--子元素的排列方式

.div{
    /*flex-start--从左开始 没有间距*/
    justify-content: flex-start;
    /*flex-end--从右到左 没有间距*/
    justify-content: flex-end;
    /*从中间开始排 没有间距*/
    justify-content: center;
    /*等间距排列 两边没有距离*/
    justify-content: space-between;
    /*等间距排列 两边有距离*/
    justify-content: space-around;  
}

 

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items--元素对齐方式

.div{
    /*子元素的对齐方式 底部对齐*/
    align-items: flex-end;
    /*子元素对齐方式 头部对齐（默认）*/
    align-items: flex-start;        
    /*子元素对齐方式 中间*/
    align-items: center;    
    /*子元素对齐方式 拉伸填充（如果没有设置高度）*/    
    align-items: stretch;
    /*子元素对齐方式 第一行文字对齐*/
    align-items: baseline;  
}

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content--多条轴的对齐方式

.div{
    /*多轴的对齐方式 从左到右 从上到下*/
    align-content: flex-start;
    /*多轴的对齐方式 从左到右 从下到上*/
    align-content: flex-end;
    /*多轴的对齐方式 从左到右 从上到下 中间*/
    align-content: center;
    /*多轴的对齐方式 从左到右 占满*/
    align-content: stretch;
    /*多轴的对齐方式 间隔相等 两侧没有*/
    align-content: space-between;
    /*多轴的对齐方式 间隔相等 两侧一半*/
    align-content: space-around;  
}

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

2)、设置在子元素的属性

order--排序方式（默认）

.item{
  order:0;  
}

flex-grow--子元素的放大比例

默认是0（有剩余空间也不放大）

1（等分放大充满容器）

.item{
  flex-grow:1;  
}

flex-shrink--子元素的缩小比例

默认是1（空间不足将缩小）

flex-basis--设置子元素的总宽度，设置之后就写死了子元素所占的总宽度

--可以直接写XXpx

.item{
    /*子元素占的宽度*/
    flex-basis: auto;  
}

flex--是flex-grow,flex-shrink,flex-basis的简写

默认值是（0,1 auto）

.item{
    /*flex-grow,flex-shrink,flex-basis简写*/
    flex:0 1 auto;  
}

align-self--对单个元素设置对齐方式 可以覆盖align-items

默认是auto--继承父级的对齐方式 没有父级就是stretch

.item{
    /*单个元素不一样的对齐方式*/
    align-self: flex-end;  
}

5、关于flex的的布局应用

骰子样式--基本都用到了justify-content,align-items,align-self，flex-direction

HTML代码

<div class="box" id="box1">
    <span class="item"></span>
</div>    
<div class="box" id="box2">
    <span class="item"></span>
    <span class="item"></span>
</div>

CSS样式

　　　　.item{
　　　　　　/*骰子点数样式*/
            .item{
              display: block;
              width: 24px;
              height: 24px;
              border-radius: 50%;
              margin: 4px;
              background-color: #333;
              box-shadow: inset 0 3px #111, inset 0 -3px #555;
            }
            /*骰子样式*/
            [class$='box']{
              margin: 16px;
              padding: 4px;
              background-color: #e7e7e7;
              width: 104px;
              height: 104px;
              /*图片的设置*/
              object-fit: contain;
              
              box-shadow:
                inset 0 5px white, 
                inset 0 -5px #bbb,
                inset 5px 0 #d7d7d7, 
                inset -5px 0 #d7d7d7;
              
              border-radius: 10%;
            }
            #box1{
                display: flex;
                /*第一排左*/
                justify-content: flex-start;
                /*第一排中*/
                justify-content: center;
                /*第一排后*/
                justify-content: flex-end;
                /*第二排左*/
                align-items: center;
                /*第二排中*/
                justify-content: center;
                align-items: center;
                /*第二排后*/
                align-items: center;
                   justify-content: flex-end;
                   /*第三排左*/
                   justify-content: flex-start;
                align-items: flex-end;
                   /*第三排中*/
                   justify-content: center;
                   align-items: flex-end;
                   /*第三排后*/
                   justify-content: flex-end;
                   align-items: flex-end;
            }
            #box2{
                display: flex;
                /*排九个*/
                justify-content: space-between;
                flex-wrap: wrap;
                /*横排1 3*/
                flex-direction: row;
                justify-content: space-between;
                /*竖排1 3*/
                flex-direction: column;
                justify-content: space-between;
                /*竖排中中*/
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                /*竖排右右*/
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-end;
                /*斜角*/
                justify-content: space-between;        
            }
            #box2 .item:nth-child(2){
                /*斜角*/
                align-self: flex-end;
            }
    
　　　　}

网格布局 用flex:1或是flex:0 0 50%;

基本网格布局，百分比网格

一：

HTML代码

<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

CSS代码

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

二：

HTML代码

<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>

CSS样式

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}

输入框布局

HTML代码

<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

CSS样式

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

图文混排

HTML代码

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

CSS样式

.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}