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
随机推荐
- MFC中CListCtrl类依靠CImageList贴图并显示不同图像
只介绍主要方法,函数的具体参数可在MSDN上查阅 ------------------------------------------- CListCtrl m_ListCtrl; CImag ...
- excel自带频率分析
sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...
- java基础-关键词super与this
转发:itbooks this是调用自己本身的构造函数,而super是调用父类中的构造函数. 这两个关键词是用在构造函数中的,这两个关键词的设计也是对封装特性的一种考虑,避免编写不必要的重复代码. c ...
- Restful 接口传递参数
首先补充一下什么是 Restful ,这里简单说一下,如果一个架构符合REST原则,就称它为RESTful架构. RESTful架构特点: (1)每一个URI代表一种资源: (2)客户端和服务器之间, ...
- ACM-ICPC2018 沈阳赛区网络预赛-E-The cake is a lie
You promised your girlfriend a rounded cake with at least SS strawberries. But something goes wrong, ...
- Packet Tracer 5.0 构建CCNA实验（3）—— 路由器实现vlan间通信
--交换机配置 --交换机和路由器连接的接口 switchport mode trunk --路由器配置 enable conf t int fa0/0.1 --路由器接口的子接口 encapsula ...
- <LC刷题一>相加为0的数之leetcode1&2&15&16
--题目导航见页面左上角的悬浮框#目录导航#-- 相似题型导航 1.1 twosum两数之和 || 2.2 3Sum三数之和 || 2.3 3Sum Closest最接近的三数之和 ----- ...
- asp.net中模拟测试smtp发邮件
最近在编程人生里要测试一个会员邮件的功能,就写了下面的代码. 在asp.net 中,有时要测试发信SMTP,但如果在单元测试中,如果没方便好用的 smtp怎么办,其实还是有办法模拟的,下面讲解下: 在 ...
- 【CodeForces】671 B. Robin Hood
[题目]B. Robin Hood [题意]给定n个数字的序列和k次操作,每次将序列中最大的数-1,然后将序列中最小的数+1,求最终序列极差.n<=5*10^5,0<=k<=10^9 ...
- img图片居中
关键词:clear: both; display: block; margin:auto; 图片居左,居右,居中: /* Alignment */ .alignleft { display ...