<!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. AutoCAD 导入 Altium Designer 10 教程

    http://www.geek-workshop.com/thread-5478-1-1.html

  2. webpack6--css 背景图片处理

    当css里面含有背景图片,用webpack打包时会报如下错: 如何处理这个问题呢? 我们需要借助于 file-loader 和  url-loader 这2个包. 下面具体说一下步骤: 1.安装 fi ...

  3. 第三百三十一节，web爬虫讲解2—Scrapy框架爬虫—Scrapy安装—Scrapy指令

    第三百三十一节,web爬虫讲解2—Scrapy框架爬虫—Scrapy安装—Scrapy指令 Scrapy框架安装 1.首先,终端执行命令升级pip: python -m pip install --u ...

  4. Lucene系列六：Lucene搜索详解（Lucene搜索流程详解、搜索核心API详解、基本查询详解、QueryParser详解）

    一.搜索流程详解 1. 先看一下Lucene的架构图 由图可知搜索的过程如下: 用户输入搜索的关键字.对关键字进行分词.根据分词结果去索引库里面找到对应的文章id.根据文章id找到对应的文章 2. L ...

  5. Maven是什么？

    Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设,Maven使用标准的目录结构和默认构建生命周期. 在多个开发团队环境时, ...

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

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

  7. R包 randomForest 进行随机森林分析

    randomForest 包提供了利用随机森林算法解决分类和回归问题的功能:我们这里只关注随机森林算法在分类问题中的应用 首先安装这个R包 install.packages("randomF ...

  8. php判断所在的客户端

    //判断是否是手机 function is_mobile() { $agent = strtolower($_SERVER['HTTP_USER_AGENT']); $is_pc = (strpos( ...

  9. 安装tensorflow出现问题的解法

    在ubuntu14.04用pip安装tensorflow-gpu 安装1.3.0遇到问题 1.安装tensorflow出现Cannot uninstall 'six'.问题的解法 https://bl ...

  10. [译]Intel App Framework 3.0的变化

    App Framework 3.0 原文 IAN M. (Intel) 发布于 2015-02-11  05:24 我们高兴地宣布App Framework 的新版本3.0发布了.你可以获得最新的代码 ...