CSS3中弹性盒子模型（宇宙无敌爆炸详细）！

吾覭
854 阅读7分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

弹性盒子模型

弹性盒子模型是什么

CSS3新增了弹性盒子模型( Flexible Box或FlexBox)，是一种新的用于在HTML页面实现布局的方式。使得当HTML页面适应不同尺寸的屏幕和不同的设备时,元素是可预测地运行。

弹性盒子模型实现HTML页面布局是与方向无关的。不类似于块级布局侧車垂直方向，内联布局侧重水平方向。

弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响HTML页面性能。

弹性盒子模型相关概念

CSS3新增的弹性盒子模型是一个完整的模块，涉及的样式属性较多。首先，对弹性盒子模型的相关概念完成基本的了解。

UPSX1e.png

弹性盒子模型相关概念

  • 伸缩容器( flex container ) :包裹伸缩项目的父元素。

  • 伸缩项目( flex item) :伸缩容器的每个子元素。

  • 轴(axis) :每个弹性盒子模型拥有两个轴。

    • 主轴(main axis) :伸缩项目沿其- -次排列的轴被称为主轴。
    • 侧轴( cross axis) :垂直于主轴的轴被称为侧轴。

  • 方向( direction) :伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。

  • 尺寸( dimension) :根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。

    • 对应主轴的称为主轴尺寸。
    • 对应侧轴的称为侧轴尺寸。

定义弹性盒子模型

CSS3中想要设置为弹性盒子模型的话,需要通过display样式属性设置值为flex或inline -flex即可。

display : flex;
display : inline-flex;

按照上述示例代码设置指定元素为弹性盒子模型，该元素成为伸缩容器，其子元素则成为伸缩项目。

  • flex:设置指定元素为块级元素的弹性盒子模型。
  • inline-flex:设置指定元素为行内块级元素的弹性盒子模型。

弹性盒子模型依旧存在浏览器兼容问题:

display : -webkit flex;
display: -ms-flex;
display: -moz-flex;
display: -o-flex;

flex-direction属性

CSS flex-direction属性适用于伸缩容器元素，用于创建主轴的方向。

flex-direction: row| row-reverse | column | column-reverse
  • row:设置主轴是水平方向。
  • row-reverse:与row的排列方向相反。
  • column:设置主轴是垂直方向。
  • column-reverse:与column的排列方向相反。
    <style>
        /* 为父级容器元素设置display为flex值
            * 表示当前元素及其所有子元素就是弹性盒子模型
            * 默认情况下，所有子元素作为伸缩项目（沿着主轴进行排列）
         */
        .container {
            border: 1px solid #000;
            margin-top: 10px;
            display: flex;
            /* 
                flex-direction属性
                * 作用 - 设置弹性盒子模型的主轴方向（水平或垂直）
                * 用法 - 应用于伸缩容器元素
                * 值
                    * row - 默认值，设置主轴为水平方向
                    * column - 设置主轴为垂直方向
             */
            flex-direction: row;
         }
         .c2 {
             flex-direction: row-reverse;
         }
        .container div {
            width: 300px;
            height: 100px;
        }
        .container div:nth-child(1) {
            background-color: lavender;
        }
        .container div:nth-child(2) {
            background-color: lightblue;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

UkGFUA.png

justify - content属性

CSS justify-content属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。

justify- content: center| flex-start| flex-end| space- between| space-around
  • center:伸缩项目向第一行的中间位 置对齐。
  • flex- -start: 伸缩项目向第一 行的开始位置对齐。
  • flex- -end:伸缩项目向第一行的结束位置 对齐。
  • space -between:伸缩项目会平均分布在一行中。
  • space- around:伸缩项目会平均分布在一行中，两端保留一半的空间。
		.c1 {
            /* flex-start - 表示伸缩容器沿着主轴的起点 */
            justify-content: flex-start;
        }
        .c2 {
            /* center - 表示伸缩容器沿着主轴的中间位置 */
            justify-content: center;
        }
        .c3 {
            /* flex-end - 表示伸缩容器沿着主轴的终点 */
            justify-content: flex-end;
        }
        .c4 {
            /* space-between - 表示伸缩项目平均分配在伸缩容器 */
            justify-content: space-between;
        }
        .c5 {
            /* space-around - 表示伸缩项目平均分配在伸缩容器，起点和终点位置会留白 */
            justify-content: space-around;
        }

UkNWlt.png

align-items属性

CSS align-items属性适用于伸缩容器元素，用于设置伸缩项目所在行沿着侧轴线的对齐方式。

align-items: center| flex-start | flex-end | baseline | stretch
  • center:伸缩项目向侧轴的中间位置对齐。
  • flex- start:伸缩项目向侧轴的起点位置对齐。
  • flex-end:伸缩项目向侧轴的终点位置对齐。
  • baseline:伸缩项目根据伸缩项目的基线对齐。
  • stretch:默认值，伸缩项目拉伸填充整个伸缩容器。
		.c1 {
            /* flex-start - 伸缩项目向侧轴的起点位置对齐 */
            align-items: flex-start;
        }
        .c2 {
            /* center - 伸缩项目向侧轴的中间位置对齐 */
            align-items: center;
        }
        .c3 {
            /* flex-end - 伸缩项目向侧轴的终点位置对齐 */
            align-items: flex-end;
        }
        .c4 {
            align-items: baseline;
        }
        .c5 {
            align-items: stretch;
        }

UkaFUg.png

flex- wrap属性

CSS flex-wrap属性适用于伸缩容器元素，用于设置伸缩容器的子元素是单行显示还是多行显示。

flex-wrap: nowrap| wrap | wrap-reverse
  • nowrap:设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器。
  • wrap:设置伸缩项目多行显示。
  • wrap-reverse:与wrap相反。
		.c1 {
            width: 600px;
        }
        /* 
            flex-wrap属性
            * 作用 - 设置伸缩元素是单行显示还是多行显示
            * 用法 - 应用于伸缩容器元素
            * 值
                * nowrap - 设置为单行显示
                    * 根据伸缩容器的宽度自动调整所有子元素的宽度
                * wrap - 设置为多行显示
                    * 如果伸缩容器的宽度大于所有元素的宽度之和 -> 单行显示
                    * 如果伸缩容器的宽度小于所有元素的宽度之和 -> 多行显示（类似于浮动效果）
         */
        .c2 {
            width: 600px;
            flex-wrap: nowrap;
        }
        .c3 {
            width: 700px;
            flex-wrap: wrap;
        }

UkwzvR.png

align-content属性

CSS align-content属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改flex-wrap属性的效果。

align-content: center| flex-start| flex-end| space-between| space-around| stretch
  • center:各行向伸缩容器的中间位置对齐。
  • flex- start: 各行向伸缩容器的起点位置对齐。
  • flex- end:各行向伸缩容器的终点位置对齐。
  • space- between:各行会平均分布在一行中。
  • space- around:各行会平均分布在一行中，两端保留一半的空间。
  • stretch:默认值，各行将会伸展以占用额外的空间。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content属性</title>
    <style>
        /* 为父级容器元素设置display为flex值
            * 表示当前元素及其所有子元素就是弹性盒子模型
            * 默认情况下，所有子元素作为伸缩项目（沿着主轴进行排列）
         */
        .container {
            border: 1px solid #000;
            margin-top: 10px;
            display: flex;
            height: 200px;
            width: 700px;
            height: 300px;
            
            flex-wrap: wrap;
        }
        /* 
            align-content属性
            * 作用 - 设置多行显示伸缩项目，沿着侧轴的对齐方式
            * 注意 - 该属性对单行显示伸缩项目是无效的
                1.将伸缩项目设置为多行显示 - flex-wrap: wrap;
                2.利用align-content属性进行设置对齐方式
         */
        .c1 {
            align-content: flex-start;
        }
        .c2 {
            align-content: center;
        }
        .c3 {
            align-content: flex-end;
        }
        .container div {
            width: 300px;
            height: 100px;
        }
        .container div:nth-child(1) {
            background-color: lavender;
        }
        .container div:nth-child(2) {
            background-color: lightblue;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c3">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

UkssTx.png

注意：当前元素值用于多行显示，单行显示无效。

flex-flow属性

CSS flex-flow属性适用于伸缩容器元素，该属性是flex- dir ection和flex- wrap的简写。

flexflow: <'flex direction'> II <'flex-wrap'>

flex属性

CSS flex属性是一个简写属性， 用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。

flex: auta | none I [ <'flex-grow'> <'flex-shrink'>? II <'flex basis'> ]
  • auto:伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为“flex: 1 1 auto"。
  • none:伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为“flex: 0 0 auto”。

flex属性可以指定1个，2个或3个值。

单值语法:值必须为以下其中之- :

  • 一个无单位数( <number> ):它会被当作<flex-grow>的值。
  • 一个有效的宽度(width)值:它会被当作<flex-basis> 的值。
  • 关键字none, auto ，或initial。

双值语法:第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。第二个值必须为以下之一:

  • 一个无单位数:它会被当作<flex-shrink>的值。
  • 一个有效的宽度值:它会被当作<flex-basis>的值。

三值语法:

  • 第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。
  • 第二个值必须为一个无单位数，并且它会被当作<flex-shrink>的值。
  • 第三个值必须为一个有效的宽度值， 并且它会被当作<flex- basis>的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex属性的应用</title>
    <style>
        /* 为父级容器元素设置display为flex值
            * 表示当前元素及其所有子元素就是弹性盒子模型
            * 默认情况下，所有子元素作为伸缩项目（沿着主轴进行排列）
         */
        .container {
            border: 1px solid #000;
            margin-top: 10px;
            display: flex;
            height: 200px;
            flex-wrap: wrap;
        }
        .container div {
            width: 300px;
            height: 100px;
            /* 设置所以子元素为等宽 */
            flex: 1;
        }
        .container div:nth-child(1) {
            background-color: lavender;

        }
        .container div:nth-child(2) {
            background-color: lightblue;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;
        }
        .container div:nth-child(4) {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

UVtOAO.png

align-self属性

CSS align-self属性适用于伸缩容器元素，用于设置伸缩项目自身元素在侧轴的对齐方式。

align-self: center| flex-start| flex end | baseline | stretch
  • center:伸缩项目向侧轴的中间位置对齐。
  • flex- start:伸缩项目向侧轴的起点位置对齐。
  • flex-end:伸缩项目向侧轴的终点位置对齐。
  • baseline:伸缩项目根据伸缩项目的基线对齐。
  • stretch:默认值，伸缩项目拉伸填充整个伸缩容器。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content属性</title>
    <style>
        /* 为父级容器元素设置display为flex值
            * 表示当前元素及其所有子元素就是弹性盒子模型
            * 默认情况下，所有子元素作为伸缩项目（沿着主轴进行排列）
         */
        .container {
            border: 1px solid #000;
            margin-top: 10px;
            display: flex;
            height: 200px;

        }

        .c1 {
            align-items: center;
        }
        .c2 {
            width: 700px;
            height: 300px;
            flex-wrap: wrap;
            align-content: center;
        }
        .c3 {

        }
        .container div {
            width: 300px;
            height: 100px;
        }
        .container div:nth-child(1) {
            background-color: lavender;
        }
        .container div:nth-child(2) {
            background-color: lightblue;
            /* 
                align-self属性
                * 作用 - 设置当前伸缩容器中具体某个伸缩项目元素在侧轴的对齐方式
                * 用法 - 应用于伸缩项目的元素
             */
            align-self: center;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;      
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c3">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

UVNKuq.png

order属性

CSS order属性适用于伸缩项目，用于设置伸缩项目在布局时的顺序。

order: <integer>
  • integer:表示当前伸缩项目所在的次序。
        .container div {
            width: 300px;
            height: 100px;
        }
        .container div:nth-child(1) {
            background-color: lavender;
        }
        .container div:nth-child(2) {
            background-color: lightblue;
        }
        .container div:nth-child(3) {
            background-color: lemonchiffon;      
        }
    </style>
</head>
<body>
    <div class="container c1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container c2">
        <!-- order属性 - 设置伸缩项目的排列顺序 -->
        <div style="order: 2;"></div>
        <div style="order: 1;"></div>
        <div style="order: 3;"></div>
    </div>

UVaV6s.png

avatar
文章
阅读
粉丝