<!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中unicode和中文相互转换

    package test.com.gjob.services; import java.util.Properties; public class Test { public static void ...

  2. jqgrid 查询

    <!DOCTYPE html> <html lang="en" lang="en" xmlns="http://www.w3.org ...

  3. jsp 引用css/js文件返回html网页问题

    我的问题: 我直接在web.xml中匹配了 “/” ,以为能默认使用 “localhost:8080/news/” 这种方式,直接进入首页. 但是这样会匹配所有url 因此请求的 ***.js/*** ...

  4. ROS关于cv_brige的使用

    最近想使用OpenCV 和ROS实现点云的拼接,实现三维重建,那么在学习了kinect的基本的使用方法以后我们知道,直接使用ROS 的包即可得到点云,深度图,rgb图等信息, roslaunch op ...

  5. Android Studio安装Kotlin插件

    1 Kotlin语言介绍 Kotlin 是 JetBrains 在 2010 年推出的基于 JVM 的新编程语言,是一种新的静态类型编程语言.开发者称,设计它的目的是避免 Java 语言编程中的一些难 ...

  6. 客户端Ｃookie读取操作

    function SetCookie(name,value) { //此 cookie 将被保存 30 天(可活动配置) var Days = 30; var exp = new Date(); ex ...

  7. 经典ajax 状态响应图

  8. 百度echarts极速入门

    1.http://echarts.baidu.com/ 进入官网 2.打开官方示例 3.随便打开一个列子并打开f12浏览器调试模式,找到例子的iframe地址 4.打开地址 5.下载例子,so eas ...

  9. MFC绘图小实验(2)

    1,以正五边形的5个顶点为基础,隔点存储构成五角星.填充模式采用WINDING.五角星边界线为5个像素宽的蓝色实线,内部使用红色填充. CRect rect; //定义矩形 GetClientRect ...

  10. python获取代码行号

    获取行号: def get_file(): print("文件名 :",__file__,sys._getframe().f_lineno) print("函数名: &q ...