1.div上下左右居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>弹性盒子模型flex:1</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0

        }

        h3{ text-align: center}

        .main{ width: 600px; overflow: hidden;background-color: aquamarine; margin: 0 auto; color: #fff;

        display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/

        display: flex;}

        .main .left,.main .right{

            border:1px solid red;

            height: 200px;

            text-align: center;

            line-height: 200px;

        }

        .left{ flex:1; background-color: blue;}

        .right{ flex:1; background-color: blueviolet;}

    </style>

</head>

<body>

    <h3>父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同</h3>

    <div class="main">

        <div class="left">左侧区域</div>

        <div class="right">右侧区域</div>

    </div>

</body>

</html>

效果图：

2.display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/

1）1:1分时比例相同：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>弹性盒子模型flex:1</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0

        }

        .main{ width: 600px; overflow: hidden;background-color: aquamarine; margin: 0 auto; display: flex; color: #fff;}

        .main .left,.main .right{

            border:1px solid red;

            height: 200px;

            text-align: center;

            line-height: 200px;

        }

        .left{ flex:1; background-color: blue;}

        .right{ flex:1; background-color: blueviolet;}

        h3{ text-align: center}

    </style>

</head>

<body>

    <h3>父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同</h3>

    <div class="main">

        <div class="left">左侧区域</div>

        <div class="right">右侧区域</div>

    </div>

</body>

</html>

效果图：

2)1:2分时，同上面的代码，只需要改：

.right{ flex:2; background-color: blueviolet;}

3）1:2:1分时，同上代码只需要修改：

.left{ flex:1; background-color: blue;}
.right{ flex:1; background-color: blueviolet;}
.middle{flex:2; background-color: rgb(189, 72, 164);}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>弹性盒子模型display:flex</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0

        }

        .m_box {

            width: 600px;

            margin: 0 auto;

            overflow: hidden;

            background-color: aquamarine;

            display: flex;

            display: -webkit-box;

        }

        .m_b {

            width: 50px;

            height: 50px;

            background-color: rgb(235, 181, 34);

            box-sizing: border-box;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="m_box">

        <div class="m_b">1</div>

        <div class="m_b">2</div>

        <div class="m_b">3</div>

    </div>

</body>

</html>

效果图：

原链接：

https://blog.csdn.net/weixin_36401046/article/details/53127019

弹性盒子模型display:flex的更多相关文章

  1. 弹性盒子模型display:flex(2)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 弹性盒模型display:flex

    Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...

  3. Flexible 弹性盒子模型之flex

    实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...

  4. 弹性盒子模型属性之flex-grow

    在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!今天就让我们先来看看flex-grow这个属性 flex-g ...

  5. 弹性盒模型，flex布局

    弹性盒模型   弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成. 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒模型的 ...

  6. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

  7. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  8. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  9. CSS box-flex属性，然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

随机推荐

  1. Vue cli 脚手架使用

    1:基本的安装 安装node 安装npm Windows 更改环境变量 重启 环境变量生效 安装vue-cli 安装webpack 2:项目构建 https://segmentfault.com/a/ ...

  2. VLC接收网络串流缓冲时间的计算 (转)

    原帖地址:http://blog.csdn.net/coroutines/article/details/7472743 VLC版本2.0.1 最近研究IP-STB音视频同步问题,发现方案自带的自动S ...

  3. 2017面向对象程序设计（Java）第六周学习总结

    转眼间,2017年的法定节日已经休完,我们的java学习也已经进行了六周.下面,我将对上个礼拜的学习情况进行总结. 首先,是学习态度问题.虽然同学们已经从家或者各个旅游景点回来,但是心还是没回来.有同 ...

  4. Android开发之通过包管理器获取安装应用信息

    最近在自己写一个APP,有一个模块需要获取手机应用的一些信息.坑还是有,但都基本踩过了,自己把他实现了出来,实现方法还是很需要掌握的.底部弹出的对话框中四个选项的实现不多做说明,主要讲讲如何获取这些安 ...

  5. 41-邮差送信(dfs)

    邮差送信 (15分)C时间限制:1 毫秒 |  C内存限制:3000 Kb题目内容: 有一个邮递员要在n个城市之间来回送信.但有的城市之间有大路相连而有的没有路.现在要由一个城市到另一个城市送信,中途 ...

  6. cnblog博客管理

    http://www.cnblogs.com/wc1903036673/                                        12436109 https://www.cnb ...

  7. centos7 安装mongo

    1:创建仓库 vi /etc/yum.repos.d/mongodb-org-3.4.repo 2:把下面的内容复制到文件中 保存退出 [mongodb-org-3.4] name=MongoDB R ...

  8. git和码云的使用

    什么是码云 快速入门 Git入门 码云是开源中国社区2013年推出的基于 Git 的完全免费的代码托管服务,这个服务是基于 Gitlab 开源软件所开发的,我们在 Gitlab 的基础上做了大量的改进 ...

  9. iOS Orientation获取

    [iOS Orientation获取] 1.[[UIDevice sharedInstance] orientation] 必须调用beginGeneratingDeviceOrientationNo ...

  10. docker 关于volumns的总结（转）

    原文地址:http://www.cnblogs.com/ivictor/p/4834864.html Docker容器启动的时候,如果要挂载宿主机的一个目录,可以用-v参数指定. 譬如我要启动一个ce ...