flex 学习笔记

flex-basis的优先级大于 宽度或高度的值。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 85%;
margin: 40px auto;
background: #dfd;
border: 10px solid #e0dfcc;
height: 400px;
border-radius: 6px;
}

.item {
width: 100px;
/*flex: 1;*/
flex-basis: 200px;
height: 100px;
margin: 5px;
background: #3f88bf;
}
</style>
</head>

<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>

</html>

时间: 2024-12-25 10:53:26

flex 学习笔记的相关文章

arcgis for flex 学习笔记(一)

初步认识 地图由图层.要素.样式等组成.地图上有N个图层,图层上有N个要素,每个要素可以存放点.线.面等,每个要素可以设置样式,如果显示图片.或文字均可以先创建一个mxml组件,然后设置到要素上. 面和线都是由点组成的. 添加点 1.首先初始化图层,GraphicsLayer. 2.获取坐标点,MapPoint. 3.创建要素,Graphic. 4.设置样式 Symbol. 5.添加要素至Layer,即是第一步创建的图层. 添加线 在添加点的基础上多了一个步骤. 获取到多个点,可以实例化一个线对

CSS3伸缩布局Flex学习笔记

如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些还好,关键移动端竟然不支持这个属性,移动端支持的还是老版本的display:-webki-box;不过对于学习来说,也不管它支持不支持了,学了再说吧,更何况Chrome已经把flex的前缀去了,说明flex多少还是有些稳定的. 下面列出了关于CSS与flex一起使用的一些属性 display 显示方

Java与Flex学习笔记(20)---将flex页面嵌入到jsp页面中

如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中.要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可.你可以在次下载:FlexModule_j2ee.zip. 在eclipse下新建一个web工程,将刚才下载的工程解压缩,然后将webtier文件夹下的内容覆盖服务器根目录下,如本人的: 注意要将lib文件夹和jars文件夹下的jar包添加到到类路径下,这样就算是整合完成了吧. 接着新建一个flex的mxml文件PlayVideo.m

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

CSS3学习笔记

这两天的CSS3学习笔记: 慕课网课程地址: http://www.imooc.com/learn/33 笔记: 边框: 圆角效果border-radius:同border相同的缩写方式: 阴影box-shadow: 参数说明: 说明: 单位除了用px也可以用百分比: 多个阴影:用逗号隔开即可: 模糊半径与扩展半径的区别: 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整

Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法

Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法 在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单.今天我们将看一下如何更好是使用FormPanel,包括使用字段默认值.Checkbox Grouping和Radio Button Grouping等. 为FormPanel设置默认值 在Form中设置FieldDefaults标签可以设置字段属性的默认值.来看一下我们的用法: <FieldDefaults LabelWidth="60&q

[学习笔记]欢迎来到extjs

本文地址: 本文作者:sushengmiyan 翻译来源:http://docs.sencha.com/extjs/5.0.0/getting_started/welcome_to_extjs.html 这篇指引提供了一个简单的ext js介绍,我们会从讨论建立一个简单的hello world例子开始我们的体验.我们会接着讲解在extjs中代码是怎样的结构,这个指导同样也会包括一些其他可以使用的资源的链接,所以,你应该尽可能的多看一些来提升你对ext的认知程度. helloworld -----

嵌入式Linux学习笔记(基于S5PV210 TQ210)

基于S5PV210.TQ210平台. 本文更多的是教会大家如何学习! 包括如下内容: 1.前言 2.开发环境搭建 3.制作交叉编译器 4.裸机编程 4.1.汇编学习 4.2.S5PV210启动流程 4.3.点亮一个LED 4.4.串口 4.5.实现printf 4.6.时钟配置 4.7.重定位 4.8.DDR 4.9.NAND读写 4.11.LCD操作 5.移植u-boot(基于u-boot-2014.4版本) 5.1.概述 5.2.u-boot配置过程分析 5.3.u-boot编译过程分析 5

JSP---JSP学习笔记

b/s的特点:1.对客户端要求低,升级和维护方便.2.跨平台.3.界面不友好,extJs Flex解决B/S软件界面简陋的问题.4.对网络的依赖较大. web常用的开发技术:jsp:java在网络中的应用,开源(免费),跨平台(指服务器),功能强大.框架支持较好,灵活,(Swing是java的c/s),适合开发的中大型的企业ASP.NET:非开源,跨平台不如jsp,功能强大,框架支持也较好.但不灵活,适合速成开发.PHP:免费,开源,框架支持较少,也很灵活,一般和MySQL结合使用. jsp项目