1、盒子内均分

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6.   //如果在大div内不添加弹性布局，三个div垂直排列（弹性布局默认横向排列）
  7. .flex-container {
  8.     display: -webkit-flex;
  9.     display: flex;
  10.     width: 400px;
  11.     height: 250px;
  12.     background-color: lightgrey;
  13. }
  14. .flex-item {
  15.     background-color: cornflowerblue;
  16.     height: 100%;
  17.     margin: 10px;
  19.   //用百分比
  20.   width: 33.33%;
  22.   //占比flex-grow,控制占比是横向占比还是纵向占比，跟弹性布局的排列方式有关
  23.   //每个小div占比为1，盒子均分为三分每份为1
  24.   flex-grow:1;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="flex-container">
  30. <div class="flex-item">flex item 1</div>
  31. <div class="flex-item">flex item 2</div>
  32. <div class="flex-item">flex item 3</div>
  33. </div>
  34. </body>
  35. </html>

2、三个板块，左右固定，中间自适应

上下高度固定，中间自适应相同的道理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  //左右宽度固定，中间小divflex-grow:1；占满剩余的
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item1 {
    background-color: cornflowerblue;
    height: 100%;
    margin: 10px;
        width:200px;
}
  .flex-item2 {
    background-color: cornflowerblue;
    height: 100%;
    margin: 10px;
      flex-grow:1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">flex item 1</div>
<div class="flex-item2">flex item 2</div>
<div class="flex-item1">flex item 3</div>
</div>
</body>
</html>