文档章节

弹性盒子布局

拉普拉斯婷
 拉普拉斯婷
发布于 2016/09/26 15:15
字数 537
阅读 21
收藏 0

弹性盒子布局可以实现宽度和高度自适应的布局

水平布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>弹性盒子布局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        /*-moz-box-flex: 1;*/
        /*-webkit-box-flex: 1;*/
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左侧栏</div>
    <div class="content">我是主内容部分</div>
    <div class="right_side">我是右侧栏</div>
</div>
</body>
</html>

输入图片说明

右边有一个空白区域,只要给中间内容部分加上 box-flex:1;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>弹性盒子布局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左侧栏</div>
    <div class="content">我是主内容部分</div>
    <div class="right_side">我是右侧栏</div>
</div>
</body>
</html>

输入图片说明

可以通过改变属性 box-orient:vertical 将水平布局改为垂直布局,宽度自动铺满整个区域

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>弹性盒子布局</title>
    <!--<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>-->
</head>
<style>
    .container{
        display: -moz-box;
        display: -webkit-box;
        border: 5px solid blue;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        width: 500px;
        height: 300px;
    }
    .left_side{
        background: orange;
    }
    .content{
        background: yellow;
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
    }
    .right_side{
        background: limegreen;
    }
    .left_side,.content,.right_side{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 1.5em;
        font-weight: bold;
    }
</style>
<body>
<div class="container">
    <div class="left_side">我是左侧栏</div>
    <div class="content">我是主内容部分</div>
    <div class="right_side">我是右侧栏</div>
</div>
</body>
</html>

输入图片说明

© 著作权归作者所有

拉普拉斯婷
粉丝 0
博文 34
码字总数 5944
作品 0
深圳
私信 提问
前端适配:移动端/web端适配方案

科普: rem 1.通过媒体查询的方式:css3的media queries 优点: media query 可以做到设备像素比的判断,方法简单,成本较低,特别是对于PC端和移动端维护同一套代码的时候;Bootstrap框架就...

GeekQiaQia
04/23
0
0
Chrome72嵌套flex布局修改,你的网站可能会发生布局错乱

起源 2019年1月29日,Chrome72正式版(72.0.3626.81)发布,本次发布带来了一个改变,且没有在更新日志中提及,该改变导致某些网站发生了布局错乱。该改变主要针对的是嵌套的flex布局,下面我...

蓝博
02/14
0
0
CSS3 弹性盒子(Flex Box)

当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。按比例分配父标签的宽度(或高度)空间。 子元素实现按比例分配 父元素也是需要添加必要的声明的 下面是具体实...

墨马
2017/11/28
0
0
微信小程序:照片墙小程序项目总结

项目考察点:弹性布局、伪类、base64 1、弹性布局 弹性布局中心思想就是将父容器设为display: flex,它的所有子元素自动成为容器成员。 在本项目中,可以分为两个大盒子:.row-center和.wrap...

立正小歪牙
2018/07/05
0
0
HTML、CSS学习(二)CSS的盒子模型

CSS的盒子模型 在网页的制作中,布局是最重要的内容,而Div+Css则是主要的布局方式,在以前的使用中,总认为前端技术中,CSS和Html非常简单,用到的时候,查一个手册和文档,就可以了,没有必...

AzureMonkey
2018/12/30
21
0

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
6
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
1K
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部