CSS3伸缩布局盒模型Flex布局

一、Flex 布局是什么?

CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使它们的大小是未知或者动态的,这里简称Flex。

CSS3引入的布局模式Flex布局,主要思想是让容器有能力让其子项目能够改变其宽度高度顺序,以最佳的方式填充可用空间。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小它们以防止溢出容器。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

设为 Flex 布局以后,CSS的columns在伸缩容器上没有效果。子元素(伸缩项目)的floatclearvertical-align属性将失效

Flex布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,可以调节伸缩项目的相对大小和位置。例如,可以 确保伸缩容器中的多余空间平均分配多个伸缩项目。如果伸缩容器没有足够大的空间放置伸缩项目时,浏览器会根据一定的比例减少伸缩项目的大小,使其不溢出伸缩容器。

二、Flex基本概念和模型中的术语

和CSS3其他属性不一样,Flexbox并不是一个属性,而是一个模块,包括多个CSS3属性,涉及东西较多,包括整个组属性,要了解新的术语和概念才能学好Flex布局。

在Flexbox模型中与布局计算偏向使用书写模式方向的块布局和行内布局不同,伸缩布局偏向使用伸缩流的方向。为了让描述伸缩布局变得更容易,本章定义一系列相对于伸缩流的术语。如下图:

图片介绍
  • 主轴、主轴方向:沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延伸。伸缩容器额主轴,伸缩项目主要沿着这条轴进行布局。重要,它不一定是水平的,这主要取决于flex-direction属性。如果其取值为column ,主轴的方向为纵向的。

  • 主轴起点、主轴终点:伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。也就是说,伸缩项目放置在伸缩容器内从主轴起点(main-start)向主轴终点(main-end)方向。

  • 主轴长度、主轴长度属性:伸缩项目在主轴的方向的宽度或高度就是项目的主轴长度,伸缩项目的主轴长度属性是widthheight属性,由哪一个对着主轴的方向决定。

  • 侧轴、侧轴方向:与主轴垂直的轴称做侧轴,侧轴是侧轴方向的延伸。主要取决于主轴的方向。

  • 侧轴起点、侧轴终点:伸缩项目的配置从容器的侧轴起点边开始,往侧轴终点边结束。也就是说,伸缩项目放置在伸缩容器内从侧轴起点(cross-start)向侧轴终点(cross-end)方向。

  • 侧轴长度、侧轴长度属性:伸缩项目在侧轴的方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是widthheight属性,由哪一个对着侧轴的方向决定。

通过设置display属性显式地给一个元素设置为flex或者inline-flex,这个容器就是一个伸缩容器。其中设置为flex的容器被渲染成为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。若元素的display的指定值是inline-flex且元素是一个浮动或绝对定位元素,则display的计算值是flex。

一个伸缩容器的内容具有零个以上的伸缩项目——伸缩容器的每个子元素(除了需要盒修复的元素之外)都会成为一个伸缩项目。且浏览器会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目。

总结:容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

三、Flexbox模型规范状态

Flexbox布局的语法规范版本众多,浏览器支持不一致。Flex布局语法规范主要分成三种:

  • 旧版本(Old),2009年版本。
  • 混合版本(Hybird),2011年版本。
  • 最新版本(Modern),使用display:flex或者display:inline-flex

Flex布局旧版本和混合版本本章不做介绍,只对符合W3C规范的最新版本Flex属性做记录。如果有兴趣的同学可以参考大漠老师图解CSS3这本书第8章CSS3伸缩布局盒模型。

四、伸缩容器的属性

以下6个属性设置在容器上

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content
4.1 flex-direction属性介绍

伸缩流方向。 flex-direction属性是指伸缩容器的主轴方向,其决定了伸缩项目放置在伸缩容器的方向。其默认值为row。如果flex-direction设置为row,Flex项目从左到右排列。如果flex-direction设置为column,Flex项目从上到下排列。

flex-direction属性它有4个值。

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
从左到右依次是row | row-reverse | column | column-reverse
  • row:排版方式从左到右排列。
  • row-reverse:与row排列方向相反。从右向左排列。
  • column:类似于row,不过是从上到下排列。
  • column-reverse:类似于row-reverse,不过是从下到上排列。
4.2 flex-wrap属性介绍

伸缩流换行。伸缩项目在伸缩容器中有时候也会溢出伸缩容器。与传统的CSS盒模型一样,CSS允许使用overflow:hidden属性来处理溢出内容的显示方式。在伸缩容器中有一个伸缩换行属性,主要用来设置伸缩容器的伸缩项目是单行显示还是多行显示,以及决定侧轴的方向。使用此属性来启用溢出的伸缩容器的伸缩项目自动换行到下一行以及控制流动方向。在伸缩容器属性中,主要通过flex-wrap属性来设置伸缩项目是否换行,默认值为nowrap

flex-direction属性它有3个值。

.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
从上到下依次是nowrap | wrap | wrap-reverse;
  • nowrap:伸缩容器单行显示。
  • wrap:换行,第一行在上方。
  • wrap-reverse:换行,第一行在下方。
4.3 flex-flow属性介绍

伸缩方向与换行。 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

4.4 justify-content属性

主轴对齐。justify-content属性定义了伸缩项目在主轴上的对齐方式。指定如何在伸缩项目之前分布伸缩容器额外空间。当一行上的所伸缩项目不能伸缩或可伸缩但已经达到最大长度时,这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时,这一属性也会在项目的对齐上施加一些控制。

justify-content属性它有5个值。

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
从上到下依次是flex-start | flex-end | center | space-between | space-around;
  • flex-start:伸缩项目向一行的起始位置靠齐。
  • flex-end:伸缩项目向一行的结束位置靠齐。
  • center:伸缩项目向一行的中间位置靠齐。
  • space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个项目在一行中最终点位置。
  • space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。(每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。)
4.5 align-items属性

侧轴对齐。 align-items属性定义项目在伸缩容器的当前行的侧轴(垂直于主轴)上的对齐方式。可以把它想象成侧轴的justify-content

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
从上到下依次是flex-start | flex-end | center | baseline | stretch;
  • flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边。(侧轴的起点对齐。)
  • flex-end:伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边。(侧轴的终点对齐。)
  • center:伸缩项目的外边距盒在该行的侧轴上居中放置。(侧轴的中点对齐。)
  • baseline:伸缩项目根据伸缩项目的基线对齐。(项目的第一行文字的基线对齐。)
  • stretch:默认值,伸缩项目拉伸填充整个容器。(如果项目未设置高度或设为auto,将占满整个容器的高度。)
4.6 align-content属性

堆栈伸缩行。用来定义伸缩容器中伸缩项目行在侧轴的对齐方式,类似于侧轴对齐,只不过这是用来控制伸缩项目行在布局轴的堆放方式。align-content属性会更改flex-wrap的行为。它和align-items相似,但不是对齐伸缩项目,它对齐的是伸缩行。简单来说,align-content属性主要用来调准伸缩行在伸缩容器里的对齐方式。它接受的值也很类似。

.box {
   align-content:  flex-start | flex-end | center | space-between | space-around | stretch;
}
从左到右依次是:flex-start | flex-end | center | space-between | space-around | stretch
  • flex-start:各行向伸缩容器的起点位置堆叠。
  • flex-end:各行向伸缩容器的结束位置堆叠。
  • center:各行向伸缩容器的中间位置堆叠。
  • space-between:各行在伸缩容器中平均分布。
  • space-around:各行在伸缩容器中平均分布,在两边各有一半的空间。
  • stretchalign-content的默认值,各行将会伸展以占用额外的空间。

这个属性只有伸缩项目有多行时才生效,这种情况只有display的flex-wrap为wrap时,并且没有足够的空间把伸缩项目行放在同一行中。也就是这个属性将对每一行起作用而不是每个伸缩项目。

五、伸缩项目的属性

以下6个属性设置在伸缩项目上

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self
5.1 flex-grow属性
.box-item {
  flex-grow: <number> (默认值为0)
}
中间的元素设置为flex-grow的值为2

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有伸缩项目的flex-grow设置为1,每个伸缩项目将设置为一个大小相等的额外空间。如果给其中一个伸缩项目设置flex-grow值为2,这个伸缩项目所占的额外空间是其他伸缩项目所占额外空间的2倍。

5.2 flex-shrink属性
.box-item {
  flex-shrink: <number> (默认值为1)
}
flex-shrink属性的值从左到右依次是:0,1,1

flex-shrink属性使用于伸缩项目,此属性根据需要来定义伸缩项目收缩的能力。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

5.3 flex-basis属性
.box-item {
   flex-basis: <length> | auto; (默认值为auto)
}

flex-basis属性使用于伸缩项目。这个属性用来设置伸缩项目的伸缩基准值,伸缩容器的额外空间按比列进行伸缩。在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

5.4 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.box-item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
5.5 align-self属性
.box-item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
伸缩项目第一个1元素设置align-self:flex-end;

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

5.6 order属性
.box-item {
    order: <integer>;
}
第一个元素设置order: 3,第二个元素设置order: 1,第三个元素设置order: 2

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

六、使用Flex布局实现圣杯布局

圣杯布局
  • html
<body>
    <header>我是页眉</header>
    <section>
        <article>我是主内容</article>
        <nav>我是侧边栏</nav>
        <aside>我是右边栏</aside>
    </section>

    <footer>我是页脚</footer>
</body>
  • CSS
    * {
         padding: 0;
         margin: 0;
     }
     html,body{
        width:100%;
        height:100%;
        overflow: hidden;
     }
     body{
        display: flex;
        flex-flow: column wrap;
     }
     header {
        background: red;
        /* 头、脚尺寸固定,不放大、不缩小 */
        flex:0 0 50px;
     }
     section {
        display: flex;
        flex-flow: row wrap;
        flex: 1;
        background: green;
     }
     article {
        flex: 1;
        order: 2;
        background: blue;
     }
     aside{
        order: 3;
        align-items: stretch;
        background:yellow;
     }
     footer {
        /* 头、脚尺寸固定,不放大、不缩小 */
        flex:0 0 50px;
        background: darkgoldenrod;
     }
     

七、参考链接

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

推荐阅读更多精彩内容

  • 一、css的布局模式 css2.1中定义了四种布局模式,由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法。 块...
    LemonnYan阅读 993评论 0 1
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,374评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,279评论 0 26
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • flex布局基础知识 main axis(主轴): Flex容器的主轴主要用来配置Flex项目。它不一定是水平,这...
    前端小兵阅读 473评论 0 1