.弹性盒子
.盒子本来就是并列的
.指定宽度即可
<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. 转帖 JS的基础语法

    1.变量 1)变量是用来存储信息的容器. 2)在javascript中使用var 运算符(variable 的缩写)加变量名定义的. varx = 10; vary = 10.1; varz = “H ...

  2. numpy.reshape使用条件

    np.array中的元素的个数,需要和转换的类型各个维度的乘积相等.如:\(6=2*3=1*2*3\) 另外,可以发现参数的对应关系为shape(num_dims, num_rows, num_col ...

  3. hadoop-2.6.0.tar.gz + spark-1.6.1-bin-hadoop2.6.tgz的集群搭建（单节点）（CentOS系统）

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...

  4. pinyin4j的基本使用

    PinYin4jUtils工具类代码:http://www.cnblogs.com/jepson6669/p/8856082.html maven中引入依赖 <!-- 引入pinyin4J的依赖 ...

  5. temp脚本

    !/bin/bash source ${HOME_DIR}/script/ideploy_dm.inc source ${HOME_DIR}/script/comm_lib home_dir=$(cd ...

  6. 【卷土重来之C#学习笔记】（一）c#文章导航目录

    [卷土重来之C#学习笔记](一)c#文章导航目录 [卷土重来之C#学习笔记](二)c#编程概述 [卷土重来之C#学习笔记](三)类型.存储.对象 [卷土重来之C#学习笔记](四)类的基本概念 [卷土重 ...

  7. [转]Wrapping multiple calls to SaveChanges() in a single transaction

    本文转自:http://www.binaryintellect.net/articles/165bb877-27ee-4efa-9fa3-40cd0cf69e49.aspx When you make ...

  8. MongoDB集群怎样去访问？

    上一章节简单介绍了MONGODB的集群搭建.相信大家都已经很熟悉了.集群搭建完接下来应该考虑我们的程序应该怎样去访问他. 怎么读写数据等操作.下面把我在工作中的一些用法列出来供大家作为参考. 官网的链 ...

  9. Angular6路由复用与延迟加载的冲突解决——看看有备无患

    结论:   结论放最上面,送给匆匆查资料的你: 同时使用延迟加载 + 路由复用,一定不能使用route.routeConfig.path做key去缓存,否则会死得难看. 经实测(我没有完全去解读源代码 ...

  10. 纯代码编写的vc跳转SB

    今天遇到个问题,我整个项目都是纯代码,突然有个引用的VC用了storyboard,导航的跳转不知道如何操作,最后试了很多方法总算可以了 首先,找到要跳转的sb. UIStoryboard *story ...