采用Flex布局的元素，被称为Flex容器(flex container)，简称"容器"。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称"项目"

Flex-direction调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>CSS3伸缩布局</title>
  6.    <style>
  7.       body {
  8.          ;
  9.          ;
  10.          font-family: '微软雅黑';
  11.          background-color: #F7F7F7;
  12.       }
  13.  
  14.       ul {
  15.          ;
  16.          ;
  17.          list-style: none;
  18.       }
  19.  
  20.       .wrapper {
  21.          width: 1024px;
  22.          margin: 0 auto;
  23.       }
  24.  
  25.       .wrapper > section {
  26.          min-height: 300px;
  27.          margin-bottom: 30px;
  28.          box-shadow: 1px 1px 4px #DDD;
  29.          background-color: #FFF;
  30.       }
  31.  
  32.       .wrapper > header {
  33.          text-align: center;
  34.          ;
  35.          padding: 20px;
  36.          margin-bottom: 10px;
  37.          font-size: 30px;
  38.       }
  39.  
  40.       .wrapper section > header {
  41.          ;
  42.          padding: 10px;
  43.          font-size: 22px;
  44.          color: #333;
  45.          background-color: #EEE;
  46.       }
  47.  
  48.       .wrapper .wrap-box {
  49.          padding: 20px;
  50.       }
  51.  
  52.       .wrapper .brief {
  53.          min-height: auto;
  54.       }
  55.  
  56.       .wrapper .flex-img {
  57.          width: 100%;
  58.       }
  59.  
  60.       /*全局设置*/
  61.       section ul {
  62.          display: flex;
  63.       }
  64.  
  65.       section li {
  66.          width: 200px;
  67.          height: 200px;
  68.          text-align: center;
  69.          line-height: 200px;
  70.          margin: 10px;
  71.          background-color: pink;
  72.       }
  73.  
  74.       /*垂直方向*/
  75.       ) ul {
  76.          display: flex;
  77.       }
  78.  
  79.       .column ul {
  80.          flex-direction: column;
  81.       }
  82.  
  83.       .row-reverse ul {
  84.          flex-direction: row-reverse;
  85.       }
  86.  
  87.       .column-reverse ul {
  88.          flex-direction: column-reverse;
  89.       }
  90.  
  91.       /*1、指定一个盒子为伸缩盒子 display: flex*/
  92.  
  93.       /*2、设置属性来调整此盒的子元素的布局方式 例如 flex-direction*/
  94.  
  95.       /*3、明确方向*/
  96.  
  97.       /*4、它可互换主侧轴，也可改变方向*/
  98.  
  99.    </style>
  100. </head>
  101. <body>
  102.    <div class="wrapper">
  103.       <header>CSS3-伸缩布局详解</header>
  104.       <!-- 简介 -->
  105.       <section class="brief">
  106.          <header>flex-direction</header>
  107.          <div class="wrap-box">
  108.             <p>调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse</p>
  109.          </div>
  110.       </section>
  111.       <!-- 分隔线 -->
  112.       <section>
  113.          <header>flex-direction</header>
  114.          <div class="wrap-box">
  115.             <p>调整主轴方向（默认为水平方向）</p>
  116.             <ul>
  117.                <</li>
  118.                <</li>
  119.                <</li>
  120.             </ul>
  121.          </div>
  122.       </section>
  123.       <section class="column">
  124.          <header>column</header>
  125.          <div class="wrap-box">
  126.             <p>调整主轴方向（默认为水平方向）</p>
  127.             <ul>
  128.                <</li>
  129.                <</li>
  130.                <</li>
  131.             </ul>
  132.          </div>
  133.       </section>
  134.       <section class="row-reverse">
  135.          <header>row-reverse</header>
  136.          <div class="wrap-box">
  137.             <p>调整主轴方向（默认为水平方向）</p>
  138.             <ul>
  139.                <</li>
  140.                <</li>
  141.                <</li>
  142.             </ul>
  143.          </div>
  144.       </section>
  145.       <section class="column-reverse">
  146.          <header>column-reverse</header>
  147.          <div class="wrap-box">
  148.             <p>调整主轴方向（默认为水平方向）</p>
  149.             <ul>
  150.                <</li>
  151.                <</li>
  152.                <</li>
  153.             </ul>
  154.          </div>
  155.       </section>
  156.    </div>
  157. </body>
  158. </html>

Flex布局（一）flex-direction的更多相关文章

  1. flex布局中flex属性运用在随机发红包的算法上

    flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...

  2. 重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）

    1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...

  3. 微信小程序开发之搞懂flex布局2——flex container

    容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...

  4. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  5. 关于基本布局之——Flex布局

    Flex布局 1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上.给div这类块状元素元素设置display:flex或者给span这类内联元素设置 ...

  6. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  7. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  8. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  9. flex布局的使用，纪念第一次开发手机网站

    一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容, ...

  10. flex布局小记

    越来越深刻的感到日事日毕的必要性,很久之前就做了备忘说要深刻学习flex布局,没想到一拖就拖到了这个时候! 一,什么是flex布局: flex布局即flexible box布局,也就是弹性盒模型或者弹 ...

随机推荐

  1. 封装hiredis——C++与redis对接（一）（string的SET与GET操作）

    在菜鸟教程自学了redis,总想着像Mysql一样,在C/C++中进行对接.于是查询了一些资料,最后找到了hiredis.然而直接用它的话,难免有点不方便.于是,对其进行封装. hiredis直接去g ...

  2. js对象之间的继承

    js的对象之间的继承抛弃了原型与构造器的概念,而转为字面量对象之间进行属性拷贝的方式进行继承. 首先我们来写一个封装好的继承函数: function extend(parent){ var child ...

  3. java压缩与解压

    一 概述 1.目录进入点 目录进入点是文件在压缩文件中的映射,代表压缩文件.压缩文件时,创建目录进入点,将文件写入该目录进入点.解压时,获取目录进入点,将该目录进入点的内容写入硬盘指定文件. 如果目录 ...

  4. 2-4 Sass的函数功能-颜色函数

    RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数, ...

  5. Java入门到精通——调错篇之Astah Community打开报需要jre1.7运行环境

    1.问题概述     Astah Community安装完以后点击运行Astah Community的时候报此应用需要jdk1.7如下图     但是我的电脑在D盘装了jdk1.8了为什么这个软件为什 ...

  6. 第三次Scrum

    1.小组成员 周 斌舒 溢许嘉荣唐 浩黄欣欣廖帅元刘洋江薛思汝 2.小组第三次冲刺完成情况 github仓库小组的第三次任务是完成体系结构环境图和系统原型图.在体系结构设计中,分为上级系统----把目 ...

  7. C# mvc读取模板并修改上传到web

    C# mvc读取模板并修改上传到web 后台: public FileResult GetXls() { FileStream fs = new FileStream(System.Web.HttpC ...

  8. python nose测试

    前提: python3 安装nose 结果: nose目录下有子目录tests和mybag,在mybag下新建my_age.py, 内部有Students类,age属性. tests目录下写Sutde ...

  9. pt-deadlock-logger使用

    死锁监控pt-deadlock-logger 首先我们要创建一个表用来保存死锁的信息: CREATE TABLE deadlocks ( server ) NOT NULL, ts timestamp ...

  10. 监控DAG状态

    Add-PSSnapin microsoft.exchange* Add-PSSnapin Microsoft.Exchange.Management.PowerShell.E2010 $server ...