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. hdu1556树状数组的区间更新单点查询

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  2. JavaScript高级（01）

    前端开发工具 1.1. WebStorm介绍和下载 l  介绍 WebStorm是JetBrains 推出的一款强大的HTML5编辑工具,拥有丰富的代码快速编辑,可以智能的补全代码.代码格式化.htm ...

  3. MongoDB学习教程（1）

    1.简介: MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.MongoDB 旨在为WEB应用提供可扩展的高性能数据 ...

  4. Python实战之列表list的详细简单练习2

    name_list = ['zhangsan','lisi','wangermazi','xiaotaoqi'] print(name_list) # name_list.append("w ...

  5. python读取命令行参数的方法

    1.sys模块 需要模块:sys参数个数:len(sys.argv)脚本名:    sys.argv[0]参数1:     sys.argv[1]参数2:     sys.argv[2] test.p ...

  6. c# Socket通讯中关于粘包，半包的处理，加分割符

    using System; using System.Collections.Generic; using System.Text; using System.Net.Sockets; using S ...

  7. 深刻理解反射（Reflection)

    最近公司在搞自动化测试,由于版权问题,无法用 '录制脚本' 进行,也就没法用 VS 自带的 UITest 框架(蛋疼), 所以只能开源的 FlaUI 框架来搞了.其中不可避免的涉及到反射的应用,但自己 ...

  8. Jmeter脚本录制方法（二）——手工编写脚本（jmeter与fiddler结合使用）

    jmeter脚本录制方法可以分三种,前几天写的一篇文章中,已介绍了前两种,今天来说下第三种,手工编写脚本,建议使用这一种方法,虽然写的过程有点繁琐,但调试脚本比前两者方式都要便捷. 首先来看下三种方式 ...

  9. 【原创】自用css reset

    自己工作中常用的reset,和一些设置,实际用时会根据网站页面进行增删. /* Common style */html{ overflow-y:scroll; overflow-x:auto;}bod ...

  10. （转）UML实践详细经典教程----用例图、顺序图、状态图、类图、包图、协作图

    原文链接:http://dn.codegear.com/article/31863 面向对象的问题的处理的关键是建模问题.建模可以把在复杂世界的许多重要的细节给抽象出.许多建模工具封装了UML(也就是 ...