标签：flex 旧笔 color height 均分 好久不见 background 400px 重拾

使用弹性盒子模型实现圣杯布局

1 <div class="father">
2     <div class="left">1</div>
3     <div class="center1">2</div>
4      <div class="center2">3</div>
5     <div class="right">4</div>
6   </div>

页面结构如上，想要实现的结果为left盒子靠左，right盒子靠右，中间两个均分剩余空间。利用flex布局可以快速实现

 1 .father {
 2   display: flex;
 3   height: 400px;
 4   background-color: pink;
 5   .left {
 6     height: 400px;
 7     width: 200px;
 8     background-color: purple;
 9   }
10   .right {
11     height: 400px;
12     width: 200px;
13     background-color: powderblue;
14   }
15   .center1 {
16     background-color: rebeccapurple;
17     flex: 1;//剩余空间均分之后独占一份

18   }
19   .center2 {
20     flex: 1;
21   }
22 }

最终呈现的效果如图所示

 如果div2和div3占比为1：2时，只需要更改flex对应数字即可，

.center1 {
    background-color: rebeccapurple;
    flex: 1; //剩余空间均分之后独占一份
  }
  .center2 {
    flex: 2;
  }

最终效果如下

标签：flex,旧笔,color,height,均分,好久不见,background,400px,重拾
来源： https://www.cnblogs.com/zhh-blogs/p/15529129.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。