3. （css3布局）移动web开发——flex布局

最新推荐文章于 2024-05-03 19:19:43 发布
最新推荐文章于 2024-05-03 19:19:43 发布
阅读量270 收藏 2
点赞数 1
分类专栏： # CSS 0基础快速入门 CSS学习手册 文章标签： css3 html flex flex布局原理 对比 属性 弹性布局 主轴与侧轴 排列方式 子项属性 父项属性 常见属性 快速入门 上手 掌握 攻略
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/112524610
版权

文章目录

1. 重点提炼

  • flex布局体验

  • flex 布局原理

  • flex 布局父项常见属性

  • flex 布局子项常见属性


2. 传统布局和flex布局对比

2.1 传统布局

  • 兼容性好
  • 布局繁琐
  • 局限性，不能在移动端很好的布局

2.2 flex布局（弹性布局）

  • 操作方便，布局极其简单，移动端使用比较广泛
  • pc端浏览器支持情况比较差
  • IE11或更低版本不支持flex或仅支持部分

2.3 建议

  • 如果是pc端页面布局，还是采用传统方式
  • 如果是移动端或者是不考虑兼容的pc则采用flex

3. flex布局初体验

image-20200818224905075

以前做的时候需要给蓝盒子加浮动，且清除浮动，否则橙色的布局会受到影响。

而用flex布局就不一样了 => 就不分行内元素和块级元素了。


3.1 搭建HTML结构

<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>

3.2 example01

<!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">
    <title>Document</title>
    <style>
        div {
            width: 80%;
            height: 300px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

image-20200818231100890


父级添加 => display: flex; =>

使span有宽度高度大小，并且在一行显示

image-20200818231415346


还可以做很多事，如第一个span左边，第二个span居中，第三个span右边

父级添加 => justify-content: space-around;

image-20200818231711797

并且屏幕缩小可以自适应 =>

并且拥有更强大的功能，可以垂直居中，并在左右两侧分布。

=> 平级分成三等分 => span样式中扔掉宽度，添加 flex: 1;

<!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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }
        
        div span {
             /*width: 150px;*/
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            flex: 1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

这就平均分成了三等分，并且自适应 => 可以随意缩放转换位置 ，flex布局特别适应移动端的布局。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.28
Branch： branch04
commit description：a2.28（example01——flex布局体验）

tag：a2.28


4. flex布局原理

  • flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
  • 当我们为父盒子设为 flex 布局以后，子元素的float、clear（不需要浮动，浮动并不是很好的布局）和 vertical-align （它可以垂直居中）属性将失效。
  • flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 （叫法很多）
  • 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

4.1 demo

采用Flex布局的元素，称为Flex容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称项目

如下：

  • div就是 flex父容器
  • span 就是 子容器 flex项目
  • 子容器可以横向排列也可以纵向排列

image-20200819221601233


4.2 flex布局原理总结

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式


5. 父项常见属性

以下由6个属性是对父元素设置的

  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了flex-direction 和 flex-wrap

5.1 flex-direction设置主轴的方向 ⭐️

5.2 主轴与侧轴

  • 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
    • 默认主轴方向就是 x 轴方向，水平向右
    • 默认侧轴方向就是 y轴方向，水平向下

在这里插入图片描述


5.3 属性值

flex-direction 属性决定主轴的方向（即项目的排列方向）

  • 注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上

元素是跟着主轴进行排列的。


5.3.1 example02

5.3.1.1 example02-1
<!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">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

image-20200819230722132

给父级添加flex属性

display: flex;

flex-direction 默认是主轴排列的 => 默认的主轴是 x 轴 行 row ， 那么y轴就是侧轴

=> 我们的元素是跟着主轴来排列的

=> 三个孩子沿着x轴（主轴）进行排列，

image-20200819230850263

flex-direction: row;

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.29
Branch： branch04
commit description：a2.29（example02-1——flex-direction默认是主轴排列的）

tag：a2.29


5.3.1.2 example02-2

翻转（不重要，简单了解）

flex-direction: row-reverse;

image-20200819233050984

我们可以把我们的主轴设置为 y轴，那么 x 轴就成了侧轴

flex-direction: column;

image-20200819233256181

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.30
Branch： branch04
commit description：a2.30（example02-2——flex-direction其他排列）

tag：a2.30


5.4 justify-content 设置主轴上的子元素排列方式 ⭐️

justify-content 属性定义了项目在主轴上的对齐方式

注意： 使用这个属性之前一定要确定好主轴是哪个

属性值说明
flex-start默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐（如果主轴是x轴则 水平居中）
space-around平分剩余空间
space-between先两边贴边 再平分剩余空间（重要）

5.4.1 example03

5.4.1.1 example03-1
<!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">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

image-20200820234007217

给父级加flex

display: flex;

默认的主轴是 x 轴 row => 相当于 => flex-direction: row;

justify-content: 是设置主轴上子元素的排列方式

默认值 => justify-content: flex-start; => 从左到右

image-20200820234326985

靠右边对齐，即从尾部对齐，但是子元素的顺序保持不变，而不是flex-direction: row-reverse;进行翻转。

justify-content: flex-end;

image-20200820234443346

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.31
Branch： branch04
commit description：a2.31（example03-1——设置主轴上的子元素排列）

tag：a2.31


5.4.1.2 example03-2

让子元素居中对齐 （传统模式很麻烦，得给子元素们加一个父盒子，然后设置margin ：0 auto）

justify-content: center;

image-20200821000113822

平分剩余空间 => 先对齐后，剩余空间平均分配，即平均分配给每一个盒子。

image-20201222175133853

justify-content: space-around;

image-20200821000312438

实际就是给每一个元素分配margin-left和margin-right

image-20201222175307217

先两边贴边， 再分配剩余的空间

justify-content: space-between;

image-20200821000451967

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.32
Branch： branch04
commit description：a2.32（example03-2——设置主轴上的子元素排列2）

tag：a2.32


5.4.1.3 example03-3

如果主轴设置为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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 现在的主轴是y轴 */
            flex-direction: column;
            justify-content: center;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

这样就竖行显示并垂直居中了。

image-20200821233943429

justify-content: space-between;

先两边贴边， 在分配剩余的空间

image-20200821234116594

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.33
Branch： branch04
commit description：a2.33（example03-3——设置主轴上的子元素排列3）

tag：a2.33


5.5 flex-wrap设置是否换行 ⭐️

  • 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
    • nowrap 不换行
    • wrap 换行

以前浮动的时候，如果第一行摆不开，就会跑到第二行

image-20200822234104540


5.5.1 example04

<!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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

flex布局会使子盒子宽度缩小（为了一字排开）

image-20200822234507227

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>

image-20200822235031032

flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面

flex-wrap: nowrap;  /*默认*/

flex-wrap: wrap;

div {
    display: flex;
    width: 600px;
    height: 400px;
    background-color: pink;
    flex-wrap: wrap;
}

image-20200822235224356

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.34
Branch： branch04
commit description：a2.34（example04——flex布局换行）

tag：a2.34


5.6 align-items 设置侧轴上的子元素排列方式（单行 ） ⭐️

  • 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
    • flex-start 从头部开始
    • flex-end 从尾部开始
    • center 居中显示
    • stretch 拉伸

5.6.1 example05

实现垂直排列

image-20200823234449078

现在想实现既水平居中，又垂直居中

image-20200823234641383

主轴居中，侧轴居中

<!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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

image-20200823234841997

默认的主轴是 x 轴 row，我们需要一个侧轴居中，

div {
    display: flex;
    width: 800px;
    height: 400px;
    background-color: pink;
    justify-content: center;
    align-items: center;
}

image-20200823235219051

align-items: flex-start;

image-20200823235340459

align-items: stretch;

没有变化

image-20200823235340459

拉伸，但是子盒子不要给高度

div {
    display: flex;
    width: 800px;
    height: 400px;
    background-color: pink;
    justify-content: center;
    align-items: stretch;
}

div span {
    width: 150px;
    background-color: purple;
    color: #fff;
    margin: 10px;
}

沿着y轴拉伸。

image-20200823235623410

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.35
Branch： branch04
commit description：a2.35（example05——align-items 设置侧轴上的子元素排列方式）

tag：a2.35


如果是主轴方向是竖直方向

div {
    display: flex;
    width: 800px;
    height: 400px;
    background-color: pink;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div span {
    width: 150px;
    height: 100px;
    background-color: purple;
    color: #fff;
    margin: 10px;
}

image-20200824000221981

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.36
Branch： branch04
commit description：a2.36（example05-2——align-items 设置侧轴上的子元素排列方式2）

tag：a2.36


5.7 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），注意在单行下是没有效果的。

属性值说明
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度

5.7.1 example06

实现多行排列

image-20200824003423656

<!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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>

image-20200824003828511

因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content

        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
            align-content: flex-start;
        }

顶到头部了。

image-20200824004122126

align-content: center;

盒子均整体居中对齐了。

image-20200824004230175

想实现盒子贴顶部和底部

align-content: space-between;

image-20200824004935542

上下同等距离

如：

image-20200824005322025

align-content: space-around;

image-20200824005007182

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.37
Branch： branch04
commit description：a2.37（example06——flex设置侧轴对齐方式（多行））

tag：a2.37


5.8 align-content 和align-items区别

  • align-items适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸（属性比较少）
  • align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结就是单行找align-items 多行找 align-content

image-20200819224257926


5.9 flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow:row wrap;

5.9.1 example07

<!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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

image-20200824232158878

设置主轴方向竖直方向，且换行。

div {
    display: flex;
    width: 600px;
    height: 300px;
    background-color: pink;
    flex-direction: column;
    flex-wrap: wrap;
}

image-20200824232305749

把设置主轴方向和是否换行（换列）简写

div {
    display: flex;
    width: 600px;
    height: 300px;
    background-color: pink;
    flex-flow: column wrap;
}

image-20200824232305749

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.38
Branch： branch04
commit description：a2.38（example07——把设置主轴方向和是否换行（换列）简写）

tag：a2.38


6. flex布局子项常见属性

  • flex子项目占的份数
  • align-self控制子项自己在侧轴的排列方式
  • order属性定义子项的排列顺序（前后顺序）

6.1 flex 属性 ⭐️

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item {
    flex: <number>; /* 默认值 0 */
}

6.1.1 example08

6.1.1.1 example08-1
<!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">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

image-20200825235439380

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.39
Branch： branch04
commit description：a2.39（example08-1——flex子项flex份数模板）

tag：a2.39

6.1.1.2 example08-2

之前用百分比实现，左右两侧对齐，中间自适应。用百分比实现非常麻烦，尝试用flex布局。

image-20200826232805796

<!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">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            /*占据整个剩余空间即可，无需设置宽高*/
            flex: 1;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

此布局也常被称为圣杯布局。

image-20200826233414509

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.40
Branch： branch04
commit description：a2.40（example08-2——flex子项flex份数模板 => 实现，左右两侧对齐，中间自适应）

tag：a2.40


6.1.1.3 example08-3

经常应用到如下布局。

image-20200827230626437

这种百分比比较难做了。

image-20200827230707091

<!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">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            /*占据整个剩余空间即可，无需设置宽高*/
            flex: 1;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }

        p span {
            /*每个p各占一份*/
            flex: 1;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

image-20200827230951502

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.41
Branch： branch04
commit description：a2.41（example08-3——flex子项flex份数模板 => p标签平均每人三份）

tag：a2.41


6.1.1.4 example08-4
<!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">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            /*占据整个剩余空间即可，无需设置宽高*/
            flex: 1;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }

        p span {
            /*每个p各占一份*/
            flex: 1;
        }

        p span:nth-child(2) {
            /* 2号盒子占两份，其余第1个和第3个盒子占一份*/
            flex: 2;
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

image-20200828234837822

并且会随着可视区进行伸缩（弹性布局），非常适合移动端

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.42
Branch： branch04
commit description：a2.42（example08-4——flex子项flex份数模板 => p标签划分份数）

tag：a2.42


6.2 align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}

6.2.1 example09

6.2.1.1 example09-1
<!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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

image-20200829233350121

让三个子盒子沿着侧轴底侧对齐

div {
    display: flex;
    width: 80%;
    height: 300px;
    background-color: pink;
    align-items: flex-end;
}

image-20200829233527863

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.43
Branch： branch04
commit description：a2.43（example09-1——让三个子盒子沿着侧轴底侧对齐 ）

tag：a2.43


6.2.1.2 example09-2

实现只让3号盒子下来底侧

<!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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

image-20200829234100398

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.44
Branch： branch04
commit description：a2.44（example09-2——实现只让3号盒子下来底侧 ）

tag：a2.44


6.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

注意：和z-index 不一样。

.item {
    order: <number>;
}

6.3.1 example10

将2号盒子移动到1号盒子前面（在不改变html前提下，通过css来控制盒子的顺序）

<!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">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面 */
            order: -1;
        }

        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

image-20200829234829258

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.45
Branch： branch04
commit description：a2.45（example10——将2号盒子移动到1号盒子前面）

tag：a2.45




（后续待补充）
溜_x_i_a_o_迪
关注
专栏目录
移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局
m0_53619602的博客
06-09 1296
前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。 单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。...
移动web开发—— 响应式布局Bootstrap
weixin_52819925的博客
08-03 742
Bootstrap Bootstrap简介 Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 中文网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐网站：http://bootstrap.css88.com/ Bootstrap：是用于开发响应式布局，移动设备优先的web项目。 框架：顾名思义就是一套架构，
flex,怎么学习flex,Flex_3_Cookbook_中文版
08-13
学习了一段时间的flex... 上传点资源，大家分享。 flex,怎么学习flex,Flex_3_Cookbook_中文版
flex 布局平均分布又能换行，子元素之间还要有空隙
热门推荐
visionke的博客
05-27 1万+
用flex-wrap: wrap;来换行，用justify-content:space-between;来平分， 在父元素末尾加上after伪元素，让其自动添补最后一个位置，高度设为0 便不影响后面的元素 举例我们需要3个元素为一行，并且平分布局 当元素不满足3个的的时候 刚好有九元素的时候 ...
父元素宽度一定，子元素完美均分父级宽度
智韬的博客
12-13 4615
我们都是爱美的生物，大多数要求对一个东西进行分割时，我们都会尽可能的均分它。在页面中，一个div盒子有的固定像素宽度，有的为百分比。如何能很好的均分一个div呢？ 以下将提供五个均分父元素的方法,其中 方法四flex布局为常用 先提供原始代码及其展示： 为了展示有所区别，便于观察，添加了padding，不同的子元素添加不同的border颜色 html: <div class = "far...
Flex子元素均分父元素宽度布局
乐夫天命兮的博客
04-26 7631
效果图如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .child{ width: 80px; height:80px; backgro...
flex布局(弹性盒子三)
m0_72959685的博客
08-25 2391
在之前的文章里说到了弹性盒子的部分属性，接下来接着说弹性盒子的其余属性。
CSS Flex布局详解及其重要属性应用
最新发布
10-09
内容概要：本文深入讲解了CSS Flex布局的基本理念以及其对于现代Web开发尤其是移动互联网的重要性。详述了flex布局下父级flex container及子元素flex item的相关属性，具体介绍了flex-direction、flex-wrap等关键...
移动web开发—— 流式布局
weixin_52819925的博客
08-02 298
视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。 布局视口 layout viewport 视觉视口 visual viewport 理想视口 ideal viewport 将布局视口的宽度修改为视觉视口，就是理想视口。 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都
Web-前端html+css从入门到精通 170. 布局扩展之等高布局.zip
05-23
布局扩展之等高布局.mp4”这个视频教程中，你将学习如何使用这些方法，特别是在实际项目中如何选择合适的布局方式。通过实例演示和详细的解释，你将掌握等高布局的原理和应用，提升你的前端开发技能。 在学习等高...
flex布局
qq_46492364的博客
04-07 3223
文章目录前言一、flex布局体验二、flex布局原理三、flex布局父项常见属性1.flex-direction设置主轴的方向2.justify-content主轴上子元素排列方式3.四、flex布局子项常见属性1.2.读入数据五、1.引入库2.读入数据总结 前言 这部分学习flex布局，还是通过写一个移动端网页进行练习，这里就只记录理论知识啦。 提示：以下是本篇文章正文内容，下面案例可供参考 一、flex布局体验 传统布局： （1）兼容性好 （2）布局繁琐 （3）局限性，不能在移动端很好的布局 fl.
移动web布局----flex布局详解
2401_84433535的博客
05-03 2132
子盒子从左向右排列记得添加 flex-direction:row;
css中的display flex
weixin_43755104的博客
08-22 546
文章目录第一次遇到是：`flex: 1`flex-grow应用场景flex-shrink应用场景flex-basis 这篇文章不是说display flex布局的是说flex布局下的子内容，子盒子怎么显示布局，占据父盒子空间的 第一次遇到是：flex: 1 flex: 1 就是让子盒子平分父盒子的空间 自动调整子盒子的宽度以占满父盒子的空间 flex语法 flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; 默认值： 0 1 auto
用户体验思考与flex三坑：元素不均分、溢出不省略和垂直不滚动
flying meng的菜鸟居
05-15 9979
flex已经越来越成为前端不可避免的话题。曾经为了搞清flex的原理偶然画了一张图。但后来发现只是冰山一角。 通过我的实践，发现使用flex布局时稍不注意便会遇到三个问题：子元素不平分父元素空间、对文字设置了溢出省略却失效、flex下列表溢出但是滚动失效。常常会让人摸不着头脑。这里记录探究。 元素不均分 “均分列”，也就是子元素等宽应该是项目中最常见的效果。我常常在项目中见到这样的代码： flex: 1; 似乎有很多人认为在 Flex 布局中这样显式设置即可“一劳永逸”。 但事实是什么？事实是我们都知道
解决弹性布局父元素设置高自动换行，子元素均分高度问题（align-content: flex-start）
空&白的博客
02-21 925
align-content: flex-start
flex 布局 几个子div平分父div的高度
weixin_44903362的博客
10-07 1143
1. 父div .fu { display:flex; flex-direction:column; } 2.子div .zi1 { flex: 0 0 auto; } . zi2 { flex-grow: 1 ; }
弹性布局自动换行内容平分父盒子剩余高度问题
qq_32973061的博客
11-19 1243
弹性布局设置子盒子自动换行展示，并且子盒子不撑满父盒子时，不会平分父盒子剩下的高度（align-content: flex-start）。 display: flex; flex-wrap: wrap; align-content: flex-start
flex布局和百分比布局~~~~
weixin_57320268的博客
02-12 7605
1 百分比布局 百分比布局， 也叫流式布局 百分比布局特点:宽度自适应，高度固定。 2 flex布局 flex布局极大的提高了我们布局的效率，更简单、灵活。 display: flex; 一定要给亲爸爸加。 2.1 主轴对齐方式 2.2 侧轴对齐方式 2.3 伸缩比 把父盒子分为若干份数，每个子盒子各占几份。 flex:1; 一定给子盒子加 语法： flex: 1; 比如有一个父盒子里面有三个子盒子，每个子盒子写 flex...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值