2.flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

属性

含义

nowrap（默认值）

不换行

wrap

换行，第一行在上方

wrap-reverse

换行，第一行在下方

 

 .HolyGrail-nowrap {

     display: -webkit-flex; /* Safari */

     display: flex;

     width:250px;

     height:100px;

     background-color:yellow;

     justify-content:space-between;

     flex-wrap:nowrap;

 }

 .item1{

     flex-basis:60px;

 }

 .HolyGrail-wrap {

     display: -webkit-flex; /* Safari */

     display: flex;

     width:250px;

     height:100px;

     background-color:red;

     justify-content:space-between;

     flex-wrap:wrap;

 }

 .item2{

     flex-basis:60px;

 }

 .HolyGrail-wrap-reverse {

     display: -webkit-flex; /* Safari */

     display: flex;

     width:250px;

     height:100px;

     background-color:blue;

     justify-content:space-between;

     flex-wrap:wrap-reverse;

 }

 .item3{

     flex-basis:60px;

 }
 <!DOCTYPR>

 <html>

 <meta http-equiv="Content-Type" content="text/html charset=utf-8" />

 <header>

     <link rel="stylesheet" href="flex.css" type="text/css" />

 </header>

 <body>

     <div class="HolyGrail-nowrap">

         <span class="item1">b</span>

         <span class="item1">c</span>

         <span class="item1">d</span>

         <span class="item1">e</span>

         <span class="item1">f</span>

     </div>

     <div class="HolyGrail-wrap">

         <span class="item2">b</span>

         <span class="item2">c</span>

         <span class="item2">d</span>

         <span class="item2">e</span>

         <span class="item2">f</span>

     </div>

     <div class="HolyGrail-wrap-reverse">

         <span class="item3">b</span>

         <span class="item3">c</span>

         <span class="item3">d</span>

         <span class="item3">e</span>

         <span class="item3">f</span>

     </div>

 </body>

 </html>

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

Flex 基础语法（三）的更多相关文章

  1. Python 基础语法(三)

    Python 基础语法(三) --------------------------------------------接 Python 基础语法(二)------------------------- ...

  2. 从零开始学 Web 之 ES6（五）ES6基础语法三

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. Java基础语法(三)---数组

    一.概念         同一种类型数据的集合.简单的来说就是一容器,用来装东西的. 使用数组的好处:可以自动给数组中的元素从0开始编号,方便操作这些元素. 二.一维数组的格式 格式1:元素类型 [ ...

  4. css基础语法三

    []伪类选择器] 1.写法: 伪类选择器,在选择器后面,用:分隔,紧接伪类状态: eg : .a:link 2. 超链接的伪类状态: :link - 未访问状态 :visited - 已访问状态 :h ...

  5. Flex 基础语法（二）

    1.flex -direction 属性 含义 row(默认值) 主轴为水平方向,起点在左端. row-reverse 主轴为水平方向,起点在右边. column 主轴为垂直方向,起点在上沿. col ...

  6. Flex 基础语法（一）

    任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行内元素也可以使用Flex布局. .box{ display: inline-flex; } Webkit内核的浏 ...

  7. CSS基础语法(三) CSS的6种特性

    样式表常用写法及特性(组合.继承.关联性.权值性.层叠性.重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开.-例如:段落元素p.单元格元素td和类c1可以使用相同样式: p ...

  8. Python 1基础语法三(变量和标识符的区别)

    一.字面量: 就是一个一个的值,如1.2.3.‘world’,就是它自己本身表达的字面值.字面意思,在程序中可以直接使用. 二.变量(variable): 可以用来保存字面量,变量本身没有任何意思:如 ...

  9. HTML 网页开发、CSS 基础语法——三. HTML概念

    1.纯文本格式 纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号,或者特殊字符,及特殊打印格式的文本,只保存文本,不保存其格式设置. ①格式对比 纯文本格式 富文本格式 最常 ...

随机推荐

  1. C#单例测试（懒汉式双锁保证线程安全）

    单例模式的概念 单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 关键点: 这个类只有一个实例,这是最基本的 它必须自行创建 ...

  2. EOutOfResources字符异常

    近日,用Delphi编程时,遇到一个莫名其妙的异常:EOutOfResources,这是一个可以重复再现的异常.开始以为是程序中创建的对象太多,导致占用了过多的资源,引起了这个异常.于是在代码中将许多 ...

  3. crontab的两大坑：百分号和环境变量

    今天想给服务器加个自动备份mysql数据库的功能(别怪我这么久才加,阿里云每天全盘备份的,不怕丢数据库),本以为只要5分钟就能搞定的,结果入了两个大坑. 我的crontab是这样写的: * * * m ...

  4. Mysql配置文件my.cnf详细说明

    [表名大小写配置] MySQL在Linux下数据库名.表名.列名.别名大小写规则:  1.数据库名与表名是严格区分大小写  2.表的别名是严格区分大小写  3.列名与列的别名在所有的情况下均是忽略大小 ...

  5. 详解MySQL基准测试和sysbench工具

    前言 作为一名后台开发,对数据库进行基准测试,以掌握数据库的性能情况是非常必要的.本文介绍了MySQL基准测试的基本概念,以及使用sysbench对MySQL进行基准测试的详细方法. 文章有疏漏之处, ...

  6. hdu1512 Monkey King(左偏树 + 并查集)

    Once in a forest, there lived N aggressive monkeys. At the beginning, they each does things in its o ...

  7. 玩转 sublime3 第二弹 ES6环境

    安装node: node作为JS的运行环境必须安装 文件下载:https://nodejs.org/dist/v6.11.4/node-v6.11.4-x64.msi 备注:可以去官网 https:/ ...

  8. 《算法导论》学习总结 — XX.第22章 图的基本算法

    BFS(广搜): 广搜就是广度优先搜索,根据名字可以知道,是通过广度来遍历图,也就是层次遍历吧. 在这里以及下面的DFS(深搜),都用到了颜色WHITE,GRAY,BLACK,不过作用不同,具体分别再 ...

  9. 对Java Web项目中路径的理解

    第一个:文件分隔符 坑比Window.window分隔符 用\;unix采用/.于是用File.separator来跨平台 请注意:这是文件路径.在File f = new File(“c:\\hah ...

  10. java课程作业--动手动脑

    随机数: 1)编写一个方法,使用以下算法生成指定数目(比如1000个)的随机整数. Modulus=231-1=int.MaxValue Multiplier=75=16807 C=0 当显示过231 ...