CSS（十）-- 弹性盒子

2024-03-05 12:48:18

1.弹性盒简介
2.弹性盒子上的样式
3.弹性元素上的样式

1.弹性盒简介

flex（弹性盒，伸缩盒），是css的又一种布局手段
主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

1.1弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器

通过display来设置弹性容器

display：flex 设置为块级弹性容器
display：inline-flex 设置为行内的弹性容器

flex-direction 指定容器中弹性元素的排列方式

可选值：
- colum：纵向排列（上向下）
- colum-reverse：反方向纵向排列（下向上）
- row（默认值）：横向排列（左向右）
- row-reverse：弹性容器在容器中反向水平排列（右向左）
主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向的称为侧轴

ul{
      width：500px;
      border:10px red solid;
      display:flex;
      flex-direction:row;
}

1.2弹性元素

弹性容器的子元素（直接子元素）是弹性元素（弹性项）
一个元素可以同时是弹性容器和弹性元素

弹性元素的属性：

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

注意这里边的比例是对剩余的空白部分分配的比例，不包括元素本身

当父元素有多余空间时，子元素如何伸展
flex-grow：1;伸展
flex-grow：0（默认值）0；不伸展
有多个子元素设置时，按比例伸展
只能放在子元素中
放在子元素中可以设置伸展的比例

依次按1:2:3比例分配
li:nth-child(1){
      flex-grow:1;
}
li:nth-child(2){
      background-color:pink;
      flex-grow:2;
}
li:nth-child(3){
      background-color:orange;
      flex-grow;
}

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

当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
用法和flex-grew相同

1.3 弹性盒子应用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        ul{
            width: 1210px;
            height: 48px;
            display: flex;
            flex-direction: row;
     
            background-color: #e8e7e3;
            margin: 0 auto;
        }
        li{
            flex-grow: 1;
            text-align: center;
        }
        ul a{
            display: block;
            text-decoration: none;
            color: #808080;
            line-height: 48px;
            font-size:16px
           
        }
        li a:hover{
            color:#e8e7e3;
            background-color:#808080;
        }


        
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>
</body>
</html>