不使用 float 完成三栏式布局

不使用 float 完成三栏式布局,我分以下几步走:

1. 定义出大体的 HTML 结构

<body>
<div>
  <div class="left">
    <img src="" alt="Team Logo">
    <span>Team name</span>
  </div>
  <div class="middle">
    <p>东风夜放花千树,更吹落、星如雨。</p>
    <p>宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。</p>
    <p> 蛾儿雪柳黄金缕,笑语盈盈暗香去。</p>
    <p> 众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。</p>

    <p> 没有纠结,无关爱情,犯不着低眉瞬目的期期艾艾,只是极尽盛大的繁华着,跑马观花,一路精彩。
      纵情洒脱的走过火树银花的日子,寻觅一缕暗香的希望,蓦然回首,尚在,便持手。</p>
  </div>
  <div class="right">
    <img src="" alt="Person Logo">
    <img src="" alt="Person Logo">
    <img src="" alt="Person Logo">
    <img src="" alt="Person Logo">
  </div>

</div>
</body>

2. 调节各 div 背景、边框等样式

body > div {
    padding: 20px;
    background-color: #eeeeee;
    border: 1px solid #999;
}

.left {
    width: 200px;
    background-color: white;
}

img {
    width: 80px;
    height: 80px;
    background-color: #eeeeee;
    margin: 10px 10px;
    line-height: 80px;        /*为了让图片上的替代文字居中*/
}

.middle {
    background-color: white;
    text-align: left;
    padding: 10px;
}

.right {
    width: 120px;
    background-color: white;
}

效果如下:

设置背景、边框等样式

3. 给最大的 div 设置 display:flex;

body > div {
    padding: 20px;
    background-color: #eeeeee;
    border: 1px solid #999;
    display: flex;                          
    text-align: center;     /*为了让文字居中*/
}

flex 布局之后

4. 给左右的 div 设置固定宽度;

之前已经设置过了。

5. 给中间的 div 设置 flex:1;

.middle {
    flex: 1;
    background-color: white;
    text-align: left;
    padding: 10px;

flexflex-growflex-shrinkflex-basis的缩写。

5.1. flex 默认值 0 1 auto; 即

.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

5.2. flex 取值为 none; 即

.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

5.3. flex 取值为 atuo; 即

.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

5.4. flex 取值为 非负数字; 则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,即

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto,即项目的本来大小。

设置中间的 div : flex:1; 体会与上一张图的差别

PS : 我还是难以理解这两张图不同的原因。初步认为是将其他 div 宽度固定,给剩下的 div设置 flex:1;可以实现剩下的这个 div 宽度自适应。

flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况:

  • auto:首先检索该子元素的主尺寸,如果主尺寸不为 auto,则使用值采取主尺寸之值;如果也是 auto,则使用值为 content。
  • content:指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值,等效的替代方案是 flex-basis 和主尺寸都取 auto。
  • 百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样。
    参考链接:flex设置成1和auto有什么区别

所以我暂时是这么理解的:

  1. 如果将 flex 设为 auto ; 或者 不设值 使其为默认值:
    左 div : flex-basis: auto ; 值为 200px , 但是 里面的子元素最大占 100px ;
    右 div : flex-basis: auto ; 值为 120px, 同上,子元素最大占 100px;
  2. 如果中间 div 的 flex 为 1;
    它的 flex-basis: 0%; 即为 0 宽度;才可以分配剩余空间的时候不影响固定宽度的div

5.5 当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

5.6 当 flex 取值为两个非负数字,则分别视为 flex-growflex-shrink 的值,flex-basis 取 0%,即

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

6. 给左右中的 div 设置 height:100%;

.left {
    width: 200px;
    height: 100%;                               /* 去掉多余的高度空白*  /
    background-color: white;
}

.middle {
    flex: 1;
    margin: 0 20px;
    background-color: white;              
    text-align: left;
    padding: 10px;
    height: 100%;                 /* 去掉多余的高度空白*  /
}
最终效果

推荐阅读更多精彩内容

  • 前言 FlexBox是css3的一种新的布局方式,天生为解决布局问题而存在的它,比起传统的布局方式,我们使用Fle...
    zevei阅读 368评论 0 3
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,324评论 0 5
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 1,614评论 0 24
  • CSS 3中弹性盒布局的最新版概述 在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模...
    吾名无双阅读 669评论 0 5
  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 1,951评论 2 55