前端研习录（07）——CSS弹性盒子模型（flex box）

最新推荐文章于 2024-06-24 08:18:27 发布

清风不渡

最新推荐文章于 2024-06-24 08:18:27 发布

阅读量606

点赞数 1

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

本文链接：https://blog.csdn.net/WXKKang/article/details/125988106

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（07）——CSS弹性盒子模型（flex box）

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

一、CSS弹性盒子模型（flex box）

重拾前端记忆，记录学习笔记，现在进入CSS弹性盒子模型部分，它是CSS3的一种新的布局模式，用来当需要适应不同的屏幕大小以及设备类型时，更加有效的分配容器内元素的布局（排列、对齐和分配空白空间）

二、内容

弹性盒子由弹性容器（flex container）和弹性子容器（flex item）组成
弹性容器内包含一个或多个弹性子元素

1、声明弹性容器

display:flex

通过将display的值设置为flex将容器定义为弹性容器，如下，我们先定义一个div容器（class 定义为container）。里面包含三个div容器（class 定义为box1,box2,box2）

<!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>
        .container{
            width: 400px;
            height: 400px;
            background-color: bisque;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
</body>
</html>

效果如下：
在这里插入图片描述
我们看到，由于<div>标签是块级容器，一个容器占一行，所以显示从上往下排列，下面我们来将最外层的div容器声明为弹性容器，如下：

<!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>
        .container{
            width: 400px;
            height: 400px;
            background-color: bisque;
            display: flex;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
</body>
</html>

效果如下：
在这里插入图片描述
可以看出，声明了弹性容器后，由于弹性盒内容默认横向摆放，所以红绿灯从纵向变成了横向

2、父元素属性

（1）display 属性

参上上面内容，display:flex用于定义弹性盒，设置后子元素默认以水平方向排列

（2）flex-direction 属性

flex-direction属性指定弹性子元素在父容器中的排列方式，语法如下：

flex-direction : row | row-reverse | column | column-reverse

row ：横向从左到右排列（左对齐），默认排列方式
row-reverse ：反向从右到左排列（右对齐）
column ：纵向从上到下排列（上对齐）
column-reverse：纵向从下到上排列（下对齐）

（3）justify-content 属性

justify-content 属性指定弹性子元素在父容器中垂直对齐方式，语法如下：

justify-content : flex-start | flex-end | center

flex-start ：左对齐（默认）
flex-end ：右对齐
center ：居中

（4）align-items 属性

align-items 属性指定弹性子元素在父容器中水平对齐方式，语法如下：

align-items : flex-start | flex-end | center

flex-start ：上对齐（默认）
flex-end ：下对齐
center ：居中

3、子元素属性

（1）flex 属性

flex 属性根据弹性盒子元素所设置的扩展因子（可分配空间）作为比率来分配剩余空间
默认为0，意为即使存在可分配空间，也不放大
如果弹性盒子中只有一个子元素设置，那么按可分配空间转化的百分比对其分配剩余空间（0.1即10%，1即100%，超出按100%算）
举例如下：

<!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>
        .container{
            width: 400px;
            height: 400px;
            background-color: bisque;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: green;
            flex: 2;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            flex: 1;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: red;
            flex: 1;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
</body>
</html>

效果如下，绿灯占2/4，黄、红灯各占1/4：
在这里插入图片描述

清风不渡

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端研习录（07）——CSS弹性盒子模型（flex box）

重拾前端记忆，记录学习笔记，现在进入CSS弹性盒子模型部分，它是CSS3的一种新的布局模式，用来当需要适应不同的屏幕大小以及设备类型时，更加有效的分配容器内元素的布局（排列、对齐和分配空白空间）...
复制链接

扫一扫

专栏目录