flex的用途
一、可以利用flex来布局一个div在另一个div里面水平垂直居中
如:html代码:
<div class="container">
<div class="box">
</div>
</div>
css代码:
.container{
width:600px;
height:400px;
border:1px solid blue;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width:200px;
height:100px;
border:1px red solid;
ps:这样就可以水平垂直居中咯
二、flex的属性
<div class="items">
<div class="item">1</div>
<div class="item">23</div>
<div class="item">4</div>
</div>
可以写在items上的属性有六个:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
可以写在item上的有6个:
order//这个就是item单独给了,要是想让那个item调换顺序就给这个属性给那个item
flex-grow
flex-shrink
flex-basis
flex
align-self
flex的用途的更多相关文章
- OpenCASCADE Expression Interpreter by Flex & Bison
OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...
- Flex Viewer (二)——体系结构
一.概述 在上一篇文章<深入浅出Flex Viewer (一)——概述>中,笔者对Flex Viewer用于构建以地图为中心的富客户端(RIA)应用的原型的功能和价值做了简要地介绍.在本文 ...
- Flex导出excel报表
sheetToExcel.java 1 package tree; 2 import java.io.BufferedInputStream; 3 import java.io.File; 4 imp ...
- 【教程】【FLEX】#003 自定义事件、模块间通讯
本篇笔记,主要阐明 事件是如何创建 和 如何使用自定义事件达到模块之间通讯 的效果. 句子解释: 什么叫做模块之间的通讯呢?? 简单点说,就是两个模块之间可以互相传数据. A模块 可以接收到 B模块的 ...
- SoftLayer®凭借Flex Images™消融物理与虚拟服务器之间的界线
网摘文档留存,日后有用; 达拉斯--(美国商业资讯)--随着SoftLayer Flex Images的推出,物理与虚拟IT资源之间的界线正在变得模糊.Flex Images让用户能够捕捉.复制并存储 ...
- 使用Flex构建Web和移动参考应用程序
范例文件 Shopping Cart Sales Dashboard Expense Tracker 需要的其他产品 Android 2.2及更高版本或Android 3.0及更高版本的设备 仅仅在F ...
- 前端入门5-CSS弹性布局flex
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- Flex Viewer(二) 体系结构
一.概述 在上一篇文章<深入浅出Flex Viewer (一)——概述>中,笔者对Flex Viewer用于构建以地图为中心的富客户端(RIA)应用的原型的功能和价值做了简要地介绍.在本文 ...
- 【转】【Flex】#010 操作XML文件(E4X)
该教程转载来自于:http://blog.chinaunix.net/uid-14767524-id-2785506.html [看到这边文章的位置,具体原作者未知] 经过一些排版的修改,其他内 ...
随机推荐
- KendoUI系列:Window
1.基本使用 <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css") ...
- Ubuntu 14.04上安装caffe
本来实在windows 10上尝试安装caffe,装了一天没装上,放弃; 改在windows上装ubuntu的双系统,装了一个下午,不小心windows的系统盘被锁死了,也不会unlock?只好含泪卸 ...
- kubernetes
项目主页:http://kubernetes.io/ docker仅能在单机上部署容器,而kubernetes可以统一管理各类容器,形成集群.Kubernetes作为Docker生态圈中重要一员,是G ...
- android.os.networkonmainthreadexception怎么解决
在android2.3以后,在主线程中必须使用另一个线程,如handler机制,或者异步任务获取网络数据. 如果你的访问网络操作必须放在主线程中执行,那么在onCreate()中添加 if (GetV ...
- Deep learning:四十八(Contractive AutoEncoder简单理解)
Contractive autoencoder是autoencoder的一个变种,其实就是在autoencoder上加入了一个规则项,它简称CAE(对应中文翻译为?).通常情况下,对权值进行惩罚后的a ...
- java io系列16之 PrintStream(打印输出流)详解
本章介绍PrintStream以及 它与DataOutputStream的区别.我们先对PrintStream有个大致认识,然后再深入学习它的源码,最后通过示例加深对它的了解. 转载请注明出处:htt ...
- ECharts整合HT for Web的网络拓扑图应用
ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是 ...
- ASP.NET MVC必知必会知识点总结(二)
一.实现Controller的依赖注入: 1.自定义继承DefaultControllerFactory 类的控制器工厂类并重写GetControllerInstance方法:(如:InjectCon ...
- iOS宏定义的使用与规范
宏定义在很多方面都会使用,例如定义高度.判断iOS系统.工具类,还有诸如文件路径.服务端api接口文档.为了对宏能够快速定位和了解其功能,我们最好在定义的时候将其放入特定的头文件中 定义尺寸类的宏 D ...
- 六、GAIA
1. GAIA CSR GAIA (Generic Application Interface Architecture)提供了一个端到端的,与主机无关的生态系统来实现主机应用程序对设备的功 ...