<!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. 【常用配置】——WPS文字常用快捷键大全【史上最全面】转

    WPS文字快捷键大全 Word快捷键 Excel快捷键 PPT快捷键 Office快捷键大全 WPS文字快捷键 WPS表格快捷键 WPS演示快捷键 WPS快捷键大全 用于处理WPS文档的快捷键 创建新 ...

  2. Scrapy 导出的 cvs 文件，双击打开乱码问题

    默认可能是utf8格式,在excel的不要直接打开,而是在excel - 数据 -导入里打开,或者打开前用vscode之类的保存为GBK编码

  3. android将应用中图片保存到系统相册并显示

    我应用到的场景是程序中在视频通讯时截图,将截图保存到本地相册中 /*** @param bmp 获取的bitmap数据 * @param picName 自定义的图片名*/ public static ...

  4. pandas 的算术运算和数据对齐

    pandas 还有一个重要的功能,就是他可以对不同索引的对象进行算数运算.对象相加, 如果存在不同的索引对,则结果的索引就是该索引对的并集. 先来个例子 Series In [33]: s1 = Se ...

  5. 读《像计算机科学家一样思考python》——笔记

    这本书,完全是入门级的,特别简单,一天多就看完. 目录: 第二章 变量.表达式和语句 第三章: 函数调用 第四章: 案例研究:接口设计 第五章 条件与递归 第六章:有返回值的函数 第七章 迭代 第八章 ...

  6. e864. 取的显示器大小尺寸

    See also e670 缓冲图像转换为图像. try { Robot robot = new Robot(); // Capture a particular area on the screen ...

  7. Unity------Unity 脚本基类 MonoBehaviour 与 GameObject 的关系

    Unity 脚本基类 MonoBehaviour 与 GameObject 的关系 标签: unity脚本 2017-03-27 12:55 395人阅读 评论(0) 收藏 举报  分类: Unity ...

  8. 基于SOA的组件化业务基础平台[转]

    转自https://www.ibm.com/developerworks/cn/webservices/1111_xiaojg_soa/index.html 业务基础平台是业务逻辑和基础架构平台之间的 ...

  9. 开源轻量级分布式文件系统--FastDFS

    FastDFS一个高效的分布式文件系统 分布式文件系统FastDFS原理介绍 分布式文件系统FastDFS设计原理 FastDFS安装.配置.部署(一)-安装和部署 分布式文件系统 - FastDFS ...

  10. 在Eclipse中设置进行JNI的头文件编译方法（转 http://blog.csdn.net/mirkerson/article/details/17187109）

    这两天在搞NDK开发,JNI的头文件进行编译的时候,要跑到对应的class文件路径下(通常是工程的bin目录),进行编译生成,很是不便,也容易出错,所以考虑在Eclipse中作为外部工具引入,所以便查 ...