<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .flex-container {

    display: flex;

	/*默认值：从左到右排列*/

	/*flex-direction: row;*/

	/*从右到左排列*/

	flex-direction: row-reverse;

	/*从上到下排列*/

	/*flex-direction: column;*/

	/*从下到上排列*/

	/*flex-direction: column-reverse;*/

	/*flex-flow是flex-direction和flex-wrap的缩写，默认值：flex-flow:row nowrap;*/

    width: 400px;

    height: 400px;

    background-color: gray;

  }

  .flex-item {

    background-color: green;

    width: 100px;

    height:100px;

    margin: 5px;

  }

  </style>

</head>

<body>

  <div class="flex-container">

    <div class="flex-item">flex item 1</div>

    <div class="flex-item">flex item 2</div>

    <div class="flex-item">flex item 3</div>

  </div>

</body>

</html>

flexbox父盒子flex-direction属性的更多相关文章

  1. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flexbox父盒子align-items属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flexbox子盒子flex属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flexbox父盒子flex-wrap属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. flexbox父盒子justify-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. flexbox子盒子align-self属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  8. CSS3 -- FlexBox(弹性盒子)

    盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...

  9. css3系列之弹性盒子 flex

    弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性  ctrl + F   如果觉得图太小, ctrl + +键 设置弹性盒子的属性: display:f ...

随机推荐

  1. 阿里云扩容数据盘_Linux

    扩容数据盘_Linux 更新时间:2018-10-11 15:18:46 · 编辑者 编辑 · ★ 我的收藏 新手学堂 学习路径 本页目录 前提条件 注意事项 步骤 1. 在控制台上扩容数据盘的磁盘空 ...

  2. Windows下超强日志工具BareTail

    最近写了一些测试工具,经常希望能动态的查看日志文件,试了好些文本编辑文件如Emeditor.Vim等,一直没找到合适. 我希望支持的功能有: 支持大文件读取,速度要快 自动加载新的内容,直接定位到最后 ...

  3. LDAP none、simple、strong 笔记

    // 该笔记仍在调研中!!不确保中有错误信息!最终目的是想用java实现这三种认证方式. 1.ldaps://  注意多了个s 参考:https://mail.python.org/pipermail ...

  4. Java线程状态及 wait、sleep、join、interrupt、yield等的区别

    Java中的线程状态(详见Java线程状态及转换-MarchOn): wait:Object类的实例方法,释放CPU执行权,进入等待状态,直到  被中断.被拥有该对象锁的线程唤醒(notify或not ...

  5. React Native常用第三方组件汇总--史上最全[转]

    本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...

  6. C++中内存泄漏的几种情况

    1. 在类的构造函数和析构函数中没有匹配的调用new和delete函数 两种情况下会出现这种内存泄露:一是在堆里创建了对象占用了内存,但是没有显示地释放对象占用的内存:二是在类的构造函数中动态的分配了 ...

  7. ubuntu中pycharm配置opencv2环境

    在ubuntu中安装pycharm.opencv2后.在pycharm环境中无法使用opencv,后来查资料显示OpenCV is not pip-installable. You’ll need t ...

  8. maven学习日记（三）-------开发环境搭建（springmvc+hibernate4）各种maven错误汇总

    1.maven编码 gbk 的不可映射字符 解决这个问题的思路: 在maven的编译插件中声明正确的字符集编码编码——编译使用的字符集编码与代码文件使用的字符集编码一致!! 安装系统之后,一般中文系统 ...

  9. java.lang.ClassCastException: java.lang.Long cannot be cast to java.lang.Integer

    hibernate查询结果条数集 原写法: Integer count = (Integer )session.createQuery(hql).uniqueResult(); 报错:java.lan ...

  10. JDBC事务保存点（setSavepoint, releaseSavepoint ）实例

    以下是使用事务教程中描述的setSavepoint和回滚的代码示例. 此示例代码是基于前面章节中完成的环境和数据库设置编写的. 复制并将以下示例代码保存到:JDBCSavepoint.java 中,编 ...