Community Learn Tools Library Leisure

English

Home > List of blog posts > 弹性盒布局之弹性容器

Blogger Information

Blog 34

fans 2

comment 0

visits 23176

Special Recommendation

More>

Related recommendations

弹性容器:弹性容器:

弹性容器分为二种:
display: flex: 块级弹性容器
display: inline-flex: 行内块级弹性容器
弹性容器常用属性
1、弹性元素在主轴上排列方向：flex-direction
flex-direction:row(默认) 水平方向，从左到右排列
flex-direction:row-reverse水平方向，从右到左排列
flex-direction:columne垂直方向，从上到下排列
flex-direction:column-reverse垂直方向，从下到上排列
2、弹性元素在主轴上是否换行：flex-wrap
flex-wrap:norap(默认) 不换行
flex-wrap:wrap换行
flex-wrap:wrap-reverse换行，反向排列
3、flex-direction 和 flex-wrap 属性的复合属性：flex-flow
4、弹性元素在垂直轴上的对齐方式与空间分布：justify-content
justify-content:flex-start默认值。元素位于容器的开头
justify-content:flex-end元素位于容器的结尾。
justify-content:center元素位于容器的中心。
justify-content:space-between首尾元素紧贴起点和终点，基它元素平均分配
justify-content:space-around两端保留元素之间间距的一半
justify-content:space-evenly元素之间及元素与边界之间的间距相同
5、定义弹性元素（单行容器）在垂直轴上的对齐方式：align-items
align-items:stretch默认值。元素被拉伸以适应容器。
align-items:flex-start元素位于容器的起点
align-items:flex-end元素位于容器的终点
align-items:center元素位于容器的中心
6、定义多行容器中弹性元素在垂直轴上的对齐方式与空间分配：align-content
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 {    display: flex;}
/*行内/内联弹性盒子*/
.inline-flex {display: inline-flex;}

弹性容器(盒子)做导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>弹性容器(盒子)做导航</title>
        <style type="text/css">
            a {padding: 5px 10px;margin: 0 5px;border-radius: 5px 5px 0 0;text-decoration-line: none;background-color: lightgreen;box-shadow: 2px 0 1px #888;color: black;}
            a:hover,a:focus,a:active {background-color: orangered;color: white;}
            nav {display: flex;border-bottom: 1px solid gray;}
        </style>
    </head>
    <body>
        <nav>
            <a href="">首页</a>
            <a href="">教学视频</a>
            <a href="">社区问答</a>
            <a href="">软件下载</a>
            <a href="">联系我们</a>
        </nav>
    </body>
</html>

弹性元素的主轴上的排列方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向</title>
    <style type="text/css">
        .container {border: 2px dashed red;margin: 15px;background: #cdc;}
        .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
        .flex {display: flex;}
        .row {flex-direction: row;}
        .row-reverse {flex-direction: row-reverse;}
        .column {flex-direction: column;}
        .column-reverse {flex-direction: column-reverse;}
    </style>
</head>
<body>
<h3>1. row: 默认从左向右,水平排列</h3>
<div class="container flex row">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>2. row: 从右向左,水平排列</h3>
<div class="container flex row-reverse">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>3. column: 从下向下,垂直排列</h3>
<div class="container flex column">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>>
</div>
<h3>4. column-reverse: 从下向上,垂直排列</h3>
<div class="container flex column-reverse">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>

创建网站首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建网站首页</title>
    <style type="text/css">
        a {padding: 5px 10px;margin: 0 5px;border-radius: 5px 5px 0 0;text-decoration-line: none;background-color: lightgreen;box-shadow: 2px 0 1px #888;color: black;}
        a:hover,a:focus,a:active {background-color: orangered;color: white;}
        nav {display: flex;border-bottom: 1px solid gray;}
        * {margin: 10px;padding: 10px;}
        /*将页面中主要布局元素全部转为弹性容器*/
        body, nav, main, article {display: flex;}
        /*设置全局, 内容区主轴垂直, 元素沿主轴排列*/
        body, article {flex-direction: column;}
        /*页脚添加上边框*/
        footer {border-top: 1px solid #ccc;}
        /*导航删除下内边距*/
        nav {padding-bottom: 0;}
    </style>
</head>
<body>
<header>
    <h1>某人的博客</h1>
</header>
<nav>
    <a href="">首页</a>
    <a href="">教学视频</a>
    <a href="">社区问答</a>
    <a href="">软件下载</a>
    <a href="">联系我们</a>
</nav>
<main>
    <article>
        <img src="images/2.jpg" alt="">
        <p>JavaScript 是一门弱类型的动态脚本语言，支持多种编程范式，包括面向对象和函数式编程，被广泛用于 Web 开发。</p>
        <button>立即学习</button>
    </article>
    <article>
        <img src="images/1.jpg" alt="">
        <p>Vue是一套用于构建用户界面的渐进式框架, 被设计为可以自底向上逐层应用。</p>
        <button>立即学习</button>
    </article>
    <article>
        <img src="images/3.jpg" alt="">
        <p>Laravel是一套简洁,优雅的PHP Web开发框架, 它可以帮你构建一个完美的网络APP</p>
        <button>立即学习</button>
    </article>
</main>
<footer>
    <p>Copyright © 2018 -2021 php中文网</p>
</footer>
</body>
</html>

弹性元素溢出与创建多行容器弹性元素溢出与创建多行容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素溢出与创建多行容器</title>
    <style type="text/css">
        .container {border: 2px dashed red;margin: 15px;background: #cdc;}
        .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
        .flex {display: flex;}
        .container {width: 500px;} 
        .nowrap {flex-direction: row;flex-wrap: nowrap;}
        .wrap {flex-direction: row;flex-wrap: wrap;}
        .wrap-reverse {flex-direction: row;flex-wrap: wrap-reverse;}
    </style>
</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>
<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>
<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>

弹性元素流体布局(简称:弹性流)的简化弹性元素流体布局(简称:弹性流)的简化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素流体布局(简称:弹性流)的简化</title>
    <style type="text/css">
        .container {border: 2px dashed red;margin: 15px;background: #cdc;}
        .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
        .flex {display: flex;}
        /*默认*/
        .container {width: 500px;}
        /*不换行*/
        .nowrap {flex-flow: row nowrap;}
         /*换行*/
        .wrap {flex-flow: row wrap;}
         .wrap-reverse {flex-flow: row wrap-reverse;}
    </style>
</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>
<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>
<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>

弹性元素在主轴上如何分布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素在主轴上如何分布</title>
    <style type="text/css">
        .container {border: 2px dashed red;margin: 15px;background: #cdc;}
        .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
        .flex {display: flex;}
        .container {width: 550px;}
        /*允许换行*/
        .wrap {flex-wrap: wrap;}
        .flex-start {justify-content: flex-start;}
        .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;}
    </style>
</head>
<body>
<h1>弹性元素在主轴上如何分布:</h1>
<h3>1. flex-start: 主轴起点开始水平排列</h3>
<p>单行</p>
<div class="container flex flex-start">
    <span class="item">弹性元素 1</span>
    <span class="item">弹性元素 2</span>
    <span class="item">弹性元素 3</span>
</div>
<p>多行</p>
<div class="container flex flex-start wrap">
    <span class="item">弹性元素 1</span>
    <span class="item">弹性元素 2</span>
    <span class="item">弹性元素 3</span>
    <span class="item">弹性元素 4</span>
    <span class="item">弹性元素 5</span>
    <span class="item">弹性元素 6</span>
</div>
<hr style="height: 3px; background:green;">
<h3>2. flex-end: 主轴终点开始水平排列</h3>
<p>单行</p>
<div class="container flex flex-end">
    <span class="item">弹性元素 1</span>
    <span class="item">弹性元素 2</span>
    <span class="item">弹性元素 3</span>
</div>
<p>多行</p>
<div class="container flex flex-end wrap">
    <span class="item">弹性元素 1</span>
    <span class="item">弹性元素 2</span>
    <span class="item">弹性元素 3</span>
    <span class="item">弹性元素 4</span>
    <span class="item">弹性元素 5</span>
    <span class="item">弹性元素 6</span>
</div>
<hr style="height: 3px; background:green;">
<h3>3. center: 将所有弹性元素视为整体,居中显示</h3>
<p>单行</p>
<div class="container flex center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行</p>
<div class="container flex center 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>
</div>
<hr style="height: 3px; background:green;">
<h3>4. space-between: 首尾元素紧贴起止点,其它元素平分剩余空间</h3>
<p>单行</p>
<div class="container flex space-between">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行</p>
<div class="container flex space-between 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>
</div>
<hr style="height: 3px; background:green;">
<h3>5. space-around: 每个元素二边空间相等,相邻元素空间累加</h3>
<p>单行</p>
<div class="container flex space-around">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行</p>
<div class="container flex space-around 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>
</div>
<hr style="height: 3px; background:green;">
<h3>6. space-evenly: 每个元素, 以及元素到与起止点的空间全部相等</h3>
<p>单行</p>
<div class="container flex space-evenly">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行</p>
<div class="container flex space-evenly 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>
</div>
</body>
</html>

弹性元素在垂直方向(交叉轴)上的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素在垂直方向(交叉轴)上的对齐方式</title>
    <style type="text/css">
        .container {border: 2px dashed red;margin: 15px;background: #cdc;}
        .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
        .flex {display: flex;}
        .container {width: 550px;height: 300px;}
        /*允许换行*/
        .wrap {flex-wrap: wrap;}
        /************ 单行容器 ************/
        .stretch {align-items: stretch;}
        .flex-start {align-items: flex-start;}
        .flex-end {align-items: flex-end;}
        .center {align-items: center;}
        /************ 多行容器 ************/
        .wrap-stretch {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;}
        .all-align {justify-content: space-around;align-content: space-around;}
    </style>
</head>
<body>
<h1>弹性元素在垂直轴上分布方式:</h1>
<h3>1. stretch: 默认值, 元素高度自动拉伸充满整个容器</h3>
<p>单行容器:</p>
<div class="container flex stretch">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行容器:</p>
<div class="container flex 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>
</div>
<hr style="height: 3px; background:green;">
<h3>2. flex-start: 元素紧贴容器起点</h3>
<p>单行容器:</p>
<div class="container flex flex-start">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行容器:</p>
<div class="container flex 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>
</div>
<hr style="height: 3px; background:green;">
<h3>3. flex-end: 元素紧贴容器终点</h3>
<p>单行容器:</p>
<div class="container flex flex-end">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行容器:</p>
<div class="container flex 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>
</div>
<hr style="height: 3px; background:green;">
<h3>4. center: 元素中点与垂直轴中点对齐, 居中显示</h3>
<p>单行容器:</p>
<div class="container flex center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行容器:</p>
<div class="container flex 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>
</div>
<hr style="height: 3px; background:green;">
<h3>5. 垂直方向首尾行紧贴起止点,其它行平分剩余空间</h3>
<div class="container flex 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>
</div>
<hr style="height: 3px; background:green;">
<h3>6. 每个元素二边空间相等,相邻元素空间累加</h3>
<div class="container flex 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>
</div>
<hr style="height: 3px; background:green;">
<h3>7. 每个元素, 以及元素到与起止点的空间全部相等</h3>
<div class="container flex 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>
</div>
<hr style="height: 3px; background:green;">
<h3>8. 结合主轴, 实现空间全部平均分配</h3>
<div class="container flex wrap wrap-space-evenly all-align">
    <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>
</div>
</body>
</html>

Correction status：qualified

Teacher's comments：我们的flex课程, 应该是你看到了最详细的相关课程了, 几乎将每一个属性值全讲到了, 希望你们能掌握并运用到工作中

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

第二课 HTML的常用标签学习记录

2019-10-30 15:03:07