个性化阅读
专注于IT技术分析

css3 flexbox弹性布局 – CSS3高级教程

上一章CSS3高级教程请查看:css3框大小box-sizing

CSS3弹性盒(flexbox或flexble box)是一种新的布局模型,用于创建更灵活的用户界面设计。

理解Flex布局模型

Flexible box,通常称为flexbox,是CSS3中引入的一种新的布局模型,用于创建具有多行和多列的灵活用户界面设计,而不使用百分比或固定长度值。CSS3 flex布局模型提供了一种简单而强大的机制,可以通过样式表自动处理空间分布和内容对齐,而不会干扰实际的标记。

下面的示例演示如何使用flex布局模型创建一个三列布局,其中每一列的宽度和高度相等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
<style>
    .flex-container {
        width: 80%;
        min-height: 300px;
        display: -webkit-flex; /* Safari */     
        display: flex; /* Standard syntax */
        border: 1px solid #808080;
    }
    .flex-container div {
        background: #dbdfe5;
        -webkit-flex: 1; /* Safari */
        -ms-flex: 1; /* IE 10 */
        flex: 1; /* Standard syntax */
    }
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

如果你仔细注意上面的示例代码,你会发现我们没有在.flex-container的内部<div>上指定任何宽度,但是你可以在输出中看到,每一列的宽度正好等于父元素.flex-container的三分之一。

Flex布局如何工作?

Flexbox由flex容器和flex项组成。可以通过将元素的display属性设置为flex(生成块级flex容器)或inline-flex(生成类似于内联块的内联flex容器)来创建flex容器。flex容器的所有子元素都自动成为flex项,并使用flex布局模型进行布局。浮动float、清除clear和垂直对齐vertical-align属性对flex项没有影响。

Flex项被放置在一个Flex容器中,沿着Flex线由Flex -direction属性控制。默认情况下,每个flex容器只有一个flex行,它的方向与当前写入模式或文本方向的内联轴相同。下面的插图将帮助您理解flex布局术语。

Flexbox布局解释

控制伸缩容器内的流

在标准的CSS框模型中,元素通常按照它们在底层HTML标记中出现的顺序显示。Flex布局允许您控制一个Flex容器内的流的方向,这样一来,元素就可以按照向左、向右、向下甚至向上的任何流方向进行布局。

可以使用flex-direction属性指定flex容器中的flex项的流。这个属性的默认值是row,它与文档当前的书写模式或文本方向相同,例如,在英语中是从左到右。

.flex-container {
    width: 80%;
    min-height: 300px;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: row-reverse;
    /* Standard syntax */
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid #666;
}

同样,你可以将flex容器内的flex项以列的形式显示出来,而不是使用flex-direction属性的value列作为行,就像这样

.flex-container {
    width: 80%;
    min-height: 300px;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: column;
    /* Standard syntax */
    display: flex;
    flex-direction: column;
}

控制伸缩项的尺寸

flex布局最重要的方面是flex项能够改变它们的宽度或高度来填充可用空间,这是通过flex属性实现的,它是flex-grow、flex-shrink和flex-basis属性的简写。

伸缩容器将空闲空间按伸缩伸缩因子的比例分配给它的项,或者按伸缩伸缩因子的比例收缩它们以防止溢出。

.flex-container {
    width: 80%;
    min-height: 300px;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standard syntax */
}
.flex-container div {
    padding: 10px;
    background: #dbdfe5;
}
.item1, .item3 {
    -webkit-flex: 1; /* Safari */
    flex: 1; /* Standard syntax */
}
.item2 {
    -webkit-flex: 2; /* Safari */
    flex: 2; /* Standard syntax */
}

在上面的例子中,第一个和第三个伸缩项目将占用1/4,即1/(1+1+2)的自由空间,而第二个伸缩项目将占用1/2,即2/(1+1+2)的自由空间。类似地,你可以使用这个简单的技术创建其他灵活的布局。

注意: 强烈建议使用简写而不是单独的flex属性,因为它可以正确地重置未指定的组件。

在伸缩容器内对齐伸缩项

有四个属性,分别是justify-content, align-content, align-items 和 align-self ,它们被设计用来控制伸缩容器中伸缩项的对齐,前三个应用于flex容器,而最后一个应用于各个flex项目。

沿主轴对齐伸缩项目

可以使用justify-content属性沿着伸缩容器的主轴(即水平方向)对齐伸缩项,通常在flex项没有使用主轴上所有可用空间时使用。

justify-content接受下列值:

  • flex-start – 默认值。伸缩项放置在主轴的开头。
  • Flex -end – Flex项放置在主轴的末端。
  • center – 伸缩项目放置在主轴的中心,两端有相等的自由空间。如果剩余的自由空间是负的,即如果项目溢出,那么flex项目将在两个方向上均匀溢出。
  • space-between – 伸缩项之间的空格沿主轴均匀分布,其中第一项位于主起始边,最后一项位于主末端。如果项溢出或只有一个项,则此值等于flex-start。

  • space-around– Flex项目均匀分布与半大小的空间在两端。如果它们溢出或只有一个项,则此值与center相同。

下面的示例将向你展示在具有固定宽度的多列伸缩容器上,justify-content属性的不同值的影响。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    /* Standard syntax */
    display: flex;
    justify-content: space-around;
}
.item1 {
    width: 75px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    background: #2f97ff;
}

将伸缩项目沿横轴对齐

使用align-items或align-self属性,可以沿着伸缩容器的横轴(即垂直方向)对伸缩项进行对齐。但是,在将校准项应用于伸缩容器的地方,align-self属性将应用于各个伸缩项,并覆盖align-items。这两个属性都接受以下值:

  • Flex -start – Flex项放置在交叉轴的开头。
  • Flex -end – Flex项放置在交叉轴的末端。
  • center – flex项目放置在十字轴的中心,两端有相等的自由空间。如果剩余的自由空间是负的,即如果项目溢出,那么flex项目将在两个方向上均匀溢出。
  • baseline ——每个flex项目的文本基线(或内联轴)与font-size的flex项目的基线对齐。
  • stretch — flex项伸缩以填充当前行或列,除非受到最小和最大宽度或高度的限制。属性的默认值是align-items。

下面的示例将向你展示具有固定高度的多列伸缩容器上的align-items属性的不同值的效果。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-align-items: center;
    /* Standard syntax */
    display: flex;
    align-items: center;
}
.item1 {
    width: 75px;
    height: 100px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    height: 200px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    height: 150px;
    background: #2f97ff;
}

你还可以在多行或多列伸缩容器的横轴上分配空闲空间。属性align-content用于对齐伸缩容器的行,例如,当横轴中有额外的空间时,就会对齐多行伸缩容器中的行,这与justify-content对齐主轴中的各个项目的方式类似。

align-content属性接受与justify-content相同的值,但将它们应用于横轴而不是主轴。它还接受另一种值:

  • stretch – 拉伸所有行或列之间的空闲空间,增加它们的交叉大小。如果剩余的自由空间是负的,这个值就等于flex-start。

下面的示例将向你展示在具有固定高度的多行伸缩容器上,align-content属性的不同值的影响。

.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-align-content: space-around;
    /* Standard syntax */
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
}
.flex-container div {
    width: 150px;
    height: 100px;
    background: #dbdfe5;
}

重新排序各个Flex项目

除了更改flex容器内的流之外,你还可以更改使用order属性显示单个flex项的顺序。此属性接受正整数或负整数作为值。默认情况下,所有的flex项目都是按照它们在HTML标记中出现的顺序显示和布局的,因为默认的顺序值order是0。

下面的示例将向你展示如何控制单个flex项目的顺序。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex;
}
.flex-container div {
    padding: 10px;
    width: 130px;
}
.item1 {
    background: #e84d51;
    -webkit-order: 2; /* Safari 6.1+ */
    order: 2;
}
.item2 {
    background: #7ed636;
    -webkit-order: 1; /* Safari 6.1+ */
    order: 1;
}
.item3 {
    background: #2f97ff;
    -webkit-order: -1; /* Safari 6.1+ */
    order: -1;
}

注意: 具有最低阶值的项目放在最前面,而具有最高阶值的项目放在最后。具有相同订单值的项以相同的顺序显示—它们出现在源文档中。

Flexbox 水平和垂直中心对齐

通常,内容块的垂直对齐需要使用JavaScript或一些丑陋的CSS技巧,但是使用flexbox,你可以很容易做到这一点,不需要任何调整。

下面的示例将向你展示如何使用CSS3灵活的box特性在中间轻松地垂直和水平对齐内容块。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    display: -webkit-flex; /* Safari 6.1+ */
    display: flex; /* Standard syntax */
}
.item {
    width: 300px;
    padding: 25px;
    margin: auto;
    background: #f0e68c;
}

启用Flex项的包装

默认情况下,flex容器只显示一行或一列的flex项。但是,你可以使用flex容器上的flex-wrap属性来控制它的flex项是否会被包装成多行,如果在一个flex行上没有足够的空间容纳它们的话。

flex-wrap属性接受以下值:

  • nowrap—默认值。flex项放在一行中。如果在伸缩线上没有足够的空间,可能会导致溢出。
  • wrap——flex容器将其flex项分解为多行,类似于当文本太宽而无法容纳当前行时,如何将其分解为新行。
  • wrap-reverse —— 反向-如有必要,flex项目将包装,但以相反的顺序,即交叉开始和交叉结束方向互换。

下面的示例将向你展示如何使用flex-wrap属性在flex容器中的单个或多个行中显示flex项。

.flex-container {
    width: 500px;
    min-height: 300px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    /* Standard syntax */
    display: flex;
    flex-wrap: wrap;  
}
.flex-container div{
    width: 130px;
    padding: 10px;    
    background: #dbdfe5;
}

注意: 还可以使用缩写的CSS属性flex-flow在单个声明中设置flex方向和flex-wrap。它接受与单个属性相同的值,这些值可以是任意顺序的。

赞(0) 打赏
未经允许不得转载:srcmini » css3 flexbox弹性布局 – CSS3高级教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏