css弹性盒子
body元素设置：
<body>
<div id="wai">
<div class="zi">1</div>
<div class="zi1">2</div>
<div class="zi2">3</div>
</div>
</body>
父级（id=“wai”）元素设置：
#wai{
height: 600px;
height: 300px;
background-color: darkgrey;
/*弹性盒子元素*/
display: flex;
/*水平对齐方式:*/
justify-content: space-between;
/*垂直对齐方式：居中*/
align-items: center;
/*换行方式*/
flex-wrap: wrap;
}
子级（id=“zi”）元素设置：
.zi{
width: 100px;
height: 100px;
background-color:darkturquoise ;
text-align: center;
line-height: 100px;
font-size: 30px;
border: 1px solid red;
}
子级（id=“zi1”）元素设置：
.zi1{
width: 100px
background-color:darkturquoise ;
text-align: center;
line-height: 100px;
font-size: 30px;
border: 1px solid red;
/*子元素中的排列顺序:数值越大越靠右，越小越靠左*/
order:;
}
子级（id=“zi2”）元素设置：
.zi2{
width: 100px;
background-color: darkturquoise;
text-align: center;
line-height: 100px;
font-size: 30px;
border: 1px solid red;
order:;
}
css弹性盒子的更多相关文章
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- css弹性盒子学习
css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...
- CSS弹性盒子的基本用法
.container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...
- CSS：CSS弹性盒子布局 Flexible Box
一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...
- css弹性盒子新旧兼容
前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...
- 快速使用CSS 弹性盒子
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...
- css 弹性盒子--“垂直居中”--兼容写法
使用弹性盒子兼容低端适配有时需要: display:flex 和 display:-webkit-box display: -webkit-box; -webkit-box-align: cent ...
- CSS 弹性盒子布局
学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
随机推荐
- css样式表设置
有参考此片博文 1.内联式样式表 是指将CSS样式编码写在HTML标签中,在标签内编写的样式能影响的范围最小,只改变本标签的文字样式,同样的标签不会受到影响,也称行间样式表. 格式如下 <h1 ...
- Codeforces 937.D Sleepy Game
D. Sleepy Game time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- jvm容器的关系
jvm实例,tomcat容器,spring容器,在内存中的关系5 1.一个java项目对应一个jvm 吗? 2.tomcat里面加载多个java项目 ,是不是用了一个jvm? 3.java项目中的sp ...
- 对于redis底层框架的理解(一)
近期学习了redis底层框架,好多东西之前都没听说过,算是大开眼界了. 先梳理下redis正常的通讯流程吧 首先服务器启动都有主函数main,这个main函数就在redis.c里 首先是initser ...
- JS函数表达的几种写法
arguments数组形式的 用于函数 比如不知道参数有多少个或者不固定那么用到arguments function show(){ //alert(arguments.;length); ale ...
- 数学：FFT
在信息学竞赛中FFT只有一个用处那就是加速多项式的乘法 多项式乘法原本的时间复杂度是O(n^2)的,然后经过FFT之后可以优化为O(nlogn) FFT就是将系数表示法转化成点值表示法相乘,再由点值表 ...
- Linux type命令的用法
一般情况下,type命令被用于判断另外一个命令是否是内置命令,但是它实际上有更多的用法. 1.判断一个名字当前是否是alias.keyword.function.builtin.file或者什么都不是 ...
- css单位em、px、rem和pt的区别
1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...
- ④ 设计模式的艺术-10.装饰（Decorator）模式
职责 装饰模式是在不必改变原类文件和使用继承的情况下,动态的扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 装饰模式是一种用于代替继承的技术,无需通过继承增加子类就能扩展对 ...
- AutoESL与Xilinx那些人和事
大年三十,看到Xilinx收购AutoESL的新闻, 顿时觉得今年特别喜庆,于是,连春晚也懒得骂了. 本想立即写一篇博文八卦一番, 怎奈亲朋好友饭局不断,一直拖到今天才动笔. 与一年前Xilinx宣布 ...