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. D. How many trees? DP

    D. How many trees? time limit per test 1 second memory limit per test 64 megabytes input standard in ...

  2. 使用jsonp完美解决跨域问题

    调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和 ...

  3. 多个activity跳转保留内存使用intent传递数据问题_新手

    /////本来是做的activity跳转,普通那种,但是会在调回来会销毁原来的,重新调用onCreate方法, 后来参考[http://blog.csdn.net/qq_26918031/articl ...

  4. 如何用Django从零开始搭建一个网站（0）

    python,django等安装就直接略过了.下面直接奔如主题,搭建网站. Step1:新建一个django project,运行命令:‘django-admin startproject myPit ...

  5. ch2-mysql相关

    1 mySql数据库基本 1.1 创建表必须字段 id 1.2 nodeJS数据库连接 根目录下建立 mysql.js 文件代码 var mysql = require('mysql'); var c ...

  6. 【转】 Python调用（运行）外部程序

    在Python中可以方便地使用os模块运行其他的脚本或者程序,这样就可以在脚本中直接使用其他脚本,或者程序提供的功能,而不必再次编写实现该功能的代码.为了更好地控制运行的进程,可以使用win32pro ...

  7. codesmith连接Mysql提示“找不到请求的 .Net Framework Data Provider。可能没有安装。"

    1,首先需要将MySql.Data.dll复制到codesmith安装目录下bin文件夹下,注意dll的版本 2,其次因为codesmith7采用的是.net4.0的配置文件,(64位系统)找到C:\ ...

  8. WebApi实现自定义错误日志

    一.Mvc错误处理默认有添加HandleErrorAttribute默认的过滤器,但是我们有可能要捕捉这个错误并记录系统日志那么这个过滤器就不够用了,所以我们要自定义Mvc及Web Api各自的错误处 ...

  9. 为db2用户添加db2命令及jdk环境变量配置

    AIX系统:db2inst用户 在/home/db2inst/.profile文件下新增以下代码(包括用户环境变量配置,具体路径取决于jdk安装的路径) PATH=/usr/bin:/etc:/usr ...

  10. Django创建通用视图函数

    想在我们有两个视图: def thinkingview(request): user = request.user if request.method == 'GET': return render( ...