CSS3伸缩盒Flexible Box

这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox、Chrome、Safrai等需要加浏览器前缀。

先说说这种布局的特点:

1)移动端由于屏幕宽度都不一样,在布局的时候为了适配,如果用百分比,就得精确计算,而且如果有1px边框,计算会更加复杂难控制

2)如果有多列,要让所有列的高度一样,以前的话需要用各种计算或用子元素撑高等

3)上下居中,如果是在以前,那么用line-height或top绝对定位等计算

4)表单布局的时候,经常是左边和右边在一行上,以往是设置float或position与margin-left组合布局

5)网页有时候要有个底部,放些联系方式友情链接等,这个底部应该永远在下面,即使中间没内容,也不要移上来,以往的话是给中间赋个高等

而现在,用Flexible Box的几个属性就能完成上面的高难度动作。

有一个在线的flexbox小游戏可以玩耍一下,叫做flexboxfroggy。规则很简单,就是将颜色对应的青蛙跟荷叶合在一起。

一、新旧语法

1)几个基础概念

1. flex container(弹性容器),主要设置display为flex或-webkit-flex,那么这个容器中的子元素就是弹性的。

2. flex item(弹性子元素),尺寸可通过普通的width或height,或者使用高级的flex属性,自定义分配空间设置尺寸。

3. main axis(主轴或横轴)和cross axis(侧轴或纵轴),其中属性flex-direction、justify-content、align-items、align-self控制着轴的方向或对齐方式。

4. flex-wrap属性可以控制弹性子元素的换行。

5. 有个order属性,用整数值来定义排列顺序,数值小的排在前面。

2)新旧属性对比


旧语法

新语法

旧版部分属性兼容性:

新版部分属性兼容性:

3)新旧属性对应


旧属性

新属性 定义或对比

box-orient

box-direction


flex-direction


box-orient:horizontal + box-direction:normal = flex-direction:row

box-orient:horizontal + box-direction:reverse = flex-direction:row-reverse

box-orient:vertical + box-direction:normal = flex-direction:column

box-orient:horizontal + box-direction:reverse = flex-direction:column-reverse

box-flex
flex

flex有3个子属性,而box-flex只能设置一个数字
box-align
align-items

align-content


下面会分析align-items和align-content的区别

box-pack
justify-content

效果相同
box-ordinal-group
order

效果相同

box-lines

(实验属性)


flex-wrap

效果相同(Android的UC和微信浏览器没有换行效果)
box-flex-group  
设置或检索伸缩盒对象的子元素的所属组

  flex-grow
flex子属性,设置或检索弹性盒的扩展比率

 
flex-shrink

flex子属性,设置或检索弹性盒的收缩比率
 
flex-basis

flex子属性,设置或检索弹性盒伸缩基准值
 
flex-flow

flex-direction与flex-wrap的复合属性,设置或检索弹性盒模型对象的子元素排列方式
 
align-self

定义flex子项单独在侧轴(纵轴)方向上的对齐方式

4)align-content与align-items的区别

先看下面的对比图片,左边是align-content,右边是align-items(在线代码请点击这里,用Chrome打开)

align-content只有在多行的时候才会出现效果,如果只有一行就不会有效果,可以修改在线的代码看效果。此属性与在主轴上对齐方式的justify-content属性类似(Android上的UC和微信浏览器不显示flex-wrap效果)

align-items在多行的时候,两列不是被当成了一个整体,但在一行的时候,效果很好。align-self修改的是父级align-items的效果。

5)子元素空间计算方式

新语法flex,里面包括flex-grow扩展比率、flex-shrink收缩比率和flex-basis起始数值。这两个属性的兼容性不是很好,UC浏览器就不能使用。

分两种情况:

1. 容器的宽度 > 子元素宽度总和,查看在线源码

容器的宽度设置为500px,flex-basis子元素起始宽度分别50px、80px、100px。

.flex li:nth-child(1) {
  flex: 1 1 50px;
  background:red;
}

.flex li:nth-child(2) {
  flex: 2 2 80px;
  background:blue;
}

.flex li:nth-child(3) {
  flex: 3 3 100px;
  background:black;
}

先算出剩余空间为270px,用flex-grow来计算。

最终宽度 = flex-grow / flex-grow总和 * 剩余空间 + flex-basis

子元素1 = (1 / (1+2+3)) * 270 + 50= 95

子元素2 = (2 / (1+2+3)) * 270 + 80= 170

子元素3 = (3 / (1+2+3)) * 270 + 100= 235

2. 容器的宽度 < 子元素宽度总和,查看在线源码

容器的宽度设置为110px,flex-basis子元素的属性和上面相同。

先算出溢出值120px,再根据收缩比率,计算出收缩总和 1*50 + 2*80 + 3*100 = 510px。

最终宽度 ≈ flex-basis - (收缩比率 * flex-basis) / 收缩总和 * 溢出值

子元素1 = 50 - (1*50 / 510) * 120 ≈ 38.23

子元素2 = 80 - (2*80 / 510) * 120 ≈ 42.35

子元素3 = 100 - (3*100 / 510) * 120 ≈ 29.40

6)主轴与侧轴

这两个轴看上去像X、Y坐标,但是有一点不同的就是XY位置是不会变的,X坐标轴不会变成Y坐标轴。

通过 flex-direction 或 box-orient 设置排列方式后,主轴和侧轴的位置也会变了。如下图所示:

在做 justify-content 或 align-items 对齐的时候,要注意参照的轴的位置。

例如我想做个垂直居中的操作,我会设置 align-items:center,在上图中的第一个主轴和侧轴中,可以做到想要的效果。

但是在第二个主轴和侧轴中就会显示水平居中的效果,因为 align-items 是根据侧轴(Cross axis)来对齐的。

7)-webkit-box 与 flex 略有不同

网上很多地方仅仅说这两个只是语法上面的不同,但在实际项目中,碰到过只能用-webkit-box才能达到自己想要的效果。

例如我要在flex布局中实现超出的文本显示省略号,查看在线代码-webkit-line-clamp这个属性就必须要和-webkit-box结合使用.

.flex {
  width: 200px;
  display: -webkit-box;
  /*display: flex;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;/*限制在一个块元素显示的文本的行数*/
  overflow: hidden;
  text-overflow: ellipsis;
}

应该还有其他的不同点,我还没发现。

三、实际应用

1)简单的网格系统

bootstrap2.3.2中有个栅格系统,通过百分比或px与float结合产生栅格效果,并且是响应式的,CSS代码要300多行。

flex布局本来就是响应式的,这样会省掉不少代码,查看在线代码

2)多列等高

等高的问题在国外叫《Holy Grail Layout》,名称挺高大上的,内容一大堆。

关于等高的技巧,有很多种,可以查看这篇《八种创建等高列布局》,方法各有优缺点,无论哪种但实现起来都需要些代码。

而flex布局,设置display=flex,各个子元素再个设置空间,他们的高度能够自动调整到相同,查看在线源码

3)绝对底部

在网页上面,有时候底部那栏需要一直贴在下面,例如友情链接这些信息,而如果中间内容没有,就会塌陷上去。

下图中就是在没有内容的时候上来了,虽然可以在内容区域默认设置个高度,但是底部不会正正好贴到屏幕的最下面,除非精确计算。

国外管这个叫《Sticky Footer

flex布局中只要设置下flex-direction: column方向,再设置下容器的高度与屏幕一样或更高,这样底部的子元素就会一直贴在下面。

查看在线代码。更多的信息可以参考《Solved by Flexbox》,Github地址在这里。还有个flexbugs可以参考参考。

四、注意点

1)多列布局中的column-*属性对弹性子元素无效,这也是一种弹性布局,但是有效的场景比较简单

例如瀑布式照片墙(下图所示),需要弹性的内容只有一个img标签

2)曾经有一个场景(下图所示),Flex布局能够等高,但是当用::after设置了个钩后,会出现::after内容的高度还是原先的,导致了错位。

具体内容可以点击这里查看

3)float 和 clear 对弹性子元素无效。

4)vertical-align 对弹性子元素的对齐无效

时间: 2024-10-11 08:46:13

CSS3伸缩盒Flexible Box的相关文章

伸缩盒 Flexible Box(新)

flex   flex-grow    flex-shrink   flex-basis  flex-flow   flex-direction   flex-wrap  align-content   align-items  align-self    justify-content   order (1) flex:  none | <' flex-grow '> <' flex-shrink >' || <' flex-basis '> (a) <' fl

使用CSS3伸缩盒实现图片垂直居中

用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src="1.png" alt=""> </div> 1 .box{ 4 display: flex; /*容器为伸缩盒*/ 5 align-items: center; /*纵轴方向上的对齐方式设置为居中*/ 6 } 7 img{ 8 width: 100%;

css3弹性盒display:box和flex的完整好教程

1.flexbox-CSS3弹性盒模型flexbox布局完整版教程(转)2.CSS3盒模型display:box详解(转)

CCS3 伸缩盒模型(最新)

CSS3伸缩盒对使用响应式布局的网站的开发带来了很好的实现方式.它可以在不使用浮动(float)和定位(position)的情况下实现块级(block)元素的水平排列.并且可以 把父元素的宽度按照比例分配子元素,闲话不多少直接看例子. 1.要实现伸缩盒模式必须给父元素设置:display:flex (老版本display:box 需要加对应的浏览器前缀),实现伸缩盒模式的显示方式. 2.通过设置子元素的flex-grow属性来分配比例 1 <div id="parent">

CSS盒子模型之CSS3可伸缩框属性(Flexible Box)

CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分等分布方式以及如何处理可用的空间.使该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz).chrome(-webkit

CSS3伸缩布局盒模型 - Flexbox基础知识

我们知道在CSS2中,可以使用“浮动”和“定位”来改变盒子在文档流中的显示方式.这两种方式也是目前广泛使用的布局方式,但是在实践过程中会发现有些特殊的布局没法或者很难通过这两种方式来实现.在CSS3中映入了伸缩布局盒模型的概念,这样可以使得某些难以实现的布局变得非常轻松. 使用Flexbox(Flexible Box)可以很好解决以下问题: 1,作为容器的盒子的宽度.高度等可以被其子元素改变.主要体现在改变子元素的宽高来填充可用空间或者防止溢出父元素 2,可以改变子元素的布局方向或者顺序. Fl

CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南

在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布局模块,用于实现容器里项目的对齐.方向.排序(即使在项目大小位置.动态生成的情况).flex容器最大的特性在于,能够修改子元素的宽度和高度,以满足在不同尺寸屏幕下的如意分布. 许多设计人员.开发人员发现flexbox布局方式使用简单,定位元素更加简单.复杂的布局更容易用较少的代码实现,大大地简化了开

flexible伸缩盒模型

前言 flexible box即为可伸缩的盒模型,让容器能让其子元素自由改变宽高或顺序,以最佳的方式填充容器.可以让子元素扩展来填满可用空间,缩小来防止溢出.flexible box由伸缩容器和伸缩项目组成. 兼容性:IE10+.firefox.chrome.safari 基本术语 下面是一张伸缩盒模型的概念图: 1.flex container:伸缩容器 2.flex item:伸缩项目 3.main-axis:主轴 4.main-start:主轴起点 5.main-end:主轴终点 6.ma

css3 新旧伸缩盒的异同

由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版的flexible box.现在整理一下新旧版本的部分常用属性的相同点和不同点,免得被人问起哑口无言. 相同功能的不同写法: display: -webkit-box; // 旧 display: flex; // 新 // 排列方向 -webkit-box-orient: horizontal |