CSS弹性盒子（详细版，建议收藏）

小屎壳郎

于 2024-06-14 09:42:20 发布

阅读量1.1k

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/L2636504548/article/details/137541147

版权

一、弹性盒子定义

弹性盒子是CSS3的一种新的布局模式

CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

二、CSS3弹性盒内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置display属性的值为flex将其定义为弹性容器弹性容器内包含了一个或多个弹性子元素

它主要是在一个大的容器当中里面子元素的一个设置。一个大的盒子里面里面的子元素如何排列由我们的弹性盒子控制。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

1.不使用display：flex；弹性盒子和使用display：flex；弹性盒子的对比

css

 <style>
        .container {
           /* display: flex;*/
            background-color: gray;
            width: 500px;
            height: 500px;
        }
        
        .box1 {
            background-color: red;
            width: 100px;
            height: 100px;
        }
        
        .box2 {
            background-color: blue;
            width: 100px;
            height: 100px;
        }   
        
        .box3 {
            background-color: yellow;
            width: 100px;
            height: 100px;
        }
    </style>

HTML

<body>
    <div class="container">
        <div class="box1">盒子1</div>
        <div class="box2">盒子2</div>
        <div class="box3">盒子3</div>
    </div>
</body>

这是使用display：flex；的布局

2.flex-direction 属性指定单行元素在父容器中的排列方式。

flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

HTML

<body>
    <div id="main">
        <div class="row">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        </div>
        <div class="row_reverse">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        </div>
        <div class="column">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        </div>
        <div class="column_reverse">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        </div>
    </div>
    
</body>

css

<style>
    #main {
        border: 1px solid #CCC;
        padding: 5px;
        position: relative;
    }
    .row, .row_reverse, .column, .column_reverse{
        display: flex;
        margin-bottom: 5px;
    }
    .row {
        flex-direction: row;
    }
    .row div {
        background-color: aqua;
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }
   
    .row_reverse {
        flex-direction: row-reverse;
    }
    .row_reverse div {
        background-color: burlywood;
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }
    .column {
        flex-direction: column;
    }
   .column div {
        background-color: yellow;
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }
    .column_reverse {
        flex-direction: column-reverse;
        position: absolute;
        top: 120px;
        left: 400px;
    }
    .column_reverse div {
        background-color: green;
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }
   
</style>

运行示例图

2 、flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行

flex-wrap 的值有：

1.nowrap：默认值项目不会换行，容器为单行，子项可能会溢出容器。

2.wrap：容器为多行，子项溢出的部分会被放置到新的行。

3.wrap_reverse: 项目在需要时换行，但会以相反的顺序排列

HTML

<body>
    <div id="main">
        <div class="nowrap">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
        <div class="wrap">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
        <div class="wrap_reverse">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
    </div>
    
</body>

css

<style>
   #main {
            border: 1px solid #CCC;
            padding: 5px;
        }
        .nowrap, .wrap, .wrap_reverse {
            display: flex;
            flex-direction: row;
            margin-bottom: 15px;
        }
        .nowrap {
            flex-wrap: nowrap;
        }
        .nowrap div {
            width: 70px;
            height: 50px;
            border: 1px solid black;
            background-color: aqua;
        }
        .wrap {
            flex-wrap: wrap;
        }
        .wrap div {
            width: 70px;
            height: 50px;
            border: 1px solid black;
            background-color:  burlywood;
        }
        .wrap_reverse {
            flex-wrap: wrap-reverse;
        }
        .wrap_reverse div {
            width: 70px;
            height: 50px;
            border: 1px solid black;
            background-color:  cadetblue;
        }
</style>

运行示例图

3.flex-flow：属性是 flex-direction 和 flex-wrap 两个属性的简写

flex-flow：flex-direction flex-wrap；

HTML

<body>
    <div class="flex_flow">
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
    </div>
</body>

css

<style>
 .flex_flow {
            display: flex;
            flex-flow: row-reverse wrap;
        }
        .flex_flow span {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
            background-color: rgb(165, 235, 211);  
        }
</style>

运行示例图

4.justify-content：属性用于设置弹性盒子中元素在主轴方向上的对齐方式

justify-content的值有：

1.flex-start：默认值，靠左对齐依次紧挨着平铺

2.flex-end：靠右对齐依次紧挨着平铺

3.center: 居中

4. space-between: 两端对齐每个项目之间的间隔是相等的

5.space-around: 每个项目两侧的间隔相等

HTML

<body>
        <div class="flex flex-start">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        </div>
        <div class="flex flex-end">
            <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
        <div class="flex center">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        </div>
        <div class="flex space-between">
            <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
        </div>
        <div class="flex space-around">
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
        </div>
    
</body>

css

<style>
    .flex {
        display: flex;
        flex-flow: row wrap;
        margin-top: 10px;
    }
    .flex span  {
        width: 60px;
        height: 60px;
        margin-bottom: 5px;
        border: 1px solid black;
    }
    .flex-start {
        justify-content: flex-start;
    }
    .flex-start span{
        background-color: red;
        width: 60px;
        height: 60px;
    }
    .flex-end {
        justify-content: flex-end;
    }
    .flex-end span{
        background-color: rgb(90, 90, 129);
        width: 60px;
        height: 60px;
    }
    .center {
        justify-content: center;
    }
    .center span{
        background-color: rgb(161, 83, 83);
        width: 60px;
        height: 60px;
    }
    .space-between {
        justify-content: space-between;
    }
    .space-between span{
        background-color: rgb(74, 138, 119);
        width: 60px;
        height: 60px;
    }
    .space-around  {
        justify-content: space-around;
    }
    .space-around span{
        background-color: rgb(179, 171, 68);
        width: 60px;
        height: 60px;
    }
</style>

运行示例图

5.align-items：属性用来设置弹性盒子中元素在纵轴方向上的对齐方式

align-items的值有：

1.stretch：默认值将项目拉伸与容器相合适

2.center: 位于容器的中间，

3.flex-start:位于容器的顶部，纵轴起始位置的边界紧靠住该行的侧轴起始边界

4.flex-end:位于容器的底部，纵轴起始位置的边界紧靠住该行的侧轴结束边界

5.baseline: 项目与容器的基本线对齐，

HTML

例：
<body>
    <div id="main">
        <div class="baseline"><!--更改属性名就可以了  -->
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
            <div class="box5">5</div>
        </div>  
    </div>
    
</body>

css

例：
<style>
   #main {
            border: 1px solid #CCC;
            padding: 5px;
        }
        .baseline {
            align-items: baseline;
            display: flex;
            width: 100%;
            height: 100px
    }
    .baseline  .box1 {
        display: flex;
            background-color: #f00;
            width: 100px;
            border: 1px solid #000;
        }
    .baseline  .box2 {
            background-color: #0f0;
            width: 100px;
            border: 1px solid #000; 
            font-size: 33px;
        }
    .baseline  .box3 {
            background-color: #00f;
            width: 100px;
            height: 53px;
            border: 1px solid #000; 
        }
     .baseline  .box4 {
            background-color: #ff0;
            width: 100px;
            border: 1px solid #000;
            font-size: 25px;
        }        
     .baseline  .box5 {
            background-color: #0ff;
            width: 100px;
            border: 1px solid #000;
        }

       
</style>

效果运行示例图

6.css3弹性盒子常用属性

小屎壳郎

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
CSS弹性盒子（详细版，建议收藏）

弹性盒子是CSS3的一种新的布局模式CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
复制链接

扫一扫