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. Redis学习——Redis持久化之RDB备份方式保存数据

    从这一个介绍里面知道,redis比memcache作为缓存数据库强大的地方,一个是支持的数据类型比较多,另一个就是redis持久化功能. 下面就介绍Redis的持久化之RDB! 一:什么是redis的 ...

  2. 【2016美团】浏览器和服务器在基于https进行请求链接到数据传输过程中，用到了如下哪些技术

    A.非对称加密技术 B.对称加密技术 C.散列(哈希)算法 D.数字证书 答案:ABCD HTTPS在传输数据之前需要客户端(浏览器)与服务端(网站)之间进行一次握手,在握手过程中将确立双方加密传输数 ...

  3. Cow Uncle 学习了叉积的一点运用，叉积真的不错

    Cow Uncle Time Limit: 4000/2000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitSta ...

  4. Count Color 线段树

    Count Color Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit  ...

  5. HTML5基础知识及相关笔记

    HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...

  6. PS 软件操作应用处理——粒子化任务效果

      前  言 JRedu 上次分享中,给大家介绍了一些图片的处理方法,主要是通过滤镜里的功能,把图片处理成素描效果或者水彩画效果,营造出不同的氛围. PS是一款非常强大的软件,包含了非常多的功能,合成 ...

  7. webpack2使用ch1-目录说明

    1 目录解释  webpack.config.js:配置文件,配置文件可以改成其他名,但package.json --config文件名称也要对应修改 2 webpack.config.js //we ...

  8. windows下利用nginx 做IIS负载均衡

    如果网站流量变大,就想加服务器分担压力,当然就要用到负载均衡,在windows 2003有自带的网络负载均衡,但配置还是挺麻烦的虽然有轮训和iphash的效果,但效果不算好. nginx小巧,下载不到 ...

  9. 使用MVVM减少控制器代码实战(减少56%)

    减少比例= (360(原来的行数)-159(瘦身后的行数))/360 = 56% 父类 MVC 和MVVM 前后基本不动 父类主要完成如下三个功能: 1)功能:MJRefrsh +上拉下拉没有更多数据 ...

  10. ios 指定页面禁用第三方键盘，使用系统的键盘

    因为项目需要,需要在添加银行卡和提现页面使用数字键盘, 如果用户没有安装第三方键盘是没啥大问题的,但是如果用户手机安装了第三方的键盘的话,有时候会无法调用起第三方的数字键盘,或者第三方键盘样式不符合, ...