CSS的display的多种布局方式总结(inline-block,table,flex)_display布局

1.display:inline-block布局

一：display的几个常用的属性值

• inline（行内元素）
  1.和其他元素都在一行上，可以与其他行内元素共享一行，不会独占一行
  2.高，行高及顶和底边距不可改变，大小由内容撑开
  3.可以使用padding,margin上下左右都有效

• block（块级元素）
  1.总是在新行上开始，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度
  2.高度，行高以及顶和底边距都可控制，宽度是它的容器的100%，除非设定一个宽度
  3.可以设置padding，margin的属性值，top，left，bottom，right都能够产生边距效果

• inline-block（融合行内于块级）
  不独占一行的块级元素

测试一下：

<div class="box">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>
1
2
3
4

.box{
    width: 280px;
    background-color: rgb(240, 192, 192);
}

.child1{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.child2{
    width: 100px;
    height: 100px;
    background-color: rgb(44, 168, 209);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

图一：不设置

图二：对child1,child2样式添加display: inline-block;

两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。

二：inline-block布局 vs 浮动float布局

a:不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

b.相同之处：能在某程度上达到一样的效果

效果测试：
图一：child1,child2样式为display: inline-block;的效果

图二：删除child1,child2的display: inline-block;，对child1,child2样式添加float: left;的效果，父元素会高度坍塌

所以要闭合浮动，对box使用overflow：hidden;

c.浮动布局不太好的地方：参差不齐的现象
添加两个child，都添加float: left;的效果，增高child2的高度为120px，box的宽度为380px；

这并不是我们想要的布局效果

我们把四个child的float: left;删除，都添加display：inline-block，就会排列整齐

三：inline-block存在的小问题

a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符

b.去除空隙的方法：
1.对父元素添加，font-size:0;，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙，这种方法已经可以兼容各种浏览器（子元素的文字消失了，后面要单独设置）
　
　c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
　　在ie6/7下：
　　对于行内元素直接使用dislplay:inline-block;
　　对于块级元素：需添加display:inline;zoom:1;

总结：

1. 对于横向排列东西来说，倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
2. 对于浮动布局就用于需要文字环绕的时候

---

2. display:table和display:table-cell结合

一：实现元素垂直居中

对父元素display: table;,子元素display: table-cell;即可实现垂直居中

效果测试：

<div class="parent">
    <p class="son">这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！
    </p>
</div>
1
2
3
4

.parent {
      width: 300px;
      height: 300px;
      text-align: center;
  }

.son  {
    height: 200px;
    background-color: rgb(165, 230, 140);
    vertical-align: middle;
}   
1
2
3
4
5
6
7
8
9
10
11

给父元素添加display: table;,子元素添加display: table-cell;

二：实现元素两端对齐

content：display: table;
left，right：text-align: right;,display: table-cell;
box：display: inline-block;,text-align: center;(文字居中)

<div class="content">
    <div class="left">
         <div class="box">B</div>
    </div>
    <div class="right">
         <div class="box">A</div>
    </div>
</div>
1
2
3
4
5
6
7
8

*{
    box-sizing:border-box;
 }

.content{
    display: table;
    border:1px solid #06c;
    padding:15px 15px;
    max-width: 1000px;
    /*对容器的水平居中*/
    margin:10px auto;
    min-width: 320px;
    width:100%;
 }

.box{
    width:100px;
    height:100px;
    border:1px solid #ccc;
    text-align: center;
    display: inline-block;
    font-size: 40px;
    line-height: 100px;
}
.right{
    text-align: right;
    display: table-cell;
}
.left{
    text-align: left;
    display: table-cell;
}   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果如下：

三：自动平均划分每个小模块，使其一行显示
ul{display: table;}
li{display: table-cell;}

<div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
   </ul>
</div>
1
2
3
4
5
6
7
8
9

*{
  box-sizing:border-box;
 }

.content{
    display: table;
    border:1px solid #06c;
    padding:15px 15px;
    max-width: 1000px;
    margin:10px auto;
    min-width:320px;
    width:100%;
}

.content ul{
     display: table;
     width:100%;
     padding:0;
     border-right:1px solid #ccc;
 }

.content ul li{
    display: table-cell;
    border:1px solid #ccc;
    text-align: center;
    height:100px;
    border-right: none;
    line-height: 100px;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

---

3.display: flex布局

一：容器属性：

• flex-direction
  决定主轴的方向（即项目的排列方向）

  • row（默认）：主轴水平方向，起点在左端；
  • row-reverse：主轴水平方向，起点在右端；
  • column：主轴垂直方向，起点在上边沿；
  • column-reserve：主轴垂直方向，起点在下边沿。

• flex-wrap
  定义换行情况

  • nowrap（默认）：不换行
  • wrap：换行，第一行在上方；
  • wrap-reverse：换行，第一行在下方。

• flex-flow
  以上两个属性的简写方式

• justify-content
  定义项目在主轴上的对齐方式

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

• align-item
  定义在交叉轴上的对齐方式

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

• align-content
  定义多根轴线的对齐方式

  • flex-start：与交叉轴的起点对齐；
  • flex-end：与交叉轴的终点对齐；
  • center：与交叉轴的中点对齐；
  • space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；
  • space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；

二：项目属性

• order
  定义项目的排列顺序
  order: <整数>;

数值越小，排列越靠前，默认为0，可以是负值

• flex-grow
  定义项目的放大比例
  flex-grow: <数字>;

默认值为0，即如果空间有剩余，也不放大。
可以是小数，按比例占据剩余空间

1.若所有项目的flex-grow的数值都相同，则等分剩余空间
2.若果有一个项目flex-grow为2，其余都为1，则该项目占据剩余空间是其余的2倍

• flex-shrink
  定义项目的缩小比例
  flex-shrink: <非负整数>;

默认值都为1，即如果空间不足将等比例缩小。
如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。

负值对该属性无效，容器不应该设置flex-wrap(不设置换行)。
1.设置flex-shrink为0的项目不缩小
2.如果所有项目都为0，则当空间不足时，项目撑破容器而溢出。
3.如果设置项目的flex-shrink不为0的非负数效果同设置为1。

• flex-basis
  定义在分配多余空间之前，项目占据的主轴空间。
  flex-basis: <auto或者px>;
  设置flex-basis,空间不足，项目缩小，小于设定值
• flex
  flex-grow，flex-shrink和flex-basis的简写
  flex: none | [<flex-grow><flex-shrink><flex-basis>];
  1.可以用 flex:auto; 代替 flex: 1 1 auto;；
  2.可以用 flex: none;代替 flex: 0 0 auto；
• align-self
  允许单个项目与其他项目有不一样的对齐方式
  align-self: auto | flex-start | flex-end | center | baseline | stretch;

默认值为auto，表示继承父元素的align-items属性，并可以覆盖align-items属性