测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 600px;
            border: 10px solid red;
            display: flex;
            justify-content: space-evenly;
        }
        li{
            width: 100px;
            height: 50px;
            background-color: khaki;
            text-align: center;
            line-height: 50px;
            font-size: 40px;
            flex-shrink: 0;
        }
        .box2{
            background-color: lightgreen;
        }
        .box3{
            background-color: lightsalmon;
        }
        .box4{
background-color:mediumpurple;
}
    </style>
</head>
<body>
    <ul>
        <li class="box1">1</li>
        <li class="box2">2</li>
        <li class="box3">3</li>
        <li class="box4">4</li>
    </ul>
</body>
</html>

align-items元素在辅轴上如何对齐

stretch 默认值，将元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐

 align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: center;

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 300px;
            height: 500px;
            border: 10px solid red;
            display: flex;
            flex-flow: wrap row;
            /* justify-content: space-evenly; */
            align-items: center;
        }
        li{
            width: 100px;
            /* height: 50px; */
            /* background-color: khaki; */
            text-align: center;
            line-height: 50px;
            font-size: 40px;
            flex-shrink: 0;
        }
        .box1{
            background-color:tomato;
        }
        .box2{
            background-color: lightgreen;
        }
        .box3{
            background-color: lightsalmon;
        }
        .box4{
        background-color:mediumpurple;
        }
        .box5{
            background-color:teal;
        }
    </style>
</head>
<body>
    <ul>
        <li class="box1">1</li>
        <li class="box2">2
            <div>2</div>
        </li>
        <li class="box3">3
            <div>3</div>
            <div>3</div>
        </li>
        <li class="box4">4
            <div>4</div>
            <div>4</div>
            <div>4</div>
        </li>
        <li class="box5">5</li>
    </ul>
</body>
</html>

align-content:辅轴空白空间的分布

类似 justify-content

flex-start 元素沿着辅轴起边排列

flex-end 元素沿着辅轴终边排列

center 元素居中排列

space-around 空白分布到元素两侧

space-between 空白均匀分布到元素间

space-evenly 空白分布到元素的单侧(兼容性不好，不推荐使用)

align-content: flex-start;

 align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

垂直水平居中

align-items: center;
justify-content: center;

弹性元素

flex-grow 指定弹性元素的伸展的系数

当父元素有多余空间的时，子元素如何伸展
父元素的剩余空间，会按照比例进行分配，数值越高，权重越高。0表示不伸展

flex-grow: 1;

flex-shrink 指定弹性元素的收缩系数

当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩，数值越高，权重越高，0表示不收缩

flex-shrink: 1;

flex-basis 指定的是元素在主轴上的基础长度

如果主轴是横向的则该值指定的就是元素的宽度

如果主轴是纵向的则该值指定的是就是元素的高度

默认值是 auto，表示参考元素自身的高度或宽度

如果传递了一个具体的数值，则以该值为准

flex-basis: 20px;

简写属性flex

flex 可以设置弹性元素所有的三个样式

flex 增长缩减基础;

 flex: 1 1 auto;

order设置弹性元素的排序顺序

如果只设置一个元素的 order设置的元素排到最后

.box1{
            background-color:tomato;
            order: 4;
        }
        .box2{
            background-color: lightgreen;
            order: 3;
        }
        .box3{
            background-color: lightsalmon;
            order: 2;
        }
        .box4{
        background-color:mediumpurple;
        order: 1;
        }

align-self 用来覆盖当前弹性元素上的align-items

align-self: stretch;

练习

仿淘宝分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/reset.css">
    <style>
        body{
            background-color: rgb(244, 244, 244);
        }
        .box1{
            background-color: white;
            width: 100%;
        }
        ul{
            display: flex;
            justify-content: space-around;
        }
        li{
            width: 15%;
            /* background-color: turquoise; */
        }
        li img{
            width: 100%;
        }
        li a{
            text-align: center;
            display: inline-block;
            text-decoration: none;
        }
        li a span{
            display: block;
            margin-top: 10px;
            color: rgb(102, 102, 102);;
            font-size: 11px;
        }
    </style>
</head>
<body>
    <div class="box1">
    <ul>
        <li>
            <a href="#">
                <img src="../static/img/tb/1.png" alt="">
                <span>天猫新品</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../static/img/tb/2.png" alt="">
                <span>今日爆款</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../static/img/tb/3.png" alt="">
                <span>天猫国际</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../static/img/tb/4.png" alt="">
                <span>饿了吗</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../static/img/tb/5.png" alt="">
                <span>天猫超市</span>
            </a>
        </li>
    </ul>
    <ul>
        <li>
            <a href="#">
                <img src="../static/img/tb/6.png" alt="">
                <span>充值中心</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../static/img/tb/7.png" alt="">
                <span>机票酒店</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../static/img/tb/8.png" alt="">
                <span>金币庄园</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../static/img/tb/9.png" alt="">
                <span>阿里拍卖</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../static/img/tb/10.png" alt="">
                <span>淘宝吃货</span>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

定位

定位（position）

定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值：

static 默认值，元素是静止的没有开启定位

relative 开启元素的相对定位

absolute 开启元素的绝对定位

fixed 开启元素的固定定位

sticky 开启元素的粘滞定位

相对定位

相对定位：

当元素的position属性值设置为relative时则开启了元素的相对定位

相对定位的特点：

1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化

2.相对定位是参照于元素在文档流中的位置进行定位的

3.相对定位会提升元素的层级

4.相对定位不会使元素脱离文档流

5.相对定位不会改变元素的性质块还是块，行内还是行内

偏移量（offset）

当元素开启了定位以后，可以通过偏移量来设置元素的位置

top

定位元素和定位位置上边的距离

bottom

定位元素和定位位置下边的距离

定位元素垂直方向的位置由top和bottom两个属性来控制

通常情况下我们只会使用其中一

top值越大，定位元素越向下移动

bottom值越大，定位元素越向上移动

left

定位元素和定位位置的左侧距离

right

定位元素和定位位置的右侧距离

定位元素水平方向的位置由left和right两个属性控制

通常情况下只会使用一个

left越大元素越靠右

right越大元素越靠左

 .box1{
            height: 200px;
            width: 200px;
            background-color: springgreen;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color:steelblue;
            position: relative;
            left: 200px;
            top: -200px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color:tan;
        }
 <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

绝对定位

当元素的position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位的特点：

1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

2.开启绝对定位后，元素会从文档流中脱离

3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

4.绝对定位会使元素提升一个层级

5.绝对定位元素是相对于其包含块进行定位的

          包含块( containing block )
              - 正常情况下：
                  包含块就是离当前元素最近的祖先**块元素**
      绝对定位的包含块:
        包含块就是**离它最近**的**开启了定位**的**祖先元素**，
                                      **如果所有的祖先元素都没有开启定位则根元素就是它的包含块**

html（根元素、初始包含块）

<div class="box1">1</div>
    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>
    </div>
    <div class="box3">3</div>
body{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            /* left: 0;
            top: 0; */
            bottom: 0;
            right: 0;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color: tomato;
            position: relative;
        }
        .box5{
            width: 300px;
            height: 300px;
            background-color: aliceblue;
            /* position: relative; */
        }

重学JavaWeb第二天（三）

align-items元素在辅轴上如何对齐

align-content:辅轴空白空间的分布

垂直水平居中

弹性元素

flex-grow 指定弹性元素的伸展的系数

flex-shrink 指定弹性元素的收缩系数

简写属性flex

order设置弹性元素的排序顺序

align-self 用来覆盖当前弹性元素上的align-items

练习

定位

相对定位

绝对定位

热门文章

最新文章

相关课程

相关电子书

相关实验场景

重学JavaWeb第二天（三）

align-items元素在 辅轴上如何对齐

align-content:辅轴空白空间的分布

垂直水平居中

弹性元素

flex-grow 指定弹性元素的伸展的系数

flex-shrink 指定弹性元素的收缩系数

简写属性flex

order设置弹性元素的排序顺序

align-self 用来覆盖当前弹性元素上的align-items

练习

定位

相对定位

绝对定位

热门文章

最新文章

相关课程

相关电子书

相关实验场景

align-items元素在辅轴上如何对齐