flex布局那些事儿

什么是FLEX

CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是“垂直居中”布局,非常容易实现。

Flexbox布局语法有三种:

  1. 旧版本 :
    2009年版本,使用display:box或者display:inline-box; [目前仅Safari浏览器支持]
  2. 混合版本:
    2011年版本,使用display:flexbox或者display:inline-flexbox; [仅IE10支持]
  3. 最新版本:
    使用display:flex或者display:inline-flex. [目前的主流浏览器均支持,不过在Webkit内核浏览器需要使用前缀“-webkit-”] 目前大家使用的较多的均为最新版,本篇文章也主要针对最新版Flex。

兼容性

flex

以上为flex的兼容性概括,这个很重要,不然这篇文章看完后才发现flex目前不支持你的需求,或者应用flex后页面出现错乱就很悲剧了。所以,基本上移动端可以放心用。

基本概念

flex图例.jpg
1、一家人

由上图可见,我们可以把一个flex布局块想象成是一家人,爸爸是外层的Flex容器,儿子是内部的Flex项目。

2、两根线

也就是图中的主轴和交叉轴。也可以理解为这是我们的横轴和纵轴。

以上就是flex基本概念。


如何使用

   <div class="father">
      <div class="son">1</div>
      <div class="son">2</div>
      <div class="son">3</div>
      <div class="son">4</div>
    </div>   
1、如何成为flex容器?

外层容器设置样式

.father{
            display: flex;
            width: 400px;
            height: 200px;
            border: 1px #000 solid;
        }

上述写法,定义了一个flex容器,根据设值的不同可以是块状容器或内联容器。这使得直接子结点拥有了一个flex上下文。

2、flex容器上的属性

  1. flex-direction属性决定主轴的方向(即项目的排列方向):
    row 表示从左向右排列
    row-reverse 表示从右向左排列
    column 表示从上向下排列
    column-reverse 表示从下向上排列
  2. flex-wrap : 如何换行
    nowrap(默认):所有Flex项目单行排列
    wrap:所有Flex项目多行排列,按从上到下的顺序
    wrap-reverse:所有Flex项目多行排列,按从下到上的顺序
  3. flex-flow : flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
.box {
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}
  1. justify-content : 定义了项目在主轴上的对齐方式及额外空间的分配方式。(如何沿着主轴横向排列)
    flex-start(缺省):从启点线开始顺序排列
    flex-end:相对终点线顺序排列
    center:居中排列
    space-between:项目均匀分布,第一项在启点线,最后一项在终点线
    space-around:项目均匀分布,每一个项目两侧有相同的留白空间,相邻项目之间的距离是两个项目之间留白的和
    space-evenly:项目均匀分布,所有项目之间及项目与边框之间距离相等
  2. align-items : 定义项目在交叉轴上的对齐方式。(如何沿着纵轴排列,以及横向空间分配)
    stretch(缺省):交叉轴方向拉伸显示
    flex-start:项目按交叉轴起点线对齐
    flex-end:项目按交叉轴终点线对齐
    center:交叉轴方向项目中间对齐
    baseline:交叉轴方向按第一行文字基线对齐
  3. align-content :定义了在交叉轴方向的对齐方式及额外空间分配
    stretch (缺省):拉伸显示
    flex-start:从启点线开始顺序排列
    flex-end:相对终点线顺序排列
    center:居中排列
    space-between:项目均匀分布,第一项在启点线,最后一项在终点线
    space-around:项目均匀分布,每一个项目两侧有相同的留白空间,相邻项目之间的距离是两个项目之间留白的和
3、flex子项目上的属性
  1. order :控制项目在容器中的先后顺序。从小到大排列 值越小越靠前
  2. flex-grow :定义属性的放大比例
    默认是0,为不放大。如果有,则将多余空间按照比例进行放大。
  3. flex-shrink :定义属性的缩小比例
    默认是1,空间不够则缩小 为0则不缩小
  4. flex-basis :属性定义项目在分配额外空间之前的缺省尺寸。属性值可以是长度(20%,10rem等)或者关键字auto。它的默认值为auto,即项目的本来大小。
  5. flex :属性是flex-grow, flex-shrink 和flex-basis的简写,默认值为0 1 auto。后两个是可选属性。(注意顺序,可理解为,子项的放大,缩小,宽)
  6. align-self :属性定义项目的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

以上为flex布局的整体概念。大致可理解为这两个方向:

  1. flex容器上的7个属性,主要控制子项目沿主轴、纵轴(交叉轴)横行,纵向的排列,以及多余空间的分配。
  2. flex子项目的6个属性,主要控制当前子项目特殊的一些控制可以覆盖掉容器对子项的控制。
    因为时间关系,未能将各个容器及子项的属性代码,及相关样式一一罗列。读者可以由浅入深。一一尝试各个属性直接搭配使用的奥妙。

参考文章:

【基础知识】Flex-弹性布局原来如此简单!!
css3参考手册
FLEX语法教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容