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
随机推荐
- Linux用户创建及权限管理
作业一: 1,新建用户natasha,uid为1000,gid为555,备注信息为“master” useradd natasha vim /etc/passwd ...
- 【数学】【P5076】 Tweetuzki 爱整除
Description 对于一个数 \(k\),找到任意一个 \(x\),满足 \(0~\leq~k~\leq~x~\leq~10^{18}\) 且对于任意一个 \(x\) 进制数,把该数字各数位上的 ...
- Canny边缘检测原理及C#程序实现
http://blog.csdn.net/yjz_uestc/article/details/6664937 Canny边缘检测是被公认的检测效果最好的边缘检测方法,是由John F. Canny于1 ...
- vs下取得资源文件中的版本信息
在Windows Mobile和Wince(Windows Embedded CE)下开发的产品,有时候需要显示当前产品的版本信息.一般来说,版本信息是保存在资源文件里面的,例如下图: 为了保持一致, ...
- lightoj 1148 Mad Counting（数学水题）
lightoj 1148 Mad Counting 链接:http://lightoj.com/volume_showproblem.php?problem=1148 题意:民意调查,每一名公民都有盟 ...
- CF540 C BFS 水
'.'->'X' 前者走后变成后者,后者除了是终点不能再走.初始位置是X很傻的以为这样从初始点走出去后初始位置就变成不能走了,实际上是还能走一次的. 其他就是BFS,路上记得把路变成X就好了 太 ...
- Digging（DP）
ZOJ Problem Set - 3689 Digging Time Limit: 2 Seconds Memory Limit: 65536 KB When it comes to th ...
- System Administrator（构造，图论）
System Administrator time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- mongoDB与sql聚合操作对应图
SQL Terms, Functions, and Concepts MongoDB Aggregation Operators WHERE $match GROUP BY $group HAVING ...
- （32位）本体学习程序（ontoEnrich）系统配置说明文档
1.系统环境 32位 Ubuntu 源代码中已经包含在32位下编译生成的.o文件,配置好依赖库(步骤2)后,参考步骤3则可重新link. link无误即可运行程序. 2.依赖库 2.1 boost_ ...