.弹性盒子
.盒子本来就是并列的
.指定宽度即可
<style>
  .container {
    width: 800px;
    height: 200px;
    display: flex;
    border: 1px solid black;
  }
  .flex {
    background: red;
    margin: 5px;
    flex: 1;
  }
</style>
<body>
  <div class="container">
    <div class="flex">
      flex
    </div>
  </div>
</body>
这个是一整块占据了800像素,如果将子元素多加几块
<div class="container">
  <div class="flex">
    flex
  </div>
  <div class="flex">
    flex
  </div>
  <div class="flex">
    flex
  </div>
  <div class="flex">
    flex
  </div>
  <div class="flex">
    flex
  </div>
  <div class="flex">
    flex
  </div>
</div>

会发现都被平分了有木有。

如果将某一个改成flex为2。会发现占了两分,其它多平分。也就是其中一份是2,2/7。其它都是1,1/7。

如果要某一个固定的高度。我们设置为50px。flex:none。
可以看到固定的宽度,其余的再进行平分,就是flex为2的占(800-50)/6,2/6。其它都是1,1/6。

普通布局
<style>
  .container {
    width: 800px;
    height: 200px;
    display: flex;
  }
  .left {
    background: red;
    width: 200px;
  }
  .right {
    background: blue;
    flex: 1;
  }
</style>
<body>
  <div class="container">
    <div class="left">
      左
    </div>
    <div class="right">
      右
    </div>
  </div>
</body>

页面三栏布局
<style media="screen">
  html *{
    padding: 0;
    margin: 0;
  }
  .layout article div{
    min-height: 100px;
  }
</style>
<body>
  <section class="layout flexbox">
    <style>
      .layout.flexbox .left-center-right{
        display: flex;
      }
      .layout.flexbox .left{
        width: 300px;
        background: red;
      }
      .layout.flexbox .center{
        flex: 1;
        background: yellow;
      }
      .layout.flexbox .right{
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>flexbox</h2>
      </div>
      <div class="right"></div>
    </article>
  </section>
</body>  

 
 

布局方式-flex布局的更多相关文章

  1. 弹性布局(Flex布局)整理

    一.  弹性布局 一个好的网站都有让用户看上去很舒服的布局,一个网站的布局也会或多或少影响到它的浏览量,看完阮大神的博客,就想把弹性布局整理一下. 在平时的我们常用的布局类型有以下几种: 1.浮动+定 ...

  2. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  3. cdispaly的Grid布局与Flex布局

    cdispaly的Grid布局与Flex布局 Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 ...

  4. 浅谈新的布局方式-flex

    引言: 网页布局在flex出来之前,是由盒模型为底子,float,position,table,百分比来进行布局的,重绘的比较多,影响性能,复杂又不好维护.flex布局,可以简便.完整.响应式地实现各 ...

  5. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

  6. CSS布局方式--inline-block 布局

    布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...

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

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

  8. CSS布局之Flex布局

    Flex布局,可以简便.完整.响应式地实现各种页面布局. 浏览器支持:得到所有浏览器的支持.(注:Flex布局将成为未来布局的首选方案)   一. Flex布局的概念 Flex是Flexible Bo ...

  9. 布局方式-float布局

    float的特性一 .元素‘浮动’ .脱离文档流 .但不脱离文本流 首先看一个案例,直观的了解下float的特性 <style> .container{ background: red; ...

随机推荐

  1. 关于表格合并span-method方法的补充(表格数据由后台动态返回)

    之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很多时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很 ...

  2. 转 LIST INCARNATION OF DATABASE

    incarnation在英文中是“化身”的意思. 那么在oracle中,它又是什么意思呢?有什么作用呢? 我们看一些基本概念 Current Incarnation(当前化身):数据库当前正在使用的化 ...

  3. nginx优化项目

    隐藏版本信息 server_tokensSyntax:     server_tokens on | off | build | string;Default:     server_tokens o ...

  4. javascript window.open in safari

    在ios系统中,无法使用 window.open 打开url,经过一番尝试终于找到了解决办法 var url='http://www.baodu.com'; var deviceAgent = nav ...

  5. 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法

    最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示  IOS端显示情况 Android端显示情况 解决方式: <t ...

  6. [转]Tomcat优化之内存、并发、缓存

    1.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 JAVA_OPTS 参数. JAVA_OPTS ...

  7. 2、Spring之AOP

    AOP术语 通知:定义了切面是什么以及何时使用.除了要描述页面要完成的工作,通知还解决了何时执行这个工作的问题. 连接点:连接点是一个物理的存在.这个点可以是调用方法时.抛出异常时.甚至是修改一个字段 ...

  8. Multidex (方法数超过限制的处理)

    报错 : Conversion to Dalvik format failed: Unable to execute dex: method ID not in [0, 0xffff]: 65536 ...

  9. Web测试中定位bug方法

    在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,没错,确实是BUG.进一步了解这个BUG的问题出在那里,是测试人员需要掌握的,可以简单的使用浏览器自带开发者工具 ...

  10. supervisor运行virtualenv环境下的nagios-api

    supervisord-example.conf [unix_http_server] file=/tmp/supervisor.sock ; path to your socket file [su ...