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
随机推荐
- python基础----再看property、描述符(__get__,__set__,__delete__)
一.再看property 一个静态属性property ...
- PHP 多线程采集
function curl_multi($urls) { if (!is_array($urls) or count($urls) == 0) { return false; } $num=count ...
- Codeforces 449.C Jzzhu and Apples
C. Jzzhu and Apples time limit per test 1 second memory limit per test 256 megabytes input standard ...
- python基础7--集合
集合set Python的set集合是一个无序不重复元素集.基本功能包括关系测试和消除重复元素.集合对象还支持union(并集).intersection(交集).difference(差集) 和 s ...
- CF745 C 并查集
并查集由于政府不能连通我们可以先按给出的边建立连通块,再将不含有政府的点全部作为一个连通块,边数为(n-1)*n/2然后 贪心地将该连通块与[含政府的.且包含点数最多的]连通块相连,然后由于新增了一些 ...
- SQL语句（二十二）—— 权限授予和回收（作业练习）
CREATE TABLE course ( Cno ) NOT NULL, Cname ) DEFAULT NULL, Cpno ) DEFAULT NULL, Ccredit smallint DE ...
- 在vm上面安装Linux系统
1 在vm上面安装Linux系统 1 以管理员的身份运行VMware: 点击VM图标然后右键属性 ,点兼容性 ---特权 等级 选择 以管理员的身份运行此软件 2 . 添加一个虚 ...
- RabbitMQ使用简记
RabbitMQ是什么 MQ全称为Message Queue, 即消息队列.MQ是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们 ...
- 【洛谷 P3338】 [ZJOI2014]力（FFT）
题目链接 \[\Huge{E_i=\sum_{j=1}^{i-1}\frac{q_j}{(i-j)^2}-\sum_{j=i+1}^{n}\frac{q_j}{(i-j)^2}}\] 设\(A[i]= ...
- python初步学习-python模块之 os
os os 模块在运维工作中是很常用的一个模块.通过os模块调用系统命令.os模块可以跨平台使用. 在 import os的时候,建议使用import os而非from os import *.这样可 ...