文章: 阅读:

CSS Flex 弹性盒子

CSSCSS

前言

  • 弹性盒子是 CSS3 的一种新的布局模式。

  • CSS3 弹性盒（Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

  • 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

属性 描述 CSS 备注 🔗
flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间 3 🔗
flex-grow 设置或检索弹性盒的扩展比率 3 🔗
flex-shrink 设置或检索弹性盒的收缩比率 3 🔗
flex-basis 设置或检索弹性盒伸缩基准值 3 🔗
flex-flow 复合属性。设置或检索弹性盒模型对象的子元素排列方式 3 🔗
flex-direction 该属性通过定义 flex 容器的主轴方向来决定 felx 子项在 flex 容器中的位置 3 🔗
flex-wrap 该属性控制 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向 3 🔗
align-content 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直） 3 🔗
align-items 定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式 3 🔗
align-self 定义 flex 子项单独在侧轴（纵轴）方向上的对齐方式 3 🔗
justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 3 🔗
order 设置或检索弹性盒模型对象的子元素出现的順序 3 🔗
display 指定 HTML 元素盒子类型 1 🔗

1、弹性盒子

  • 弹性盒子由弹性容器 (Flex container) 和弹性子元素 (Flex item) 组成。

  • 弹性容器通过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。

  • 弹性容器内包含了一个或多个弹性子元素。

属性 描述 CSS 备注 🔗
display 指定 HTML 元素盒子类型 1 🔗

  • 注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

  • 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

  • 以下元素展示了弹性子元素在一行内显示，从左到右。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            
            width: 400px;
            height: 150px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

  • 效果


    flex item 1
    flex item 2
    flex item 3

  • 当然可以修改排列方式。如果设置 direction 属性为 rtl (right-to-left)，弹性子元素的排列方式也会改变，页面布局也跟着改变。

  • 实例

    1
    2
    3
    4
    5
    <style>
        body {
            direction: rtl;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.1 子元素排列方式

  • flex-direction 属性指定了弹性子元素在父容器中的位置。
属性 描述 CSS 备注 🔗
flex-direction 指定了弹性容器中子元素的排列方式 3 🔗

  • 语法

    1
    flex-direction: row | row-reverse | column | column-reverse;

  • 属性值

值 描述
row 默认值。横向从左到右排列（左对齐）
row-reverse 与 row 相同，反转横向排列（右对齐），从后往前排，最后一项排在最前面
column 纵向排列
column-reverse 与 column 相同，反转纵向排列，从后往前排，最后一项排在最上面
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

1.1.1 row-reverse

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            
            flex-direction: row-reverse;
            -webkit-flex-direction: row-reverse;

            width: 400px;
            height: 150px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.1.2 column

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            flex-direction: column;
            -webkit-flex-direction: column;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.1.3 column-reverse

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            flex-direction: column-reverse;
            -webkit-flex-direction: column-reverse;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.2 水平对齐方式

  • 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
属性 描述 CSS 备注 🔗
justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 3 🔗

  • 语法

    1
    justify-content: flex-start | flex-end | center | space-between | space-around;

  • 属性值

值 描述
flex-start 默认值。项目位于容器的开头。第一个弹性项的 main-start 外边距边线被放置在该行的 main-start 边线，而后续弹性项依次平齐摆放
center 项目位于容器的中心，如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出
flex-end 项目位于容器的结尾。第一个弹性项的 main-end 外边距边线被放置在该行的 main-end 边线，而后续弹性项依次平齐摆放
space-between 项目位于各行之间留有空白的容器内。如果剩余空间为负或者只有一个弹性项，则该值等同于 flex-start。否则，第 1 个弹性项的外边距和行的
main-start 边线对齐，而最后 1 个弹性项的外边距和行的 main-end 边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等
space-around 项目位于各行之前、之间、之后都留有空白的容器内，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，
则该值等同于 center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是 20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

  • 效果图

1.2.1 flex-end

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            
            justify-content: flex-end;
            -webkit-justify-content: flex-end;

            width: 400px;
            height: 150px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.2.2 center

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            justify-content: center;
            -webkit-justify-content: center;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.2.3 space-between

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            justify-content: space-between;
            -webkit-justify-content: space-between;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.2.4 space-around

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            justify-content: space-around;
            -webkit-justify-content: space-around;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.3 垂直对齐方式

  • align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
属性 描述 CSS 备注 🔗
align-items 定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式 3 🔗

  • 语法

    1
    align-items: flex-start | flex-end | center | baseline | stretch;

  • 属性值

值 描述
stretch 默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为 ‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 ‘min/max-width/height’ 属性的限制
center 元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
flex-start 元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end 元素位于容器的结尾。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
baseline 元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与 ‘flex-start’ 等效。其它情况下，该值将参与基线对齐
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

1.3.1 stretch

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;

            align-items: stretch;
            -webkit-align-items: stretch;

            width: 400px;
            height: 150px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            margin: 10px;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.3.2 flex-start

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            align-items: flex-start;
            -webkit-align-items: flex-start;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.3.3 flex-end

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            align-items: flex-end;
            -webkit-align-items: flex-end;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.3.4 center

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            align-items: center;
            -webkit-align-items: center;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.3.5 baseline

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            align-items: baseline;
            -webkit-align-items: baseline;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.4 换行方式

  • flex-wrap 属性用于指定弹性盒子的子元素换行方式。
属性 描述 CSS 备注 🔗
flex-wrap 该属性控制 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向 3 🔗

  • 语法

    1
    flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

  • 属性值

值 描述
nowrap 默认值。规定灵活的项目不拆行或不拆列
wrap 规定灵活的项目在必要的时候拆行或拆列
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

1.4.1 nowrap

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;

            flex-wrap: nowrap;
            -webkit-flex-wrap: nowrap;

            width: 300px;
            height: 150px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.4.2 wrap

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.4.3 wrap-reverse

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .flex-container {
            
            flex-wrap: wrap-reverse;
            -webkit-flex-wrap: wrap-reverse;
        }
    </style>

  • 效果


    flex item 1
    flex item 2
    flex item 3

1.5 行对齐

  • align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
属性 描述 CSS 备注 🔗
align-content 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直） 3 🔗

  • 语法

    1
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  • 属性值

值 描述
stretch 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸
center 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容
边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行
flex-end 元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行
space-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴
起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等
space-around 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，
该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap-reverse;
            -webkit-flex-wrap: wrap-reverse;

            align-content: center;

            width: 300px;
            height: 300px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

  • 效果


    flex item 1
    flex item 2
    flex item 3

2、弹性子元素

2.1 排序

属性 描述 CSS 备注 🔗
order 设置或检索弹性盒模型对象的子元素出现的順序 3 🔗

  • 语法

    1
    order:

  • 属性值

值 描述
number 默认值是 0。规定灵活项目的顺序，用整数值来定义排列顺序，数值小的排在前面。可以为负值
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            width: 400px;
            height: 150px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .first {
            order: -1;
            -webkit-order: -1;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item first">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

  • 效果


    flex item 1
    flex item 2
    flex item 3

2.2 对齐

  • 设置 “margin” 值为 “auto” 值，自动获取弹性容器中剩余的空间。所以设置垂直方向 margin 值为 “auto”，可以使弹性子元素在弹性容器的两轴方向上都完全居中。
属性 描述 CSS 备注 🔗
margin 简写属性。在一个声明中设置所有外边距属性 1 🔗
  • 属性值
值 描述
auto 浏览器计算外边距
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的外边距
inherit 规定应该从父元素继承外边距

  • 以下实例在第一个弹性子元素上设置了 margin-right: auto;。它将剩余的空间放置在元素的右侧。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            width: 400px;
            height: 150px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .flex-item:first-child {
            margin-right: auto;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

  • 效果


    flex item 1
    flex item 2
    flex item 3

2.3 居中

  • 使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。
属性 描述 CSS 备注 🔗
margin 简写属性。在一个声明中设置所有外边距属性 1 🔗
  • 属性值
值 描述
auto 浏览器计算外边距
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的外边距
inherit 规定应该从父元素继承外边距

  • 以下实例将完美解决我们平时碰到的居中问题。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            width: 400px;
            height: 250px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;

            margin: auto;
        }
    </style>
    1
    2
    3
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
    </div>

  • 效果


    flex item 1

2.4 垂直对齐

  • align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
属性 描述 CSS 备注 🔗
align-self 定义 flex 子项单独在侧轴（纵轴）方向上的对齐方式 3 🔗

  • 语法

    1
    align-self: auto | flex-start | flex-end | center | baseline | stretch;

  • 属性值

值 描述
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”
stretch 元素被拉伸以适应容器。如果指定侧轴大小的属性值为 ‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 ‘min/max-width/height’ 属性的限制
center 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
flex-start 元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与 ‘flex-start’ 等效。其它情况下，该值将参与基线对齐
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            width: 400px;
            height: 250px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            width: 60px;
            min-height: 100px;
            margin: 10px;
        }
        .item1 {
            align-self: flex-start;
            -webkit-align-self: flex-start;
        }
        .item2 {
            align-self: flex-end;
            -webkit-align-self: flex-end;
        }
        .item3 {
            align-self: center;
            -webkit-align-self: center;
        }
        .item4 {
            align-self: baseline;
            -webkit-align-self: baseline;
        }
        .item5 {
            align-self: stretch;
            -webkit-align-self: stretch;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <div class="flex-container">
        <div class="flex-item item1">flex-start</div>
        <div class="flex-item item2">flex-end</div>
        <div class="flex-item item3">center</div>
        <div class="flex-item item4">baseline</div>
        <div class="flex-item item5">stretch</div>
    </div>

  • 效果


    flex-start
    flex-end
    center
    baseline
    stretch

2.4.1 flex

  • 块元素垂直居中问题采用 flex 解决。

  • 行内元素垂直居中问题解决如下：

  • 1）单行

    • 该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

  • 2）多行

    • 设置该元素 css 属性：display: table-cell; vertical-align: middle;，还需设置该元素的父级元素 css 属性：display: table;。

2.5 分配空间

  • flex 属性用于指定弹性子元素如何分配空间。
属性 描述 CSS 备注 🔗
flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间 3 🔗

  • 语法

    1
    flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ];

  • 属性值

值 描述
flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量
flex-basis 项目的长度。合法值：”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字
auto 与 1 1 auto 相同
none 与 0 0 auto 相同
initial 设置该属性为它的默认值，即为 0 1 auto
inherit 从父元素继承该属性

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <style>
        .flex-container {
            display: flex;
            display: -webkit-flex;
            width: 400px;
            height: 250px;
            background-color: lightgrey;
        }
        .flex-item {
            background-color: cornflowerblue;
            margin: 10px;
        }
        .item1 {
            flex: 2;
            -webkit-flex: 2;
        }
        .item2 {
            flex: 1;
            -webkit-flex: 1;
        }
        .item3 {
            flex: 1;
            -webkit-flex: 1;
        }
    </style>
    1
    2
    3
    4
    5
    <div class="flex-container">
        <div class="flex-item item1">item1</div>
        <div class="flex-item item2">item2</div>
        <div class="flex-item item3">item3</div>
    </div>

  • 效果


    item1
    item2
    item3

3、实例

  • 使用弹性盒子创建响应式页面。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <style>
        .flex-container {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
            font-weight: bold;
            text-align: center;
        }
        .flex-container>* {
            padding: 10px;
            flex: 1 100%;
        }
        
        .main {
            text-align: left;
            background: cornflowerblue;
        }
        
        .header {background: coral;}
        .footer {background: lightgreen;}
        .aside1 {background: moccasin;}
        .aside2 {background: violet;}
        
        @media all and (min-width: 600px) {
            .aside {flex: 1 auto;}
        }
        @media all and (min-width: 800px) {
            .main {flex: 3 0px;}
            .aside1 {order: 1;}
            .main {order: 2;}
            .aside2 {order: 3;}
            .footer {order: 4;}
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="flex-container">
        <header class="header">头部</header>
        <article class="main">
            <p>学的不仅是技术，更是梦想！提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP ,
                MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。</p>
        </article>
        <aside class="aside aside1">边栏 1</aside>
        <aside class="aside aside2">边栏 2</aside>
        <footer class="footer">底部</footer>
    </div>

  • 效果


    头部

    学的不仅是技术，更是梦想！提供了最全的编程技术基础教程, 介绍了 HTML、CSS、Javascript、Python，Java，Ruby，C，PHP, MySQL 等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。

    底部

4、浏览器支持

属性
Basic support
(single-line flexbox)		 29.0
21.0 -webkit-		 11.0 22.0
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit-		 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:28


评论


文章目录
  1. 1. 前言
  2. 2. 1、弹性盒子
    1. 2.1. 1.1 子元素排列方式
      1. 2.1.1. 1.1.1 row-reverse
      2. 2.1.2. 1.1.2 column
      3. 2.1.3. 1.1.3 column-reverse
    2. 2.2. 1.2 水平对齐方式
      1. 2.2.1. 1.2.1 flex-end
      2. 2.2.2. 1.2.2 center
      3. 2.2.3. 1.2.3 space-between
      4. 2.2.4. 1.2.4 space-around
    3. 2.3. 1.3 垂直对齐方式
      1. 2.3.1. 1.3.1 stretch
      2. 2.3.2. 1.3.2 flex-start
      3. 2.3.3. 1.3.3 flex-end
      4. 2.3.4. 1.3.4 center
      5. 2.3.5. 1.3.5 baseline
    4. 2.4. 1.4 换行方式
      1. 2.4.1. 1.4.1 nowrap
      2. 2.4.2. 1.4.2 wrap
      3. 2.4.3. 1.4.3 wrap-reverse
    5. 2.5. 1.5 行对齐
  3. 3. 2、弹性子元素
    1. 3.1. 2.1 排序
    2. 3.2. 2.2 对齐
    3. 3.3. 2.3 居中
    4. 3.4. 2.4 垂直对齐
      1. 3.4.1. 2.4.1 flex
    5. 3.5. 2.5 分配空间
  4. 4. 3、实例
  5. 5. 4、浏览器支持
隐藏目录