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. Python dict operation introduce

    字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示: d = ...

  2. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  3. Qt中的坐标系统

    Qt使用统一的坐标系统来定位窗口部件的位置和大小. 以屏幕的左上角为原点即(0, 0)点,从左向右为x轴正向,从上向下为y轴正向,这整个屏幕的坐标系统就用来定位顶层窗口: 此外,窗口内部也有自己的坐标 ...

  4. 2013 ACM/ICPC Asia Regional Hangzhou Online hdu4739 Zhuge Liang's Mines

    Zhuge Liang's Mines Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  5. 集 降噪 美颜 虚化 增强 为一体的极速图像润色算法 附Demo程序

    在2015年8月份的时候,决心学习图像算法. 几乎把当时市面上的图像算法相关书籍都看了一遍, 资金有限,采取淘宝买二手书,长期驻留深圳图书馆的做法, 进度总是很慢,学习算法不得其法. 虽然把手上所有书 ...

  6. PHP抓取网页图片

    <?php set_time_limit(0);//抓取不受时间限制 if($_POST['Submit']=="开始抓取"){ $URL=$_POST['link']; g ...

  7. FPGA在其他领域的应用(一)

    测试和测量应用: 测试需要是所有细分市场的要求.无论是终端市场,所有产品在运到最终客户之前都必须进行测试.这动态地驱动测试和测量领域的普遍性质,其中包括下面的种类和分段: 通信测试: 无线测试仪 (W ...

  8. iOS如何提高页面流畅度

    A.提高CPU性能 对象创建1.尽量用轻量的对象代替重量的对象,比如CALayer 比 UIView 要轻量许多,如果不考虑交互事件的话,可以选择CALayer.2.Storyboard和xib加载对 ...

  9. YYHS-NOIP模拟赛-gcd

    题解 这道题题解里说用莫比乌斯反演做(我这个蒟蒻怎么会做呢) 但是不会,所以我们另想方法,这里我们用容斥来做 我们先把500000以内的所有质数筛出来 每次读入编号的时候,先把编号对应的这个数分解质因 ...

  10. ASP.NET MVC 学习笔记 1

    1. 什么是ASP.Net MVC ASP.Net MVC是一种开发Web应用程序的工具(is a web application development framework),采用Model-Vie ...