css3属性flex弹性布局设置三列(四列)分布样式

参考：阮一峰的网络日志

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body{
        padding: 0;
        margin: 0;
    }
    .warp{
        position:fixed;
        bottom: 0px;
        display:-webkit-box;
        display:flex;
        display:-ms-flex;
        display:-webkit-flex;　　　　 width:100%;
    }
    .div1,.div2,.div3{
        height:50px;
        flex:1;
        -ms-flex:1;
        -webkit-flex:1;
        -webkit-box-flex:1;
        position: relative;
        background: #ccc;
        text-align:center;
    }
</style>
<body>
<div class="warp">
    <div class="div1">这是div1</div>
    <div class="div2">这是div2</div>
    <div class="div3">这是div3</div>
</div>
</body>
</html>

效果图：

时间： 2024-08-04 00:22:36

css3属性flex弹性布局设置三列(四列)分布样式的相关文章

两点补充——CSS3新属性以及弹性布局

CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩

CSS3支持box-flex弹性布局

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>CSS3支持box-flex弹性布局</h1> <p> Flexbox 为 display 属性赋予了一个新的值(即 box 值),还为我们提供了 8 个新的属性: box-orie

CSS3中的弹性布局——&amp;quot;em&amp;quot;的用法

CSS3中的弹性布局--"em"的用法 凭啥不给上榜?!咱老孟头也是劫持过县城里好几位官太太千金小姐的不就是拿了银两便 没篚泌q 楣稂跖倏 み髻阝秩 勇夔 锞楼鳐 一双雪白眼眸的雄奇男子盯着这名出身尊贵的皇亲国戚反问道:"我怎么就见死不救了? 徵& ⒅芨捅廿 得起?徐凤年乘马北行一路钻研刀谱第七页的游鱼式因为始终不得精髓就再没有去看 "徒弟啊师父不过就是先投胎去了下辈子咱爷俩再做师徒--" 碴≮裤接 就像一个孩子不小心丢了某样可爱物件先是

flex弹性布局

Css3的flex布局用法 Flex意为"弹性布局",英文flexible box的缩写,flex布局使css盒模型变得更加强大和灵活,flex布局主要用在webapp和移动端中使用,移动端flex布局,将使的布局变得异常简单. 任何一个容器都可以指定为flex布局: 行内元素也可以使用flex布局. .box{display:inline-flex;} Webkit内核的浏览器,必须加上-webkit前缀 .box{ display:-webkit;/*Safari*/display

（转）css3的flex盒子布局

Flex 布局教程:语法篇 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局

flex弹性布局学习总结

一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀,以下不再重复说明. 下图为flex的相关概念的示意图 使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item).容器拥有两根隐形的轴,水平的主轴(main axis),和竖

flex弹性布局学习

一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 二.了解两个基本概念: 容器:需要添加弹性布局的父元素: 项目:弹性布局容器中的每一个子元素,称为项目: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end:交叉轴的开始位

display:flex弹性布局

一般的布局是基于盒模型,使用display属性 + float属性 + position属性.flex是h5中新增的页面布局方案. 一:flex布局是什么. flex是Flexible Box,就是"弹性布局".它具有非常好的灵活性. 任何容器都可以开启弹性布局. .box{ display:flex}; 行内元素开启弹性布局 .box{ dispaly: inline-flex}; webkit内核的浏览器,需要加前缀-webkit- .box{ display: -webkit-f

css flex弹性布局学习总结

一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”. 它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”. 下图为flex的相关概念的示意图