css flex实现经典的三栏布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex 三栏式布局</title><style>*{margin: 0;padding: 0;}.wrapper{display: flex;display: -webkit-flex;display: -moz-flex;flex-direction: row;width: 600px;height: 200px;box-sizing: border-box;border: 1px solid red;margin: 0 auto;}.middle{flex: 1;height: 150px;background-color: gold;}.left{flex-basis: 100px;order: -1;height: 170px;background-color: skyblue;}.right{flex-basis: 100px;height: 170px;background-color: purple;}</style>
</head>
<body><div class="wrapper"><div class="middle">中间布局</div><div class="left">左侧布局</div><div class="right">右侧布局</div>
</div>
</body>
</html>

css flex实现经典的三栏布局相关推荐

用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
经典的三栏布局：圣杯布局，双飞翼布局，flex布局
需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染. 圣杯布局和双飞翼布局的共同特点都是利 ...
鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局
目录 1. 实现的效果如下图所示: 2. 思路 3.代码 3.1 js核心代码简单理解版: 3.2 实际应用-react版 4. 使用flex实现左右两栏式经典布局 4.1 图示: 4.2 代码实例 ...
CSS多栏布局-两栏布局和三栏布局
目录前言 ------两栏布局一.左列定宽,右列自适应 1.浮动+margin 2.浮动+BFC 3.定位 4.flex 5.浮动+负外边距 6.table布局二.左列不定宽,右列自适应 1.f ...
前端两栏布局和三栏布局
两栏布局左边盒子定宽度右边盒子自适应 [浮动➕ marin实现] <div class="twoContain"><div class="twoCon ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位左边中间右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
[css] 使用flex实现三栏布局，两边固定，中间自适应
[css] 使用flex实现三栏布局,两边固定,中间自适应同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握.1.把 cent ...
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局(左列定宽, 右列自适应) DOM结构 <div class="box"><div class="box-left"></ ...
六种方法实现CSS三栏布局
方法一:浮动+margin 实现方法:左栏向左浮动,右栏向右浮动,中间栏不设宽度,用左右margin来撑开距离. <!DOCTYPE html> <html><head& ...

css flex实现经典的三栏布局

css flex实现经典的三栏布局相关推荐

最新文章

热门文章