CSS篇-面试题3-实现一个三列布局-两侧两列宽 100px-中间一列自适应

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

━━━━━━

两列固定,中间自适应,或左边固定,右边自适应,都是属于圣杯布局

具体实现效果如下所示

html 元素

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

css 代码示例

.wrapper {
  display: flex;
}
.left,
.right {
  width: 100px;
  height: 300px;
  background: blue;
}

.middle {
  flex: 1;
  background: red;
}

上面主要利用的是弹性flex布局,父级元素设置display:flex,两边元素固定宽度,中间自适应使用flex:1,便会实现自动的自适应

示例效果如下所示

具体更多关于圣杯布局可参考https://coder.itclan.cn/fontend/css/css-base-elem-center/

公众号（ID：itclanCoder）

码能让您早脱菜籍，文能让您洗净铅华

  可能您还想看更多：

CSS篇-面试题2-如何让一个长度未知的图片水平和垂直方向均居中

CSS篇-面试题1-画一下盒子模型

小程序-云开发-实现微信云支付功能

喜欢就点个在看再走吧