flex布局,学习flex弹性布局总结

时间: 2017-11-09阅读: 1288标签: 布局作者: Peale

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。  

浏览器支持:

ChromeSafariFirefox
20-(old)、21+(new)3.1+(old)、6.1+(new)2-21(old)、22+(new)
OperaIE
12.1+(new)10(tweener)、11+(new)
AndroidiOS
2.1+(old)、4.4+(new)3.2+ (old)、7.1+(new)

Flex布局概念:


包含元素(flex container)设置display:flex或inline-flex来定义弹性容器,子元素为弹性项目(flex-item)。每个弹性容器包含两根轴(Axis),弹性项目默认从左到右排列的那个轴为主轴(main axis),垂直主轴的那根轴为交叉轴(cross axis)。

弹性盒子使用了不同的布局算法,某些属性用在弹性容器上没有意义:

  1. 多栏布局模块的column-*属性对弹性项目无效。
  2. float与clear对弹性项目无效。使用float将使元素的display属性计为block。
  3. vertical-align对弹性项目的对齐无效。

语法

设置在容器上的属性
a. flex-direction: row(默认) | row-reverse | column | column-reverse ;


1
2
3
4
5
6
.container{
display:flex;
flex-direction:row
}
* 主轴在水平方向,从左到右排列。



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
flex-direction:row-reverse
}
* 主轴在水平方向,从右到左排列。



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
flex-direction:column
}
* 主轴在垂直方向,从上到下排列。



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
flex-direction:column-reverse
}
* 主轴在垂直方向,从下到上排列。



item1
item2
item3




b. flex-wrap: nowrap(默认) | wrap | wrap-reverse ;


1
2
3
4
.container{
display:flex;
flex-wrap:nowrap
}



item1
item2
item3
item4



1
2
3
4
.container{
display:flex;
flex-wrap:wrap
}



item1
item2
item3
item4



1
2
3
4
.container{
display:flex;
flex-wrap:wrap-reverse
}



item1
item2
item3
item4


c.justify-content: flex-start(默认) | flex-end | center | space-between | space-around ;


1
2
3
4
5
6
.container{
display:flex;
justify-content:flex-start
}
*左边对齐



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
justify-content:flex-end
}
*右边对齐



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
justify-content:center
}
*居中



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
justify-content:space-between
}
*两边对齐,项目之间的间隔相等



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
justify-content:space-around
}
*项目两边间距一样,项目之间的间距是项目一侧间距之和



item1
item2
item3



d.align-items: flex-start(默认) | flex-end | center | baseline | stretch ;


1
2
3
4
5
6
.container{
display:flex;
align-items:flex-start;
}
*项目在交叉轴(cross axis)上,向起点(cross start)对齐。



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
align-items:flex-end;
}
*项目在交叉轴(cross axis)上,向终点(cross end)对齐。



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
align-items:center;
}
*项目在交叉轴(cross axis)上,居中对齐。



item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
align-items:baseline;
}
*项目在交叉轴(cross axis)上,基于第一行文字的基线对齐。



什么是基线?

item1
item2
item3



1
2
3
4
5
6
.container{
display:flex;
align-items:stretch;
}
*项目在交叉轴(cross axis)上,撑满整个容器。(前提未设置高度或auto)



item1
item2
item3



e. align-content: flex-start | flex-end | center | space-between | space-around | stretch ; 定义了多根抽条件下在交叉轴(cross axis)下的对齐方式,容器只有一行时无作用


1
2
3
4
5
.container{
display:flex;
flex-wrap:wrap;
align-content:flex-start
}



item1
item2
item3



1
2
3
4
5
.container{
display:flex;
flex-wrap:wrap;
align-content:flex-end
}



item1
item2
item3



1
2
3
4
5
.container{
display:flex;
flex-wrap:wrap;
align-content:center
}



item1
item2
item3



1
2
3
4
5
.container{
display:flex;
flex-wrap:wrap;
align-content:space-between
}



item1
item2
item3



1
2
3
4
5
.container{
display:flex;
flex-wrap:wrap;
align-content:space-around
}



item1
item2
item3



1
2
3
4
5
6
7
.container{
display:flex;
flex-wrap:wrap;
align-content:stretch
}
*占满整个交叉轴,下面的空隙是设置了margin,非剩余空隙



item1
item2
item3



设置在项目上的属性

a.order 定义项目的排列顺序,按属性值大小,从小到大排列。


1
2
3
4
5
6
7
8
9
10
11
12
.container{
display:flex
}
.item1{
order:1
}
.item2{
order:3
}
.item3{
order:2
}

item1
item2
item3


b.flex-grow 定义项目等放大比例,默认是0(不放大)。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container{
display:flex
}
.item1{
flex-grow:1
}
.item2{
flex-grow:2
}
.item3{
flex-grow:1
}
*存在在剩余空间的条件下,item2的占有剩余空间的大小是item3和item1的两倍。
注:下面的空间是设置了padding 和 margin 值,非剩余空间。

item1
item2
item3


c.flex-shrink 定义项目等缩小比例,默认是1(如果空间不够,将缩小)。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container{
display:flex
}
.item1{
flex-shrink:1
}
.item2{
flex-shrink:0
}
.item3{
flex-shrink:1
}
*空间不足的条件下,item3和item1将等比缩小,item2不缩小。
注:下面的空间是设置了padding 和 margin 值,非剩余空间。

item1
item2
item3


d.flex-basis 指定了项目在主轴方向上的初始大小,默认值是auto。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container{
display:flex
}
.item1{
flex-basis:50px
}
.item2{
flex-basis:150px
}
.item3{
flex-basis:300px
}
*item1的在主轴上的初始的大小是50px,item2是150px,item3是300px。

item1
item2
item3


e.flex: none | [<’flex-grow’> <’flex-shrink’>? || <’flex-basis’>] ; 默认值是 0 1 auto ,快捷属性 flex:auto (1 1 auto) 、 flex:none (0 0 auto)


1
2
3
4
5
6
.container{
display:flex
}
.item{
flex:auto
}

item1
item2
item3


f. align-self: auto(默认) | flex-start | flex-end | center | baseline | stretch ;


1
2
3
4
5
6
7
8
.container{
display:flex
}
.item3{
align-self:auto
}
*设置auto 继承父元素的align-items属性,如果父元素没有设置,则相当于项目设置成了stretch。

item1
item2
item3



1
2
3
4
5
6
7
8
.container{
display:flex
}
.item3{
align-self:flex-start
}
*项目在交叉轴(cross axis)上起点对齐。

item1
item2
item3



1
2
3
4
5
6
7
8
.container{
display:flex
}
.item3{
align-self:flex-end
}
*项目在交叉轴(cross axis)上终点对齐。

item1
item2
item3



1
2
3
4
5
6
7
8
.container{
display:flex
}
.item3{
align-self:center
}
*项目在交叉轴(cross axis)上居中。

item1
item2
item3



1
2
3
4
5
6
7
8
.container{
display:flex
}
.item3{
align-self:baseline
}
*项目的第一行文字的基线对齐。

item1
item2
item3



1
2
3
4
5
6
7
8
.container{
display:flex
}
.item3{
align-self:stretch
}
*项目在交叉轴(cross axis)充满。

item1
item2
item3


结束

在整理的过程中发现内容也不少啊!其实没那么难,很多重复的东西,只是运用对象不一样罢了。  

来源:http://peale.cn/2016/11/30/2016_11_30_flex/#more


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/78

CSS flex布局入门

都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly:inline-block、float、position完成排版,但是需要对距离进行计算,计算起来十分麻烦

CSS自定义属性+CSS Grid网格实现超级的布局能力

我在工作中使用CSS Grid已经有几个月了,我非常喜欢它在页面布局时给我的灵活性。这么长时间以来,我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在,我真的无法想象没有Grid的CSS!

css实现内容不相同的左右两个div等高

现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢?下面是3种实现方法,觉得很有代表性,所以索性收藏起来。通过父元素设置 overflow:hidden

实现两端对齐布局_text-align:justify

但是当里面的i个数太多,就会换行,就导致换行的那几个个i就会在新的一行左右对齐分布,解决的方法是在最后一个i后面补上几个i,这个个数加上换行的i的个数要等于第一行i的个数,见代码

符合SEO的HTML布局规范

少用例如iframe等标签引入内容,可以不用尽量不用,因为搜索引擎无法搜索到框架里面的内容;在<body>..</body>标签区中的罗列,都是一些基础的HTML标签,这些标签出现的次序是可以变化的。

CSS中的圣杯布局与双飞翼布局

什么是圣杯布局?所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局;什么是双飞翼布局?和圣杯布局一样,双飞翼布局也是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局,就是布局的形式上存在差异 

css实现保持div的等宽高比

css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。这里以 4:3 为例,通过2种方式来实现

html使用frame框架导航跳转至指定的节的用法

主要内容:左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

弹性(Flex)布局的使用

最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少

瀑布流的实现

现在很多网站都会使用瀑布流的一个效果,什么是瀑布流呢,用在哪些地方呢?大概就是这样的一个效果,一般用于无法保证图片大小的网站。先看下布局+css

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广