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. E - 钱币兑换问题

          在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很多种兑法.请你编程序计算出共有多少种兑法. Input每行只有一个正整数N,N小于32768. Output对应每个输入,输出兑换方 ...

  2. ThinkPHP中：用户登录权限验证类

    使用CommonAction.class.php公共类,统一判断用户是否登录 <?php //后台登录页 Class CommonAction extends Action{ //后台登录页面 ...

  3. java学习——java中的反射学习笔记

    Java--reflect 一.Class类的使用 什么是Class类? 1:在面向对象的世界中,万事万物皆对象. java语言中,静态的成员,普通数据类型类是不是对象呢? 是,对象!是类的对象! 类 ...

  4. 【重点突破】——two.js模拟绘制太阳月亮地球转动

    一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...

  5. 20.Linux-USB鼠标驱动

    在上一章分析完USB总线驱动程序后, 接下来开始写一个USB驱动: 本节目的: 将USB鼠标的左键当作L按键,将USB鼠标的右键当作S按键,中键当作回车按键 参考/drivers/hid/usbhid ...

  6. mysql error 1130 hy000:Host 'localhost' is not allowed to connect to this mysql server 解决方案

    ERROR 1130 (HY000): Host 'localhost' is not allowed to connect to this MySQL server D:\Wamp\mysql-\b ...

  7. PHP中include与require的特点和区别说明

    引用文件的方法有两种:require 及 include.两种方式提供不同的使用弹性. require 的使用方法如 require("MyRequireFile.php"); . ...

  8. How to Add Columns to a DataGrid through Binding and Map Its Cell Values

    How to Add Columns to a DataGrid through Binding and Map Its Cell Values Lance Contreras, 7 Nov 2013 ...

  9. 配置eNSP和本地电脑上的网卡相连，从而直接从本地电脑连接设备

  10. webstorm 卡死解决方法

    方法1: 先在外部终端清空node-modules目录,包括隐藏文件,再打开Webstorm,打开Project Structure页面,选中工程,选择node_modules目录(没有的话自己先新建 ...