弹性盒子模型display:flex
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分时,同上面的代码,只需要改:
3)1:2: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>弹性盒子模型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的更多相关文章
- 弹性盒子模型display:flex(2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 弹性盒模型display:flex
Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...
- Flexible 弹性盒子模型之flex
实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...
- 弹性盒子模型属性之flex-grow
在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!今天就让我们先来看看flex-grow这个属性 flex-g ...
- 弹性盒模型,flex布局
弹性盒模型 弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成. 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒模型的 ...
- css3弹性盒子模型
当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...
- css中的f弹性盒子模型的应用案例
案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- CSS box-flex属性,然后弹性盒子模型简介
今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...
随机推荐
- JDK静态代理示例代码
JDK静态代理示例代码 业务接口 接口的实现类 代理类,实现接口,并扩展实现类的功能 1.业务接口 /** * 业务接口 * @author pc * */ public interface User ...
- javascript常用验证大全
1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符 ...
- unity5-GI是什么?
GI是什么? GI =直接光照+间接光照+环境光+反射光.直接光照先不用说了,间接光照是光线在物体上反射所带来的光照. 核心参数: 每个光源上的Bounce Intensity.环境光可以直接理解为你 ...
- N 秒打开一个新窗口
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- DOM 删除HTML元素
常用方法: <script> var parent=document.getElementById("div1"); var child=document.getEle ...
- Caffe 议事(一):从零开始搭建 ResNet 之 残差网络结构介绍和数据准备
声明:Caffe 系列文章是我们实验室 黄佳斌 大神所写的内部学习文档,已经获得他的授权允许. 本参考资料是在 Ubuntu14.04 版本下进行,并且默认 Caffe 所需的环境已经配置好,下面教大 ...
- windows下Apache的虚拟主机配置
1.Apache虚拟主机: 在Apache上有关于虚拟主机的具体说明,具体可以参考Apache手册,这里简单的说一下虚拟主机主要分为两种: 1.基于主机名的虚拟主机(一个IP地址,多个网站) 2.基于 ...
- OpenGL中的需要注意的细节问题
OpenGL中的需要注意的细节问题 1. 虽然我们使用Windows的BMP文件作为纹理时,一般是蓝色的像素在最前,其真实的格式为GL_BGR而不是GL_RGB,在数据的顺序上有所 不同,但因为同样是 ...
- 企业搜索引擎开发之连接器connector(二十一)
从上文中的QueryTraverser对象的BatchResult runBatch(BatchSize batchSize)方法上溯到CancelableBatch类,该类实现了TimedCance ...
- 个人整理的一些iOS Entitlements
收集了不少Entitlement,当然也肯定有遗漏.有的就是key的字面意思,就不多做解释.不过有的虽然字面意思好理解,不过具体的用处不太清楚,就写的Unknown use.在替换entitlemen ...