1.flex -direction

属性

含义

row（默认值）

主轴为水平方向，起点在左端。

row-reverse

主轴为水平方向，起点在右边。

column

主轴为垂直方向，起点在上沿。

column-reverse

主轴为垂直方向，起点在下沿。

 

 .HolyGrail-row {

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

     display: flex;

     width:250px;

     height:100px;

     background-color:yellow;

     justify-content:space-between;

     flex-direction:row;

     margin-bottom:50px;

 }

 .HolyGrail-row-reverse {

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

     display: flex;

     width:250px;

     height:100px;

     background-color:blue;

     justify-content:space-between;

     flex-direction:row-reverse;

     margin-bottom:50px;

 }

 .HolyGrail-column-reverse {

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

     display: flex;

     width:250px;

     height:100px;

     background-color:red;

     justify-content:space-between;

     flex-direction:column-reverse;

     margin-bottom:50px;

 }

 .HolyGrail-column {

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

     display: flex;

     width:250px;

     height:100px;

     background-color:purple;

     justify-content:space-between;

     flex-direction:column;

     margin-bottom:50px;

 }
 <!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-row">

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

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

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

     </div>

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

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

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

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

     </div>

     <div class="HolyGrail-column">

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

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

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

     </div>

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

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

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

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

     </div>

 </body>

 </html>

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

  1. Python 基础语法(二)

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

  2. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  3. 从零开始学 Web 之 ES6（四）ES6基础语法二

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

  4. Python 1基础语法二(标识符、关键字、变量和字符串)

    一.标识符 标识符就是程序员自己命名的变量名.名字需要有见名知义的效果,不要随意起名 :比如 a=1 a是个变量,a这个变量名属于标识符 1 company = '小米 2 employeeNum = ...

  5. python基础语法(二)

    本文主要包括以下内容 函数 切片 迭代 列表生成式 生成器 迭代器 函数 定义函数 定义函数 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块 ...

  6. Flex 基础语法（三）

    2.flex-wrap 默认情况下,项目都排在一条线(又称"轴线")上.flex-wrap属性定义,如果一条轴线排不下,如何换行 属性 含义 nowrap(默认值) 不换行 wra ...

  7. Flex 基础语法（一）

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

  8. react基础语法二

    这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...

  9. python3 基础语法(二)

    一.python3的基本数据类型: 和其他语言一样都包含了以下数据类型: 类型 含义 实例 INT 整型(integer) 1 FLOAT 浮点型 1.1 BOOL 布尔值 TRUE/FALSE ST ...

随机推荐

  1. Android中Parcelable接口

    1. Parcelable接口 Interface for classes whose instances can be written to and restored from a Parcel. ...

  2. Spring Boot-------JPA——EntityManager构建通用DAO

    EntityManager EntityManager 是用来对实体Bean 进行操作的辅助类.他可以用来产生/删除持久化的实体Bean,通过主键查找实体bean,也可以通过EJB3 QL 语言查找满 ...

  3. 1042 数字0-9的数量 1050 循环数组最大子段和 1062 序列中最大的数 1067 Bash游戏 V2 1092 回文字符串

    1042 数字0-9的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 给出一段区间a-b,统计这个区间内0-9出现的次数.   比如 10-19,1出现11次 ...

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

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

  5. yii2-swiftmailer入门

    1. 安装 用yii 2.0框架,默认会有这个扩展 composer require --prefer-dist yiisoft/yii2-swiftmailer 修改composer.json,re ...

  6. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  7. iOS音频格式PCM转G711u(或G711a-law)

    请尊重作者劳动成果,如需转载本博客文章请注明出处!谢谢合作!  inputData是PCM的实时数据,可以通过转码,获取到最后导出的G711u数据(sendData) NSUInteger datal ...

  8. 笨鸟先飞之ASP.NET MVC系列之过滤器(05结果过滤器)

    概念介绍 结果过滤器看名字就知道这个过滤器是针对方法所产生结果的,结果过滤器,主要在我们的动作方法结果返回前后执行. 如果我们需要创建结果过滤器需要实现IResultFilter接口. namespa ...

  9. RT-thread 利用Scons 工具编译提示python编码错误解决办法

    错误信息: scons: Reading SConscript files ...UnicodeDecodeError: 'ascii' codec can't decode byte 0xbd in ...

  10. ZendStudio-12.5.0-win32.win32.x86_64.msi官方版本及破解工具

    网上的工具试了好多,最后下载的这个工具成功了,之前的N个工具都失败了 亲自试用,表示有效!!! ZendStudio-12.5.0-win32.win32.x86_64.msi官方版本下载地址:  百 ...