<!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. Centos warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory

    vi /etc/environment add these lines... LANG=en_US.utf-8 LC_ALL=en_US.utf-8 QQ技术交流群:576269252 ------- ...

  2. sparkR的一个运行的例子

    在sparkR在配置完成的基础上,本例采用Spark on yarn模式,介绍sparkR运行的一个例子. 在spark的安装目录下,/examples/src/main/r,有一个dataframe ...

  3. FPGA静态时序分析——IO口时序（Input Delay /output Delay）（转载）

    转载地址:http://www.cnblogs.com/linjie-swust/archive/2012/03/01/FPGA.html 1.1  概述 在高速系统中FPGA时序约束不止包括内部时钟 ...

  4. python的callback函数原理

    __getattribute__作用 """ class C(object): a = 'abc' def __getattribute__(self, *args, * ...

  5. C语言中的循环语句练习

    注:练习题目均出自<明解C语言 入门篇> 一.do语句 1,求多个整数的和及平均值 #include<stdio.h> int main(void) { ; //和 ; //整 ...

  6. windows系统的便签

    习惯了使用便签,但是重装系统时,一个一个备份太麻烦. win7便笺保存在C:\Users\你的用户名\AppData\Roaming\Microsoft\Sticky Notes\下.重装前拷贝出来, ...

  7. CI框架 -- URL

    移除 URL 中的 index.php 默认情况,你的 URL 中会包含 index.php 文件: example.com/index.php/news/article/my_article 如果你 ...

  8. MySQL提示“错误2：系统找不到指定文件”

    一.问题原因 个人猜测可能是因为安装的是绿色版MySQL,然后在系统变量path中加入了解压后的路径.后续操作上没有跳转到解压后的路径,而是直接在cmd的默认路径下新建MySQL的服务,所以导致此问题 ...

  9. Docker镜像相关

    一.中间镜像 通过持续集成工具Jenkins构建Docker镜像并运行容器,采用的是Docker Compose来进行编排构建运行的.但是每次构建完毕以后通过docker images命令查询,可以发 ...

  10. c#解析XML文件来获得pascal_voc特定目标负样本

    近期在做船仅仅识别方面的事情,须要大量的负样本来训练adaboost分类器. 我从网上下载到一个pascal_voc的数据集.须要找到不包括船仅仅的那些复制出来. 数据集特点 对于每一个图片有一个xm ...