第六课-弹性布局的学习 - 学习

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > List of blog posts > 第六课-弹性布局的学习

Blogger Information

Blog 10

fans 1

comment 0

visits 9713

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style1.css">
    <title>弹性容器的两种类型</title>
</head>
<body>
    <h2>块级弹性容器</h2>
    <div class="container flex">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <div class="container flex">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <div class="container flex">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <hr>
    <h2>行内块级弹性容器</h2>
    <div class="container inline-flex">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <div class="container inline-flex">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <div class="container inline-flex">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

style1.css

@import "public.css";

.inline-flex{
    display: inline-flex;
    flex-direction: row;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

public.css

.container{
    border:2px dashed rgb(241, 127, 127);
    margin: 15px;
    background-color: rgb(243, 209, 209);
}

.item{
    box-sizing: border-box;
    border:1px solid blanchedalmond;
    background-color: rgb(90, 86, 86);
    padding: 20px;
}

.flex{
    display: flex;
    flex-direction: row;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

手抄：

二、用块级盒子做导航

块级盒子做导航极大的简化了代码，方便快捷美观。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style2.css">
    <title>用块级盒子做导航</title>
</head>
<body>
    <nav>
        <a href="">首页</a>
        <a href="">归档</a>
        <a href="">留言</a>
        <a href="">友链</a>
    </nav>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

style2.css

a{
    padding: 8px;
    border-radius: 5px 5px 5px 5px;
    background-color: rgb(165, 223, 118);
    margin: 0 5px;
    color: black;
    text-decoration: none;

}

a:hover,a:focus,a:active{
    background-color: rgb(241, 91, 196);
    color: white;
}
nav{
    display: flex;
    border-bottom: 2px solid rgb(63, 191, 223);

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

手抄：

三、主轴、交叉轴

主轴：弹性元素流动的方向（可以理解成x轴）；

交叉轴：也叫垂直轴，方向与主轴垂直（可以理解成y轴）。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style3.css">
    <title>主轴、交叉轴</title>
</head>
<body>
    <!-- 主轴，从左往右 -->
    <div class="container flex row">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
<hr>

    <!-- 主轴，从右往左 -->
        <div class="container flex row-reverse">
            <span class="item">item1</span>
            <span class="item">item2</span>
            <span class="item">item3</span>
        </div>
<hr>
        <!-- 交叉轴，又成垂直轴，默认从上往下 -->
        <div class="container flex column">
                <span class="item">item1</span>
                <span class="item">item2</span>
                <span class="item">item3</span>
        </div>
<hr>
        <!-- 交叉轴，从下往上 -->
        <div class="container flex column-reverse">
                <span class="item">item1</span>
                <span class="item">item2</span>
                <span class="item">item3</span>
        </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

style3.css

@import "public.css";

.row{
    flex-direction: row;
}

.row-reverse{
    flex-direction: row-reverse;
}

.column{
    flex-direction: column;
}

.column-reverse{
    flex-direction: column-reverse;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

手抄：

四、用弹性盒子做一个简单的博客页

用弹性盒子来制作博客页，仅仅几行代码即可实现原本需要几十行代码完成的效果。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style4.css">
    <title>用弹性盒子做一个简单的博客页</title>
</head>
<body>
    <header><h2>liu'blog</h2></header>


    <!-- 导航 -->
    <nav>
        <a href="">首页</a>
        <a href="">归档</a>
        <a href="">留言</a>
        <a href="">友链</a>
    </nav>

    <!-- 内容 -->
    <main>
        <article>
            <img src="img/1.jpg" alt="">
            <p>青山白枫冢</p>
            <button>韩雪菱</button>
        </article>
        <article>
                <img src="img/1.jpg" alt="">
                <p>入魔两世隔</p>
                <button>柳梦璃</button>
        </article>

        <article>
                <img src="img/1.jpg" alt="">
                <p>彼岸灞桥柳</p>
                <button>云天河</button>
    </article>
    </main>

    <footer>Copyby </footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

style4.css

@import "style2.css";

*{

    margin: 5px;
    padding: 10px;
    outline: 1px solid rgb(250, 181, 181);
}
img{
    width: 666px;
    height: 666px;
}

/* 将布局元素全部转为盒子类型 */
body,nav,main,article{
    display: flex;
}
body,article{
    flex-direction: column;
}

/* 自动换行 */
main{
    flex-wrap: wrap;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

手抄：

五、弹性元素溢出与多行容器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/style5.css">
    <title>弹性元素溢出与多行容器</title>
</head>
<body>
    <h1>主轴方向演示</h1>
    <h3>1. nowrap 默认不换行，元素自动缩小填充容器</h3>
    <div class="container flex row nowrap">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
        <span class="item">item9</span>
        <span class="item">item10</span>
        <span class="item">item11</span>
    </div> 
    <hr>
    <h3>2. wrap 换行</h3>
    <div class="container flex row wrap">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
        <span class="item">item9</span>
        <span class="item">item10</span>
        <span class="item">item11</span>
    </div> 
    <hr>
    <h3>3. wrap-reverse 换行并且弹性元素反转</h3>
    <div class="container flex row wrap-reverse">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
        <span class="item">item9</span>
        <span class="item">item10</span>
        <span class="item">item11</span>
    </div> 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

@import "public.css";

.row{
    flex-direction: row;
}

.nowrap{
    flex-wrap:nowrap ;
}
.wrap{
    flex-wrap: wrap;
}
.wrap-reverse{
    flex-wrap:wrap-reverse;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

手抄：

六、弹性元素在主轴的分布以及剩余空间

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style6.css">
    <title>弹性元素在主轴的分布以及剩余空间</title>
</head>
<body>
    <h1>弹性元素在主轴的分布以及剩余空间</h1>
    <h3>主轴起点开始排列(默认)</h3>
    <p>单行</p>
    <div class="container flex row nowrap flex-start">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap flex-start">
            <span class="item">item1</span>
            <span class="item">item2</span>
            <span class="item">item3</span>
            <span class="item">item4</span>
            <span class="item">item5</span>
            <span class="item">item6</span>
    </div>
    <hr>
    <h3>主轴终点开始排列</h3>
    <p>单行</p>
    <div class="container flex row nowrap flex-end">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap flex-end">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
    <hr>
    <!-- 剩余空间分配 -->
    <h3>元素在主轴空间居中分布</h3>
    <p>单行</p>
    <div class="container flex row nowrap center">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap center">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>

    <hr>
    <h3>元素在主轴空间收尾靠边其余平均分配</h3>
    <p>单行</p>
    <div class="container flex row nowrap space-between">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap space-between">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>

    <hr>
    <h3>元素在主轴空间中每个元素边空间相等</h3>
    <p>单行</p>
    <div class="container flex row nowrap space-around">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap space-around">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>

    <hr>
    <h3>元素在主轴空间中平均分布</h3>
    <p>单行</p>
    <div class="container flex row nowrap space-evenly">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap space-evenly">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

style6.css

@import "public.css";

.row{
    flex-direction: row;
}

.nowrap{
    flex-wrap: nowrap;
}

.flex-start{
    justify-content: flex-start;
}
.wrap{
    flex-wrap: wrap;
}
.flex-end{
    justify-content: flex-end;
}

.center{
    justify-content: center;
}

/* 剩余空间分配 */
.space-between{
    justify-content: space-between;
}
.space-around{
    justify-content: space-around;
}

.space-evenly{
    justify-content:space-evenly;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

手抄：

七、使用弹性元素主轴对齐来改写导航

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style7.css">
    <title>使用弹性元素主轴对齐来改写导航</title>
</head>
<body>
    <nav>
        <a href="">首页</a>
        <a href="">归档</a>
        <a href="">留言</a>
        <a href="">友链</a>
    </nav>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

style7.css

@import "style2.css";

nav{
    justify-content: center;
}
nav{
    justify-content:space-around ;
}
nav{
    justify-content:space-between ;
}
nav{
    justify-content:space-evenly ;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

手抄：

八、弹性元素在垂直轴的分布以及剩余空间

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style8.css">
    <title>弹性元素在垂直轴的分布以及剩余空间</title>
</head>
<body>
    <h1>弹性元素在垂直轴的分布以及剩余空间</h1>
    <h3>垂直轴元素高度自动拉伸充满整个容器</h3>
    <p>单行</p>
    <div class="container flex row nowrap stretch">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap wrap-stretch">
            <span class="item">item1</span>
            <span class="item">item2</span>
            <span class="item">item3</span>
            <span class="item">item4</span>
            <span class="item">item5</span>
            <span class="item">item6</span>
            <span class="item">item7</span>
            <span class="item">item8</span>
            <span class="item">item9</span>
            <span class="item">item10</span>
            <span class="item">item11</span>
            <span class="item">item12</span>
    </div>
    <hr>
    <h3>垂直轴起点开始排列</h3>
    <p>单行</p>
    <div class="container flex row nowrap flex-start">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap wrap-flex-start">
            <span class="item">item1</span>
            <span class="item">item2</span>
            <span class="item">item3</span>
            <span class="item">item4</span>
            <span class="item">item5</span>
            <span class="item">item6</span>
            <span class="item">item7</span>
            <span class="item">item8</span>
            <span class="item">item9</span>
            <span class="item">item10</span>
            <span class="item">item11</span>
            <span class="item">item12</span>
    </div>
    <hr>
    <h3>垂直轴终点开始排列</h3>
    <p>单行</p>
    <div class="container flex row nowrap flex-end">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap wrap-flex-end">
            <span class="item">item1</span>
            <span class="item">item2</span>
            <span class="item">item3</span>
            <span class="item">item4</span>
            <span class="item">item5</span>
            <span class="item">item6</span>
            <span class="item">item7</span>
            <span class="item">item8</span>
            <span class="item">item9</span>
            <span class="item">item10</span>
            <span class="item">item11</span>
            <span class="item">item12</span>
    </div>
    <hr>
    <!-- 剩余空间分配 -->
    <h3>元素在主轴空间居中分布</h3>
    <p>单行</p>
    <div class="container flex row nowrap center">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap wrap-center">
            <span class="item">item1</span>
            <span class="item">item2</span>
            <span class="item">item3</span>
            <span class="item">item4</span>
            <span class="item">item5</span>
            <span class="item">item6</span>
            <span class="item">item7</span>
            <span class="item">item8</span>
            <span class="item">item9</span>
            <span class="item">item10</span>
            <span class="item">item11</span>
            <span class="item">item12</span>
    </div>

    <hr>
    <h3>元素在主轴空间收尾靠边其余平均分配</h3>
    <p>单行</p>
    <div class="container flex row nowrap space-between">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap wrap-space-between">
            <span class="item">item1</span>
            <span class="item">item2</span>
            <span class="item">item3</span>
            <span class="item">item4</span>
            <span class="item">item5</span>
            <span class="item">item6</span>
            <span class="item">item7</span>
            <span class="item">item8</span>
            <span class="item">item9</span>
            <span class="item">item10</span>
            <span class="item">item11</span>
            <span class="item">item12</span>
    </div>

    <hr>
    <h3>元素在主轴空间中每个元素边空间相等</h3>
    <p>单行</p>
    <div class="container flex row nowrap space-around">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>
    <div class="container flex row wrap wrap-space-around">
            <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
        <span class="item">item9</span>
        <span class="item">item10</span>
        <span class="item">item11</span>
        <span class="item">item12</span>
    </div>

    <hr>
    <h3>元素在主轴空间中平均分布</h3>
    <p>单行</p>
    <div class="container flex row nowrap space-evenly">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <p>多行</p>

    <div class="container flex row wrap wrap-space-evenly">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
        <span class="item">item9</span>
        <span class="item">item10</span>
        <span class="item">item11</span>
        <span class="item">item12</span>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

style8.css

@import "public.css";
.container {
    width: 500px;
    height: 300px;
}

/* 单行容器 */

.strech{
    align-items: stretch;
}

.row{
    flex-direction: row;
}

.nowrap{
    flex-wrap: nowrap;
}

.flex-start{
    align-items: flex-start;
}
.wrap{
    flex-wrap: wrap;
}
.flex-end{
    align-items: flex-end;
}

.center{
    align-items: center;
}



/* 多行容器 */
.wrap-strech{
    align-content: stretch;
}



.wrap-flex-start{
    align-content: flex-start;
}

.wrap-flex-end{
    align-content: flex-end;
}

.wrap-center{
    align-content: center;
}

/* 剩余空间分配 */
.wrap-space-between{
    align-content: space-between;
}
.wrap-space-around{
    align-content: space-around;
}

.wrap-space-evenly{
    align-content:space-evenly;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片.png

手抄：

九、总结

本次课程学习了弹性布局，我总结了以下几点：

弹性盒子的直接子元素就是弹性元素，任何元素都可以通过flex变成弹性盒子，弹性盒子分为块级弹性盒子与行内块级弹性盒子。；
弹性元素在主轴上排列方向flex-direction：row(默认)、row-reverse、column、column-reverse；
弹性元素在主轴上是否换行flex-wrap：nowrap（默认不换行）、wrap、wrap-reverse、nowrap-reverse；
弹性元素在主轴上的对齐方式与空间分布justify-content：center、space-between、space-around、space-evenly；
弹性元素在垂直轴上的对齐方式与空间分布分为单行align-items：stretch（默认元素高度自动拉伸充满整个容器）center；与多行align-content：stretch（默认元素高度自动拉伸充满整个容器）center、space-between、space-around、space-evenly。

弹性盒子功能强大，自适应性强，比较适合移动端的开发。

Correction status：qualified

Teacher's comments：作业好认真呀, 特别是手写代码,非常的整齐, 就算是作文, 学习态度非常棒, 不成功都难

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

thinkphp6.0路由的坑

2019-10-30 16:59:25

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

style1.css

public.css

实例

style2.css

实例

style3.css

实例

style4.css

实例

实例

实例

style6.css

实例

style7.css

实例

style8.css