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. 关于web前端代码艺术

    以前一直都以为html代码要分离得很好,html一个文件,css一个文件,js一个文件,然后最好一个html页面里面不要要太多冗余的代码,不要恶心地引入一个又一个的js,连jquery的引入我都觉得有 ...

  2. uva 10391

    这个题,单纯做出来有很多种方法,但是时间限制3000ms,因此被TL了不知道多少次,关键还是找对最优解决方法,代码附上: #include<bits/stdc++.h> using nam ...

  3. 分享ES6中比较常用又强大的新特性

    前言 es6有很多新东西,但是感觉常用的并不是很多,这里学习记录了一些我自己认为非常常用又强大的新特性. scoping 实用的块级作用域,let x ＝ xxx 可以声明一个块级作用域的局部变量,简 ...

  4. http://codeforces.com/contest/828

    哇这是我打的第一场cf,第一题都wa了无数次,然后第二题差几分钟交 ,第二天一交就AC了内心是崩溃的.果然我还是太菜l.... A. Restaurant Tables time limit per ...

  5. Max Consecutive Ones

    Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: [1, ...

  6. 【懒人有道】在asp.net core中实现程序集注入

    前言 在asp.net core中,我巨硬引入了DI容器,我们可以在不使用第三方插件的情况下轻松实现依赖注入.如下代码: // This method gets called by the runti ...

  7. akka源码导读

    akka的actor模型提供了强大的并发,本人就akka源码进行了详细的阅读,下面是一些体会. 1.object SystemMessageList: @tailrec private[sysmsg] ...

  8. Re-Order Buffer

    Re-order Buffer(ROB)是处理器中非常重要的一个模块,它位于renamer与scheduler(RS)之间,并且也是execution unit(EU)的出口.ROB作为指令处理的后端 ...

  9. Appium-desktop安装与使用

    Appium-desktop是什么? 项目描述: Appium Server and Inspector in Desktop GUIs for Mac, Windows, and Linux. Ap ...

  10. AspxGridView控件的使用

    在网上找到的不错的资料: http://www.lmwlove.com/ai/SubjectID6 以下是自我总结: 要实现的功能:使用AspxGridView显示Scott数据库中emp与dept两 ...