<!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. 【C】——setvbuf（scanf内存溢出问题）

    下面设置了一个长度为20的缓存区,循环对value进行赋值并输出: #include<stdio.h> #define BUFSIZE 20 int main(int argc, char ...

  2. 【html】优酷视频去广告代码

    相信大家都有这样的感受,看个视频有个30秒的广告,让人非常的不爽.同样对于我们前端童鞋来说,为了吸引用户,把制作好的视频嵌入到网页中,结果因为视频有30秒的广告不但没有吸引到多少用户,反而可能会流失一 ...

  3. Java RMI 的使用及原理

    1.示例 三个角色:RMIService.RMIServer.RMIClient.(RMIServer向RMIService注册Stub.RMIService在RMIClient lookup时向其提 ...

  4. 【转】Android下使用配置文件(Preferences)

    http://www.aslibra.com/blog/post/android_SharedPreferences.php android下可以方便的使用key-value的配置文件: // S.P ...

  5. WDCP面板V3新版本安装与体验记录

    WDCP面板V3版本看介绍变动还是比较大的,比如从底层重新架构,以及我们需要的PHP.MYSQL.NGINX等版本都是使用较新稳定版本,支持CENTOS5-7发行版本环境,至于后台界面的友好度有点扁平 ...

  6. 关于Unity中DOTween插件的使用(专题一)

    DOTween flash里面的一个概念叫补间动画,DOTween就是干这个事情的. 补间动画:在1秒钟之内从A点移动到B点,在这个之间会把动画补间补好. 当我们安装好DOTween后,它就会提供很多 ...

  7. QMDP-Net: Deep Learning for Planning under Partial Observability

    一篇用deep neural network做POMDP的论文

  8. 实现接口时@Override注解问题

      用IntelliJ 15打开一个以前的工程,发现代码出现很多关于@Override的错误,编辑器提示:“@Override is not allowed when implementing int ...

  9. SpringBoot系列二：搭建自己的第一个SpringBoot程序

    声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 一.根据官网手工搭建(http://projects.spring.io/spring-boot/#quick-start) 1 ...

  10. unity3d-----Collider 组件参考

    Collider 组件参考 点击 属性检查器 下面的 添加组件 按钮,然后从 添加碰撞组件 中选择需要的 Collider 组件,即可添加 Collider组件到节点上. Collider 组件属性 ...