<!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. 两种常用的jquery事件加载的方法 的区别

    两种常用的jquery事件加载的方法   $(function(){});  window.onload=function(){}  第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...

  2. 【嵌入式】——arm裸机开发 step by step 之 串口通信

    一.在使用S5PV210的串口发送和接收的时候,首先要对S5PV210的串口进行配置,我们使用轮询方式时的配置有哪些? 1.配置GPIO,使对应管脚作为串口的发送和接收管脚 GPA0 0 1 管脚 2 ...

  3. JavaScript：数据类型

    JavaScript中数据类型分为两种: 1.基本数据类型 string number boolean null undefined 2.引用类型 数组.Object.function 一.基本数据类 ...

  4. SpringBoot2 @validated 自定义效验类型

    项目参考:详细参见:<Spring Boot 2精髓:从构建小系统到架构分布式大系统> 第三章 3.5.3节 自定义校验 项目结构 WorkTime package com.archibl ...

  5. 移动互联网App兼容性测试

    我建议大家也可以参考一些针对App监测和统计的网站,都非常有意义,具体如下: 友盟品牌手机排行榜  http://www.umeng.com/ 移动观象台   https://www.talkingd ...

  6. XAudio2学习之调节音调

    频率比有两个地方能够设置.一个是在创建IXAudio2SourceVoice对象的时候.一个是调用IXAudio2SourceVoice::SetFrequencyRatio来调节. 在创建IXAud ...

  7. SQLException： Column count doesn't match value count at row 1

    INSERT INTO table_name(col_name1, col_name2, col_name3) VALUES('value1','value2'); 语句中,前后列数不等造成的 转自: ...

  8. EayRadius 于 2013-7-19 进行体验度更新，增加用户体验度

    EasyRadius于2013-7-19进行更新,此次更新并没有更新通讯接口,通讯接口将统一更新,包括对其他路由的支持 下面我将主要更新的地方向大家描述一下 如果你有疑问或者建议,可以致电137799 ...

  9. docker默认ip查询

    查询docker ip地址 docker-machine ip default

  10. java mysql 链接高版本出现SSL验证

    key1: String url="jdbc:mysql://localhost:3306/test1?useUnicode=true&characterEncoding=utf-8 ...