css3 弹性盒子-flex-box

最新推荐文章于 2023-08-15 17:16:03 发布

大大126

最新推荐文章于 2023-08-15 17:16:03 发布

阅读量182

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_59938047/article/details/119953147

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

display定义盒子类型

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

flex-direction

flex-direction-弹性盒子中子元素的排列方式

属性值：

1.row：默认，从左到右横向排列

2.row-reverse：从右到左横向排列，最后一项排在最前面。

3.column：纵向排列。

4.column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

<!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>弹性盒子-flex-box</title>
    <style>
        #flex-container {
            width: 400px;
            height: 400px;
            background: yellowgreen;
            display: flex;
            flex-direction: column-reverse;
        }
        
        #a1 {
            width: 100px;
            height: 100px;
            background: rgb(94, 148, 148);
        }
        
        #a2 {
            width: 100px;
            height: 100px;
            background: rgb(17, 160, 105);
        }
        
        #a3 {
            width: 100px;
            height: 100px;
            background: rgb(177, 19, 150);
        }
    </style>
</head>

<body>
    <div id="flex-container">
        <div id="a1">色块一</div>
        <div id="a2">色块二</div>
        <div id="a3">色块三</div>
    </div>
</body>

</html>

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

属性值：

1.flex-start：弹性子元素向行头紧挨着摆放

2.flex-end：弹性子元素向行尾紧挨着摆放

3.center：弹性项目居中紧挨着摆放。

4.space-between：弹性项目平均分布在该行上

<!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>弹性盒子-flex-box</title>
    <style>
        #flex-container {
            width: 400px;
            height: 400px;
            background: yellowgreen;
            display: flex;
            /* flex-direction: column-reverse; */
            justify-content: space-between;
        }
        
        #a1 {
            width: 100px;
            height: 100px;
            background: rgb(94, 148, 148);
        }
        
        #a2 {
            width: 100px;
            height: 100px;
            background: rgb(17, 160, 105);
        }
        
        #a3 {
            width: 100px;
            height: 100px;
            background: rgb(177, 19, 150);
        }
    </style>
</head>

<body>
    <div id="flex-container">
        <div id="a1">色块一</div>
        <div id="a2">色块二</div>
        <div id="a3">色块三</div>
    </div>
</body>

</html>

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

1.flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

2.flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

3.center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

flex-wrap--弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

1.nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。

<!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>弹性盒子-flex-box</title>
    <style>
        #flex-container {
            width: 400px;
            height: 400px;
            background: yellowgreen;
            display: flex;
            flex-direction: row;
            /* justify-content: space-between; */
            /* align-items: center; */
            flex-wrap: nowrap;
        }
        
        #a1 {
            width: 100px;
            height: 100px;
            background: rgb(94, 148, 148);
            margin: 100px;
        }
        
        #a2 {
            width: 100px;
            height: 100px;
            background: rgb(17, 160, 105);
            margin: 100px;
        }
        
        #a3 {
            width: 100px;
            height: 100px;
            background: rgb(177, 19, 150);
            margin: 100px;
        }
    </style>
</head>

<body>
    <div id="flex-container">
        <div id="a1">色块一</div>
        <div id="a2">色块二</div>
        <div id="a3">色块三</div>
    </div>
</body>

</html>

2.wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

3.wrap-reverse -反转 wrap 排列。

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

1.stretch - 默认。各行将会伸展以占用剩余的空间。

2.flex-start - 各行向弹性盒容器的起始位置堆叠。

3.flex-end - 各行向弹性盒容器的结束位置堆叠。

4.center -各行向弹性盒容器的中间位置堆叠。

5.space-between -各行在弹性盒容器中平均分布。

6.space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小

的一半。

order:弹性子元素排序属性

整数数字：用整数值来定义排列顺序，数值小的排在前面。可以为负值

<!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>弹性盒子-flex-box</title>
    <style>
        #flex-container {
            width: 700px;
            height: 700px;
            background: yellowgreen;
            display: flex;
            /* 左到右横向排列 */
            flex-direction: row;
            /* 右到左横向排列 从后往前排，最后一项排在最前面 */
            /* flex-direction: row-reverse; */
            /* 纵向由上到下排列 */
            /* flex-direction: column; */
            /* 纵向由下到上排列 最后一项排在最上面*/
            /* flex-direction: row; */
            /* justify-content: center; */
            /* align-items: stretch; */
        }
        
        #a1 {
            width: 200px;
            height: 200px;
            background: rgb(94, 148, 148);
            order: 3;
        }
        
        #a2 {
            width: 200px;
            height: 200px;
            background: rgb(17, 160, 105);
            order: -1;
        }
        
        #a3 {
            width: 200px;
            height: 200px;
            background: rgb(177, 19, 150);
            order: 2;
        }
    </style>
</head>

<body>
    <h3> display定义盒子类型</h3>
    <h3>flex-direction-弹性盒子中子元素的排列方式</h3>
    <!-- 弹性盒子 -->
    <div id="flex-container">
        <div id="a1">色块一</div>
        <div id="a2">色块二</div>
        <div id="a3">色块三</div>
    </div>
</body>

</html>

对齐

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

<!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>弹性盒子-flex-box</title>
    <style>
        #flex-container {
            width: 400px;
            height: 400px;
            background: yellowgreen;
            display: flex;
            /* flex-direction: row; */
            /* justify-content: space-between; */
            /* align-items: center; */
            /* flex-wrap: wrap-reverse; */
            /* align-content: stretch; */
        }
        
        #a1 {
            width: 100px;
            height: 100px;
            background: rgb(94, 148, 148);
            margin: auto;
        }
        /* #a2 { 
            width: 100px;
            height: 100px;
            background: rgb(17, 160, 105);
            
        }
        
        #a3 {
            width: 100px;
            height: 100px;
            background: rgb(177, 19, 150);
        }*/
    </style>
</head>

<body>
    <div id="flex-container">
        <div id="a1"></div>
        <div id="a2"></div>
        <div id="a3"></div>
    </div>
</body>

</html>

align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。

1.auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

2.flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠ali住该行的侧轴起始边界。

3.flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

4.center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

<!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>弹性盒子-flex-box</title>
    <style>
        #flex-container {
            width: 400px;
            height: 400px;
            background: yellowgreen;
            display: flex;
            /* flex-direction: row; */
            /* justify-content: space-between; */
            align-items: center;
            /* flex-wrap: wrap-reverse; */
            /* align-content: stretch; */
        }
        
        #a1 {
            width: 100px;
            height: 100px;
            background: rgb(94, 148, 148);
            /* margin: auto; */
            align-self: flex-start;
        }
        
        #a2 {
            width: 100px;
            height: 100px;
            background: rgb(17, 160, 105);
            align-self: center;
        }
        
        #a3 {
            width: 100px;
            height: 100px;
            background: rgb(177, 19, 150);
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div id="flex-container">
        <div id="a1">色块一</div>
        <div id="a2">色块二</div>
        <div id="a3">色块三</div>
    </div>
</body>

</html>

flex属性用于指定弹性子元素如何分配空间。

<!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>弹性盒子-flex-box</title>
    <style>
        #flex-container {
            width: 400px;
            height: 400px;
            background: yellowgreen;
            display: flex;
            /* flex-direction: row; */
            /* justify-content: space-between; */
            align-items: center;
            /* flex-wrap: wrap-reverse; */
            /* align-content: stretch; */
        }
        
        #a1 {
            width: 100px;
            height: 100px;
            background: rgb(94, 148, 148);
            /* margin: auto; */
            align-self: flex-start;
            flex: 1;
        }
        
        #a2 {
            width: 100px;
            height: 100px;
            background: rgb(17, 160, 105);
            align-self: center;
            flex: 2;
        }
        
        #a3 {
            width: 100px;
            height: 100px;
            background: rgb(177, 19, 150);
            align-self: flex-end;
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="flex-container">
        <div id="a1">色块一</div>
        <div id="a2">色块二</div>
        <div id="a3">色块三</div>
    </div>
</body>

</html>

。

大大126

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 弹性盒子-flex-box

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成display定义盒子类型弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。flex-directionflex-direction-弹性盒子中子元素的排列方式属性值：1.row：默认，.
复制链接

扫一扫