<!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. 编译和运行java文件 找不到或无法加载主类

    这边提供一个关于程序中含有package关键字,使用“终端”运行程序时出现“找不到或无法加载主类”,而使用Eclipse软件可以正常运行程序的可能解决办法. 例如程序名为HelloWorldTest. ...

  2. php curl_multi系列函数实现多线程抓取网页

    最近几天在做一个多搜索引擎关键字排名查询工具,用于及时方便的了解关键词在各大搜索引擎的排名. 在抓取360搜索的时候,发现360搜索每页只支持显示10个搜索结果,如果想获取100个搜索结果数据,就得搜 ...

  3. 使用@Ignore注解

    断续上一节的例子,了解如何使用@Ignore注解.在测试类FirstDayAtSchoolTest中,我们将添加@Ignore注解到testAddPencils()方法.以这种方式,我们期望这个测试方 ...

  4. e810. 创建弹出菜单

    final JPopupMenu menu = new JPopupMenu(); // Create and add a menu item JMenuItem item = new JMenuIt ...

  5. 嵌入式开发之hi3516---GV7601 SPI通信问题

    http://blog.csdn.net/qq_29350001/article/details/52669964 http://blog.csdn.net/zqj6893/article/detai ...

  6. (转)android媒体--stagefright概述【一】

    转自:http://blog.csdn.net/loovejava/article/details/8971790 最近杂七杂八的忙碌着,前几天看了下这部分主要是stagefright模块的,所以更改 ...

  7. Androidpn 简单实现及分析

    (文中部分内容来自网络) XMPP协议: XMPP : The Extensible Messaging andPresence Protocol. 中文全称:可扩展通讯和表示协议. 简介:可扩展通讯 ...

  8. Python——errno

    该模块实现标准的 errno 系统符号,每一个对应于一个整数,名称和描述借鉴了 linux/include/errno.h.  errno.errorcode 包含从 errno 到底层系统中错误名称 ...

  9. R语言ggplot2-labs 函数

    labs 函数主要有以下三个用途: 1) 设置图片的标题(title), 子标题(subtitle), 引用(caption) 代码示例: ggplot(mtcars, aes(mpg, wt, co ...

  10. oracle转mysql总结

    oracle转mysql总结 ares-sdk初始开发测试使用的是oracle数据库,由于宁波通商的特殊需要,必须把数据库环境从oracle转向mysql. 现对转换过程中出现的问题及经验总结如下: ...