弹性盒⼦详解

最新推荐文章于 2024-03-21 16:40:25 发布

诗霖雪

最新推荐文章于 2024-03-21 16:40:25 发布

阅读量736

点赞数 36

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_56713342/article/details/134132908

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

⼀、Flex 布局是什么？

flex( Flexible Box 弹性盒⼦，伸缩盒)

是css中的⼜⼀种布局⼿段，它主要⽤来代替浮动来完成⻚⾯的布局，flex可以使元素具有弹性，让元素可以根据⻚⾯的⼤⼩的改变⽽改变

弹性容器

-要使⽤弹性盒，必须先将⼀个元素设置为弹性容器

-通过display来设置弹性容器

display:flex 设置块级弹性容器

display:inline-flex 设置为⾏内的弹性容器

弹性元素

-弹性容器的直接⼦元素是弹性元素（弹性项）

注意：⼀个元素可以同时是弹性容器和弹性元素

设置⽗元素flex后，⼦元素上的浮动，vertical-alin将失效

总结：通过设置⽗元素的弹性布局，调整⼦元素的对⻬⽅式和布局

 //块元素
 .box{
 display: flex;
}
 //⾏内元素
 span{
 display: inline-flex;
}

二、基本概念

容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

flex-direction

决定主轴的⽅向（即项⽬的排列⽅向）

row（默认值）：主轴为⽔平⽅向，起点在左端。
row-reverse：主轴为⽔平⽅向，起点在右端。
column：主轴为垂直⽅向，起点在上沿。
column-reverse：主轴为垂直⽅向，起点在下沿。

flex-wrap

决定如果⼀条轴线排不下，是否换⾏

nowrap（默认）：不换⾏。
wrap：换⾏，第⼀⾏在上⽅。
wrap-reverse：换⾏，第⼀⾏在下⽅。

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

<flex-direction> ||

<flex-wrap>;

justify-content

定义了项⽬在主轴上的对⻬⽅式（必须要先确定好主轴是哪个）

flex-start（默认值）：左对⻬
flex-end：右对⻬
center：居中
space-between：两端对⻬，项⽬之间的间隔都相等。
space-around：每个项⽬两侧的间隔相等。所以，项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍。
space-evenly: 项⽬是分布的，以便任何两个项⽬之间以下6个属性设置在项⽬上。的间距（和边缘的空间）相等。

align-items

定义项⽬在交叉轴（侧轴）上如何对⻬。

注意：该属性是控制⼦项在侧轴（默认是y轴）上的排列⽅式，在⼦项上为单项（单⾏）的

时候使⽤

flex-start：交叉轴的起点对⻬。
flex-end：交叉轴的终点对⻬。
center：交叉轴的中点对⻬。
baseline: 项⽬的第⼀⾏⽂字的基线对⻬。
stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度。

align-content

定义了多根轴线的对⻬⽅式（⼦项出现换⾏的情况）如果项⽬只有⼀根轴线，该属性不起作⽤。

flex-start：与交叉轴的起点对⻬。
flex-end：与交叉轴的终点对⻬。
center：与交叉轴的中点对⻬。
space-between：与交叉轴两端对⻬，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍。
stretch（默认值）：轴线占满整个交叉轴。

四、项⽬(弹性元素)的属性

order（*）

定义项⽬的排列顺序。数值越⼩，排列越靠前，默认为 0

注意：z-index的区别

 .item {
 order:
<integer>;

 }

flex-grow

定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤。

 .item {
 flexgrow:
<number>;
/*
default 0
*/

 }

flex-shrink

定义了项⽬的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩。

 .item {
 flexshrink:
<number>;
/*
default 1
*/

 }

flex-basis

定义了在分配多余空间之前，项⽬占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的

默认值为auto，即项⽬的本来⼤⼩。

 .item {
 flexbasis:
<length>
 auto;

default
auto 
 }

flex（*）

flex属性是flexgrow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

定义了⼦项⽬分配剩余空间，flex表示占多少份数

align-self（*）

允许单个项⽬有与其他项⽬不⼀样的对⻬⽅式，可覆盖 align-items属性。默认值为auto，表示继承⽗元素的 align-items属性。

.item {
 alignself:
auto |
flex-start |
flex-end
| center
|
baseline
| stretch;

3}

练习

导航条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }
        .nav{
            width: 1200px;
            height: 40px;
            line-height: 40px;
            background-color: aquamarine;
            margin: 50px auto;
            display: flex;
        }
        .nav>li{
            flex-grow:1 ;
            text-align: center;

        }
        .nav>li:hover{
            background-color: brown;
        }

    </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 class="h">
            <a href="#">reference</a>
        </li>

    </ul>
</body>

</html>

骰子练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            height: 400px;

            background-color: rgb(96, 234, 96);
            display: flex;
            justify-content: space-between;
            justify-content: space-around;
            align-items: center;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            justify-content: flex-start;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            justify-content: center;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            justify-content: flex-end;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            align-items: center;
        }
        .box5{
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box6{
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            
        }
        .item1{
           display: inline-block;
           width: 20px;
           height: 20px;
           background-color: black;
           border-radius: 50%;
      
        }

    </style>
</head>
<body>
    <div class="box">

 <div class="box1">
        <span class="item1"></span>
      </div>
      <div class="box2">
        <span class="item1"></span>
      </div>
      <div class="box3">
        <span class="item1"></span>
      </div>
      <div class="box4">
        <span class="item1"></span>
      </div>
      <div class="box5">
        <span class="item1"></span>
      </div>
      <div class="box6">
        <span class="item1"></span>
      </div>


    </div>
   
</body>
</html>

诗霖雪

关注

36
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性盒⼦详解

⼀、Flex 布局是什么？flex( Flexible Box 弹性盒⼦，伸缩盒)是css中的⼜⼀种布局⼿段，它主要⽤来代替浮动来完成⻚⾯的布局，flex可以使元素具有弹性，让元素可以根据⻚⾯的⼤⼩的改变⽽改变弹性容器-要使⽤弹性盒，必须先将⼀个元素设置为弹性容器-通过display来设置弹性容器display:flex 设置块级弹性容器display:inline-flex 设置为⾏内的弹性容器弹性元素-弹性容器的直接⼦元素是弹性元素（弹性项）
复制链接

扫一扫