flex弹性容器

    1. 任何元素都可以通过添加display: flex属性,转为弹性盒元素
    2. 转为flex元素后,它的内部的"子元素"就支持flex布局了
    3. 使用了display: flex属性的元素称为: flex容器
    4. flex容器中的"子元素"称之为: flex项目
    5. 容器中的项目自动转为"行内块元素"(不管之前是什么类型)

工作中会存在大量的flex容器的嵌套布局

弹性项目在主轴的排列方式

容器属性:
flex-flow: 主轴方向与换行
justify-content: 项目在主轴上的对齐方式
align-item:项目在交叉轴上的对齐方式
align-content: 项目在多行容器中的交叉轴上的对齐方式

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性项目在主轴的排列方式</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            /* 转为flex弹性布局元素 */
            display: flex;
            height: 15em;
            border: 1px solid #000;
            padding: 1em;
            margin: 1em;
        }

        .container>.item {
            width: 5em;
            height: 5em;
            background-color: lightcyan;
            border: 1px solid #000;
        }

        /* 1. 单行容器 */
        .container {
            /* flex-direction: row;
            flex-wrap: nowrap; */
            flex-flow: row nowrap;
        }

        /* 2. 多行容器:一行显示不下,允许换行显示 */
        .container {
            flex-flow: row wrap;
        }

        .container {
            flex-flow: column nowrap;
            flex-flow: column wrap;

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
    </div>
</body>

</html>

弹性容器在单行容器的对齐方式

容器属性:
flex-flow: 主轴方向与换行
justify-content: 项目在主轴上的对齐方式
align-item:项目在交叉轴上的对齐方式
align-content: 项目在多行容器中的交叉轴上的对齐方式

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性项目在单行容器的对齐方式</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            /* 转为flex弹性布局元素 */
            display: flex;
            height: 15em;
            border: 1px solid #000;
            padding: 1em;
            margin: 1em;
        }

        .container>.item {
            width: 5em;
            /* height: 5em; */
            background-color: lightcyan;
            border: 1px solid #000;
        }

        /* 设置项目在单行容器上轴上的对齐前提: 主轴上存在剩余空间 */
        .container {
            /* flex-flow: row nowrap; */
            /* 空间分配二种方案:  */
            /* 1. 将所有项目视为一个整体,在项目组二边进行分配 */
            justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;

            /* 2. 将项目视为一个个独立的个体,在项目之间进行分配 */
            /* 二端对齐 */
            justify-content: space-between;
            /* 分散对齐 */
            justify-content: space-around;
            /* 平均对齐 */
            justify-content: space-evenly;
        }

        /* 交叉轴上的对齐方案 */
        .container {
            /* 默认拉伸 */
            align-items: stretch;
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>

    </div>
</body>

</html>

弹性容器在多行容器的对齐方式

容器属性:
flex-flow: 主轴方向与换行
justify-content: 项目在主轴上的对齐方式
align-item:项目在交叉轴上的对齐方式
align-content: 项目在多行容器中的交叉轴上的对齐方式

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性项目在多行容器的对齐方式</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            /* 转为flex弹性布局元素 */
            display: flex;
            height: 15em;
            border: 1px solid #000;
            padding: 1em;
            margin: 1em;
        }

        .container>.item {
            width: 5em;
            background-color: lightcyan;
            border: 1px solid #000;
        }


        .container {
            flex-flow: row wrap;

            align-content: stretch;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;

            align-content: space-between;
            align-content: space-around;
            align-content: space-evenly;
        }

        /* 容器属性: 
        flex-flow: 主轴方向与换行
        justify-content: 项目在主轴上的对齐方式
        align-item:项目在交叉轴上的对齐方式
        align-content: 项目在多行容器中的交叉轴上的对齐方式 */
    </style>
</head>

<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
        <div class="item">item10</div>
        <div class="item">item11</div>
        <div class="item">item12</div>

    </div>
</body>

</html>

项目上的属性:flex

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目上的属性: flex</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            /* 转为flex弹性布局元素 */
            display: flex;
            height: 15em;
            border: 1px solid #000;
            padding: 1em;
            margin: 1em;
        }

        .container>.item {
            width: 5em;
            background-color: lightcyan;
            border: 1px solid #000;
        }

        /* 项目属性flex  */
        .container .item {
            /* flex: flex-grow flex-shrink flex-basis */
            /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
            /* 默认会上,不放大或收缩 */
            flex: 0 1 auto;
            flex: initial;
            /* 允许放大和收缩 */
            flex: 1 1 auto;
            flex: auto;
            /* 禁止放大和收缩 */
            flex: 0 0 auto;
            flex: none;

            /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
            flex: 1;
            /* 等于  flex: 1 1 auto; */
            flex: 2;
            flex: 3;

            /* flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */

        }

        /* 写一个案例,要求第2个和第3个项目的宽度是第1个和第四个2倍 */
        .container>.item:first-of-type,
        .container>.item:last-of-type {
            flex: 1;
        }

        .container>.item:nth-of-type(2),
        .container>.item:nth-of-type(2)+* {
            flex: 2;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>


    </div>
</body>

</html>

设置某一个项目在交叉轴上的对齐方式 align-self

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置某一个项目在交叉轴上的对齐方式</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            /* 转为flex弹性布局元素 */
            display: flex;
            height: 15em;
            border: 1px solid #000;
            padding: 1em;
            margin: 1em;

            position: relative;
        }

        .container>.item {
            width: 5em;
            background-color: lightcyan;
            border: 1px solid #000;
        }

        /* 例如设置第2个项目与其它项目的对齐方式不一样 */
        .container>.item:nth-of-type(2) {
            align-self: stretch;
            align-self: flex-start;
            align-self: flex-end;
            align-self: center;


            position: absolute;
            left: 2em;
            top: 3em;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>


    </div>
</body>

</html>

设置项目在主轴上的显示顺序 order

主要参数 order

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置项目在主轴上的显示顺序</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            /* 转为flex弹性布局元素 */
            display: flex;
            height: 15em;
            border: 1px solid #000;
            padding: 1em;
            margin: 1em;

            position: relative;
        }

        .container>.item {
            font-size: 3em;
            width: 5em;
            background-color: lightcyan;
            border: 1px solid #000;
        }

        /* 显示顺序:默认按书写的源码顺序排列 */
        /* 默认序号越小越靠前,越大越靠后 */
        .container>.item:first-of-type {
            order: 1;
            order: 5;
            background-color: yellow;

        }

        .container>.item:nth-of-type(2) {
            order: 2;
            background-color: lightgreen;

        }

        .container>.item:nth-of-type(3) {
            order: 3;
            order: 0;
        }

        .container>.item:last-of-type {
            order: 4;
            /* 支持负值 */
            order: -1;
            background-color: #ccc;
        }

        /* 项目常用属性: 
        flex: 设置基本项目的伸缩与宽度
        align-self: 某个项目的对齐方式 
        order: 设置某个项目在主轴上的排列顺序 */
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>


    </div>
</body>

</html>

作业

作业内容:将flex容器与项目的常用属性全部进行实例演示,并理解属性的常用值的显示效果
演示地址: https://php.gzj2001.com/1221/index.html
image.png

作业代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1222作业</title>
    <style>
        /* 初始化一些默认参数 并使用IE盒子 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /* 将容器转换为flex弹性容器 */
        .container {
            /* 转换flex容器 */
            display: flex;
            /* 添加边框便于观察 */
            border: 1px solid red;
            /* 设置高度 */
            height: 20em;
            /* 设置内边距 */
            padding: 1em;
            /* 设置外边距 */
            margin: 1em;


            /* 弹性容器主要属性 */
            /* 主轴方向与是否换行 */
            flex-flow: row wrap;

            /* 一行项目在主轴上的位置 */
            /* justify-content:center; */

            /* 一行项目在交叉轴上的位置 */
            /* align-items: center; */


        }

        .container>.item {
            /* 给项目添加背景色便于观察 */
            background-color: lightyellow;

            /* 给项目添加边框便于观察 */
            border: 1px solid springgreen;
            /* 设置宽度便于观察 */
            width: 5em;
        }

        /* 项目常用属性 flex展示 【设置基本项目的伸缩与宽度】 */
        .container .item {
            /* 默认 */
            flex: initial;

            /* 允许放大 和 缩放 */
            flex: auto;

            /* 禁止放大和 缩放 */
            flex: none;
        }

        /* 项目常用属性 align-self展示 【某个项目的对齐方式 】 */

        /* 以第八个项目为例来展示 */
        .container .item:nth-of-type(8) {
            /* 默认伸展 */
            align-self: stretch;
            /* 从上往下 */
            /* align-self: flex-start; */
            /* 从下往上 */
            /* align-self: flex-end; */
            /* 居中 */
            /* align-self: center; */
        }

        /* 项目常用属性 order展示 【置某个项目在主轴上的排列顺序】*/
        .container .item:nth-of-type(1) {
            background-color: green;
            order: 2;
        }

        .container .item:nth-of-type(2) {
            background-color: #000;
            order: 5;
        }

        .container .item:nth-of-type(3) {
            background-color: #fff;
            order: 1;
        }

        .container .item:nth-of-type(4) {
            background-color: #456789;
            order: 4;
        }

        .container .item:nth-of-type(5) {
            background-color: #987654;
            order: 8;
        }

        .container .item:nth-of-type(6) {
            background-color: #red
            order: -1;
        }

        .container .item:nth-of-type(7) {
            background-color: #658963;
            order: 6;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
</body>

</html>