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. POJ 3923 Ugly Windows（——考察思维缜密性的模拟题）

    题目链接: http://poj.org/problem?id=3923 题意描述: 输入一个n*m的屏幕 该屏幕内有至少一个对话框(每个对话框都有对应的字母表示) 判断并输出该屏幕内处于最表层的对话 ...

  2. C语言编程练习（一）

    问题一: 问题描述:输入n个数,n<=100,找到其中最小的数和最大的数 输入样例: 4                      1 2 3 4 输出样例:14 #include " ...

  3. 【POJ】1704 Georgia and Bob（Staircase Nim）

    Description Georgia and Bob decide to play a self-invented game. They draw a row of grids on paper, ...

  4. Windows中的硬链接和软链接（hard link 和 Symbolic link）

    先来了解一下Linux中的硬链接和软链接: Linux中的硬链接和软链接 Windows中的硬链接和软链接: 硬链接 从Windows NT4开始,NTFS文件系统引入了HardLink这个概念,它让 ...

  5. vuejs2-生命周期

    https://segmentfault.com/a/1190000008879966 1 声明周期图示 2 过渡

  6. Java面向对象 线程技术 -- 下篇

     Java面向对象 线程技术 -- 下篇 知识概要:              (1)线程间的通信           生产者 - 消费者 (2)生产者消费者案例优化 (3)守护线程 (4)停止线 ...

  7. Jmeter连接mysql数据库

    1.下载 MySQL JDBC driver,并拷贝到jmeter的lib目录下. 2.创建JDBC Connection Configuration 需要填入的信息: Variable Name:M ...

  8. python celery 时区&结果（性能）的坑

    本文主要介绍最近使用celery遇到的两个坑.关于时区,以及是否保留结果(celery使用rabbitmq). 先说结论:定时任务记得配置时区:丢弃结果对使用rabbitmq对celery来说,性能提 ...

  9. mySQL使用实践

    1.虚拟机安装mySQL 服务器, 宿主机分别使用navicat工具和java代码 访问mySQL,组网图如下: 2. 查看mySQL的服务器状态,如下: 3. 服务器上查看数据库和数据表内容如下: ...

  10. c#字符编码,System.Text.Encoding类,字符编码大全：如Unicode编码、GB18030、UTF-8，UTF-7，GB2312，ASCII，UTF32，Big5

    本页列出来目前window下所有支持的字符编码  ---c#通过 System.Text.Encoding.GetEncodings()获取,里面可以对其进行查询,筛选,对同一个字符,在不同编码进行查 ...