flex布局 | 易学教程

Flex 布局教程：语法篇

阅读更多关于 Flex 布局教程：语法篇

转自： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 作者：阮一峰日期： 2015年7月10日网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的Flex写法。以下内容主要参考了下面两篇文章： A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box { display : flex ; } 行内元素也可以使用Flex布局。 .box { display : inline-flex ; } Webkit内核的浏览器

CSS之flex兼容

阅读更多关于 CSS之flex兼容

随着自己写过的页面的增多，也遇到了很多CSS兼容性的问题。这些兼容性问题，都是必然的，因为技术在不断进步，不断革新，所谓，“后浪推前浪，前浪拍死在沙滩上”，当然我们的技术不能是被拍死在沙滩上，我们还要支持，不支持的话，只能是你这个页面，这个产品被淘汰。那么为了不被淘汰，我们就要做些兼容性处理。我写页面的时候用到过很多的 flex 布局，觉得非常好用。下面附上一篇不错的 flex 布局介绍的文章。 Flex 布局教程想了解的可以自己去看看这篇博文，或者自己百度，这里先部多做介绍，我们主要来说一说 flex 布局的兼容性问题。 why? 大家可能想问了， flex 布局为什么会存在兼容性问题啊？之所以存在兼容性问题，是因为技术在不断的更新，有些旧的浏览器只支持旧语法的书写方式，所以就出现所谓的兼容性问题。 what？那么新旧版本是什么？ flex布局分为旧版本 dispaly: box; ，过渡版本 dispaly: flex box; ，以及现在的标准版本 display: flex; 。所以如果你只是写新版本的语法形式，是肯定存在兼容性问题的。 Android 2.3 开始就支持旧版本 display:-webkit-box; 4.4 开始支持标准版本 display: flex; IOS 6.1 开始支持旧版本 display:-webkit-box; 7.1

display:flex布局兼容IE的方法

阅读更多关于 display:flex布局兼容IE的方法

<html> <head> <style> .test { display: -ms-flex; /* 兼容IE */ display: flex; } .test-child { -ms-flex: 1; /* 兼容IE */ flex: 1; } </style> </head> <body> <div class="test"> <div class="test-child">子元素</div> <div class="test-child">子元素</div> </div> </body> </html> 来源： CSDN 作者：小鲤鱼听听链接： https://blog.csdn.net/qq_36485978/article/details/99971091

css flex布局实例

阅读更多关于 css flex布局实例

1、flex-basis 属性用于设置或检索弹性盒伸缩基准值,用在子级。语法：flex-basis: number |auto|initial|inherit; number：一个长度单位或者一个百分比，规定灵活项目的初始长度。 auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> #main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: -webkit-flex; /* Safari */ display: flex; } #main div { -webkit-flex-grow: 0; /* Safari 6.1+ */ -webkit-flex-shrink: 0; /* Safari 6.1+ */ -webkit-flex-basis: 40px; /* Safari 6.1+ */ flex-grow: 0; flex-shrink: 0; flex-basis: 40px; } #main div:nth-of-type(2) {

CSS垂直水平居中，display:flex，布局，文字属性的一些零碎

阅读更多关于 CSS垂直水平居中，display:flex，布局，文字属性的一些零碎

1. body的height不可少，如body{height:100%}，否则子元素会不认，如果子元素的高直接以百分比写的话，会不显示。因为识别不出来。宽度则不会，因为浏览器的宽度是固定的，高度会滚，不固定。 2. border-sizing其实是将默认的content-sizing转为了老ie的盒子模型如果元素float 可以通过转为该模式，让多个元素在width相加===1时控制在一行上 3. display:flex 弹性布局类似于word中的按内容分布表格的意思。按内容来自动分配。为什么在body中定位会失效？ jusitify-content:Center 控制水平居中没有问题但align-items:center 控制垂直居中就失效了因为body没有控制大小和绝对定位！ body { height : 100 % ; width : 100 % ; display : flex ; justify-content : center ; position : absolute ; align-items : center ; } 这里position 必须和height,width一起配合来用，哪个缺少，相应位置上的定位就达不到了。如果是一个普通的div呢？ div { width : 300 px ; height : 230 px ;

display：flex垂直居中

阅读更多关于 display：flex垂直居中

布局说明：1. 场次为一场比赛　　　　　 2. 比赛双方是交战的两个队伍 3. 一场比赛可以有多种玩法，所以场的每个玩法的布局的高度都不确定。主要说下我学到的垂直居中的flex。 1. 第一次尝试。 1 < div class ="parent" > 2 < h1 > 我是通过flex的水平垂直居中噢 </ h1 > 3 < h1 > 我是通过flex的水平垂直居中噢 </ h1 > 4 < h1 > 居中 </ h1 > 5 < h1 > 我是通过flex的水平垂直居中噢 </ h1 > 6 </ div > html,body { width : 100% ; height : 200px ; margin : 0 ; padding : 0 ; } .parent { display : flex ; align-items : center ; /* 垂直居中 */ justify-content : center ; /* 水平居中 */ width : 100% ; height : 100% ; background : #ddd } h1 { border : 1px solid #f00 ; margin : 0 ; padding : 0 ; width : 25% ; } 但是我想要的效果是第三栏的高度和其他栏的高度一样，并且居中。如此css改成了 2.

display:box;

阅读更多关于 display:box;

记得要设置父节点的 width CSS3.0盒模型display:-webkit-box;的使用分类：前端开发 | 标签： display:-webkit-box; | 举报 | 字号订阅 box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前 box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-webkit)。一、 box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分 HTML代码： <article> <section class="sectionOne">01</section> <section class="sectionTwo">02</section> <section class="sectionThree">03</section> </article> CSS代码： .wrap{ width:600px; height:200px; display:-moz-box; display:-webkit-box; display:box; } .sectionOne{

css3 display:flex 属性

阅读更多关于 css3 display:flex 属性

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性注意：设置了 display:flex 之后，子元素的 float 、 clear 和 vertical-align 属性将失效。一、基本概念二、容器的属性 1、flex-direction 决定容器内元素的排列方向，也就是主轴方向。语法共有4个值： 2、flex-wrap：默认情况下所有元素都排列在一条轴线上。flex-wrap.定义了如果在一行放不下的换行问题 3、flex-flow:是 flex-direction 和 flex-wrap 属性的简写语法：默认为：flex-flow：row nowrap 4、justify-content 定义了元素在主轴上的对齐方式有五个值： 5、align-items 属性定义在纵轴如何对齐，也就是在交叉轴如何对齐。可以取5个值： 6、align-content: 定义多根轴线的对齐方式，如果只有一根，则该属性不起作用。三、项目的属性，也就是容器内元素的属性 1、order 属性 2、flex-grow 属性 3、flex-shrink 属性 4、flex-basis 属性 5、flex flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto

浅谈CSS3中display属性的Flex布局

阅读更多关于浅谈CSS3中display属性的Flex布局

最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex 1 .container { 2 display : flex ; 3 flex-direction : column ; 4 align-items : center ; 5 background-color : #b3d4db ; 6 } 编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么究竟这个属性是干嘛用的呢？　　 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本概念采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做

display:box详解

阅读更多关于 display:box详解

display:box ; box-flex 是 css3 新添加的盒子模型属性，它的出现可以解决我们通过N多结构、 css 实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前 box-flex 属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。一、 box-flex 属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分 html 代码： <article> <section>01</section> <section>02</section> <section>03</section> </article> CSS代码： .wrap{ width:600px; height:200px; display:-moz-box; display:-webkit-box; display:box ; } .sectionOne{ background:orange; -moz-box-flex:3; -webkit-box-flex:3; box-flex:3; } .sectionTwo{ background:purple; -moz-box-flex:2; -webkit-box

订阅 flex布局