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. 一个完整的Node.js RESTful API

    前言 这篇文章算是对Building APIs with Node.js这本书的一个总结.用Node.js写接口对我来说是很有用的,比如在项目初始阶段,可以快速的模拟网络请求.正因为它用js写的,跟i ...

  2. 程序编译没错，运行报错：无法定位程序输入点GT_BufLaserFollowRatio（这是函数）于动态链接库GTS.DLL上

    :DLL里面没有导出该函数    :DLL没放进DEBUGS文件夹 (当时的情况是这个)

  3. java数据库编程之高级查询

    第三章:高级查询(-) 3.1:修改表 3.1.1:修改表 语法: Alter table <旧表名> rename [ TO] <新表名>; 例子:Alter table ` ...

  4. Intellij idea史上最简单的教程之Linux下安装与破解Intellij idea2017

    一.前言 这一节我们介绍在Linux下如何安装与破解Intellij idea2017.现在有很多公司开发环境都是Linux,所以掌握在Linux环境下使用Idea办公也是咱们必须得掌握的技能. 记住 ...

  5. C#中的原子操作Interlocked，你真的了解吗？

    阅读目录 背景 代码描述 越分析越黑暗 结语 一.背景 这个标题起的有点标题党的嫌疑[捂脸],这个事情的原委是这样的,有个Web API的站点在本地使用Release模式Run的时候出现问题,但是使用 ...

  6. Unity3D - Animator Controller循环依赖

    问题 假设有2个Animator Controller,分别命名为TestControllerLhs.controller以及TestControllerRhs.controller.在TestCon ...

  7. Color Blender---在线渐变色带生成器

       Color Blender是一个很有用的在线渐变色带生成器,它可以在两种颜色之间,自动生成过渡色,对网页设计师来说是一个不错的颜色调配工具.   Color Blender的使用方法很简单,你只 ...

  8. iOS多线程基本使用

    大家都知道,在开发过程中应该尽可能减少用户等待时间,让程序尽可能快的完成运算.可是无论是哪种语言开发的程序最终往往转换成汇编语言进而解释成机器码来执行.但是机器码是按顺序执行的,一个复杂的多步操作只能 ...

  9. 【学习】ie-css3.htc---让ie8以下支持css3

    学习了偶象大神的一篇文章:<让IE6/IE7/IE8浏览器支持CSS3属性>http://www.zhangxinxu.com/wordpress/?p=783 亲自实践了一下,主要是bo ...

  10. SAP 参照sto订单创建外向交货BAPI

    DATA: SHIP_POINT TYPE TVST-VSTEL, "装运点/接收点 NUM_DELIVERIES TYPE VBNUM, STOCK_TRANS_ITEMS WITH HE ...