CSS的弹性布局

最新推荐文章于 2024-01-22 19:51:44 发布

雾眠气泡水@

最新推荐文章于 2024-01-22 19:51:44 发布

阅读量1.3k

点赞数 2

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

本文链接：https://blog.csdn.net/m0_60489011/article/details/119843344

版权

css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

CSS的弹性布局

弹性布局的介绍

弹性布局的英文是flexbox，简写flex。
弹性布局又称伸缩盒布局。弹性布局有容器、元素两大要素，元素可以随着容器大小的变化，自动改变大小，但是元素之间会按照一定的比例排布，使页面整洁，让人看起来舒服。
实现弹性布局的代码：display:flex;

弹性布局的常用语句

1.在主轴方向的排列方式——justify-content
默认是x轴。通常我们实现x轴的排列用这个语句。
:flex-start：元素在x轴上靠左开始排列。
:flex-end：元素在x轴上靠右开始排列。
:center：元素在x轴上居中排列。
:space-between：元素之间会有空白间隔开了。
:space-around：元素左右都会出现空白间隔开了，相当于有空白将元素包围起来了。
:flex-evenly：元素之间以及元素与容器之间的左右间距相等。

案例：

<!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>弹性布局</title>
    <style>
        .parent{
            height: 300px;
            border:1px solid blueviolet;
            display: flex;
            justify-content: flex-start;
        }
        .child{
            width: 200px;
            height: 200px;
            border: 1px solid lawngreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>
</html>

flex-start的效果图：
在这里插入图片描述 flex-end的效果图：
center的效果图：
space-between的效果图：
space-around的效果图：
space-evenly的效果图：
2.交叉轴的对齐方式：align-items
默认是y轴。通常实现垂直排列。
:flex-start：在y轴上元素靠顶排列。
:flex-end：在y轴上元素靠底排列。
:center：在y轴上元素居中排列。
:baseline：称为基线对齐，每个元素中的内容会水平对齐。
:stretch：称为拉伸，在元素没有设置高度的时候，可以通过这个代码将元素拉伸，和容器一样高。

案例代码

<!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>弹性布局</title>
    <style>
        .parent{
            height: 300px;
            border:1px solid blueviolet;
            display: flex;
            align-items: flex-start;
        }
        .child{
            width: 200px;
            height: 200px;
            border: 1px solid lawngreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>
</html>

flex-start的效果图：
在这里插入图片描述 flex-end的效果图：
center的效果图：
baseline的效果图：
需增加代码：是第二个孩子的内边距为20px。

.child:nth-child(2){
            padding-top: 20px;
        }

在这里插入图片描述 stretch的效果图：
在执行此效果之前，需要注释掉孩子的高度。
3.子元素的x轴与y轴的交换排列

案例代码

<!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>弹性布局</title>
    <style>
        .parent{
            height: 300px;
            border:2px solid blueviolet;
            display: flex;
            flex-direction: row;
        }
        .child{
            width: 200px;
            height: 200px;
            border: 2px solid lawngreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>
</body>
</html>

行排列：也就是列布局。flex-direction:column;
在这里插入图片描述

倒叙列布局：flex-direction:column-reverse;
在这里插入图片描述

列排列：也就是行布局。flex-direction:row;
在这里插入图片描述

倒叙行布局：flex-direction:row-reverse;
在这里插入图片描述换行：flex-wrap:wrap;
如果有设置子元素的固定宽高，在希望子元素不被父元素挤的情况下，可以执行换行。

案例代码：根据上面代码只需改变style

<style>
        .parent{
            height: 250px;
            border:2px solid blueviolet;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .child{
            width: 200px;
            height: 100px;
            border: 2px solid lawngreen;
        }
    </style>

效果图 4.多主轴：align-content

案例代码

<style>
        .parent{
            height: 250px;
            border:2px solid blueviolet;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .child{
            width: 200px;
            height: 100px;
            border: 2px solid lawngreen;
        }
    </style>

:flex-start：在y轴上子元素靠顶。
在这里插入图片描述 :flex-end：在y轴上子元素靠底。
center：上下居中。
:sapce-between：子元素之间会有间隔，但子元素和父元素之间没有间隔。
:space-around：子元素之间有间隔，而子元素和父元素之间也有间隔了。

雾眠气泡水@

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS的弹性布局

CSS的弹性布局弹性布局的介绍弹性布局的英文是flexbox，简写flex。弹性布局又称伸缩盒布局。弹性布局有容器、元素两大要素，元素可以随着容器大小的变化，自动改变大小，但是元素之间会按照一定的比例排布，使页面整洁，让人看起来舒服。实现弹性布局的代码：display:flex;弹性布局的常用语句1.在主轴方向的排列方式——justify-content默认是x轴。通常我们实现x轴的排列用这个语句。:flex-start：元素在x轴上靠左开始排列。:flex-end：元素在x轴上靠右开始排
复制链接

扫一扫