<!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. Freemarker操作字符串

    1.substring(start,end)从一个字符串中截取子串start:截取子串开始的索引,start必须大于等于0,小于等于endend: 截取子串的长度,end必须大于等于0,小于等于字符串 ...

  2. 【javascript】设为首页——setHome

    原生 js 编写,兼容 ie,火狐和谷歌. 函数如下: function setHome(obj,url){ try{ obj.style.behavior = 'url(#default#homep ...

  3. Java嵌入式数据库H2学习总结

    H2数据库使用总结 —— 孤傲苍狼

  4. 【Java集合源码剖析】HashMap源码剖析

    转载出处:http://blog.csdn.net/ns_code/article/details/36034955 HashMap简介 HashMap是基于哈希表实现的,每一个元素是一个key-va ...

  5. JAVA ：Jpanel 控件 无法显示问题

    http://blog.csdn.net/gcangle/article/details/8222005 ——————————————————————————————————————————————— ...

  6. bootstrap底部消息提示插件

    http://www.bootcss.com/p/messenger/ 具体效果下载插件查看

  7. r语言笔记 jn

    get_range <- function(data_name , row_name){ library(stringr) load(data_name) data_str <- str_ ...

  8. 使用javascript实现浏览器全屏

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做 全屏API,游戏呀,等都很有用.先看常见的API 1 element.requestFullSc ...

  9. Java Web知识梳理

    今天给内部做了个培训,貌似搞错了对象,不该对新人讲这么原理性的东西. anyway,还是放上来吧,不知道有没有人能理清其中的逻辑 ^ _ ^ 问题:为什么要用tomcattomcat: servlet ...

  10. HTML5游戏中动画帧的概念理解

    最近在弄一个HTML5游戏,在学习过程中,总结出这个帧结构. HTML5游戏最重要也就是对帧的理解. 容器:Canvas 一个画布 sprite:一个canvas上有多个动画,每个动画对象就是一个An ...