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 [看到这边文章的位置,具体原作者未知] 经过一些排版的修改,其他内 ...
随机推荐
- PCurve - Curve on Surface
PCurve - Curve on Surface eryar@163.com Abstract. 本文通过给出曲面上曲线PCurve的定义来对OpenCascade中的Curve On Surfac ...
- 【吐槽】VS2012的安装项目只能用InstallShield Limited Edition
以前版本的Visual Stuido中安装项目都可以使用微软自家的Visual Studio Installer,但是到了VS2012这一切都变了,只能用InstallShield Limited E ...
- Js杂谈-正则的测试与回溯次数
例子来源于<精通正则表达式(第三版)>这本书,我贴出来: 这里的NFA是正则的一种引擎,书中介绍了一共三种引擎:NFA,DFA和POSIX NFA.像一般我们常用的.NET,java.ut ...
- Android悬浮窗口的实现
效果图:(悬浮框可拖动) 在项目开发中有一个需求:弹出悬浮窗后,响应悬浮窗的事件再弹出对话框,但是对话框怎么也不显示.也就是说在弹出悬浮框的同时,不能再弹出对话框,可能的原因: 1.悬浮框的焦点在最前 ...
- Android基于mAppWidget实现手绘地图(九)–如何处理地图对象的touch事件
为了响应touch事件,需要设置OnMapTouchListener 示例: private void initMapEventsListener() { mapWidget.setOnMapTouc ...
- Sybase 数据库新增用户,赋权
Sybase数据库, 需求:新增用户user1,赋予对原数据库中表t_jingyu的查询权限 数据库原用户登陆 isql -U用户 -P密码 -S服务名 sp_addlogin 'user1','us ...
- 第20/24周 死锁(Deadlocking)
大家好,欢迎回到性能调优培训.今天讨论SQL Server里的死锁(Deadlocking),第5个月的培训就结束了.当2个查询彼此等待,没有查询可以继续它的工作就会发生死锁.第一步我会概括介绍下SQ ...
- Hyperledger智能合约Hello World示例程序
简介 Hyperledger是Linux 基金会主导的一个开源的区块链(BlockChain)项目. 本文介绍了一个简单的Hyperledger智能合约的开发过程. 开发环境 本文使用Docker作为 ...
- javascript时间戳和日期字符串相互转换
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- BZOJ1088扫雷Mine 解析报告
1088: [SCOI2005]扫雷Mine Description 相信大家都玩过扫雷的游戏.那是在一个n*m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了,“余”人国流行起了一种简单的扫 ...