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弹性盒子的更多相关文章

  1. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  2. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  3. css弹性盒子学习

    css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...

  4. CSS弹性盒子的基本用法

    .container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...

  5. CSS:CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  6. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

  7. 快速使用CSS 弹性盒子

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...

  8. css 弹性盒子--“垂直居中”--兼容写法

    使用弹性盒子兼容低端适配有时需要: display:flex 和 display:-webkit-box   display: -webkit-box; -webkit-box-align: cent ...

  9. CSS 弹性盒子布局

    学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

随机推荐

  1. VLFeat在matlab和vs中安装

    转:http://blog.csdn.net/u011718701/article/details/51452011 博主最近用vlfeat库做课题,网上搜索使用方法,一大片都会告诉你说:run(/v ...

  2. [Java多线程]-并发,并行,synchonrized同步的用法

    一.多线程的并发与并行: 并发:多个线程同时都处在运行中的状态.线程之间相互干扰,存在竞争,(CPU,缓冲区),每个线程轮流使用CPU,当一个线程占有CPU时,其他线程处于挂起状态,各线程断续推进. ...

  3. 题解 UVA1184 【Air Raid】

    有向无环图(DAG)的最小路径覆盖的模板题. 定义:在一个有向图中,找出最少的路径,使得这些路径经过了所有的点. 由题意可得这是一个有向图,而路径不能相交,于是我们知道这是无向图的不相交最小路径覆盖问 ...

  4. 题解 P3153 【[CQOI2009]跳舞】

    P3153 [CQOI2009]跳舞 题目描述 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢 ...

  5. github访问很慢的问题

    公司一直用着svn, 之前也的确用过github的版本管理,但是一直都是可视化的操作 这几天面试了几名前端,问了一下发现他们在之前的公司里都是用git的, 于是今天好好温故了一下怎么用命令行进行一下g ...

  6. JS零碎小知识

    filter()方法对数组进行过滤,生成新数组 var aqiNewData = aqiData.filter(function(data){ return data[1]>60; }); // ...

  7. 2017北京国庆刷题Day2 afternoon

    期望得分:100+100+50=250 实际得分:100+70+50=220 T1 最大值(max) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有一 ...

  8. 算法专题-STL篇

    这篇文章着重记录c++中STL的用法.主要粗略的介绍其用法,以知识点的形式呈现其功能,不会深入源码分析其工作原理. 排序和检索. sort(a,a+n),对a[0]往后的n个元素(包括a[0])进行排 ...

  9. 树链剖分处理+线段树解决问题 HDU 5029

    http://acm.split.hdu.edu.cn/showproblem.php?pid=5029 题意:n个点的树,m次操作.每次操作输入L,R,V,表示在[L,R]这个区间加上V这个数字.比 ...

  10. Flexbox兼容性

    .flex-container{ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-bo ...