web前端—前端三剑客之css(7)：弹性盒模型flexbox

最新推荐文章于 2024-08-24 13:47:49 发布

觅远

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量88

点赞数

文章标签： css html flex css3 web

本文链接：https://blog.csdn.net/JBY2020/article/details/117332877

版权

本文详细介绍了CSS弹性盒模型（Flexbox），包括设置弹性盒模型的作用、flexbox的基本概念、主轴和纵轴规则，以及各种常用的设置，如子元素的宽度、高度、主轴和纵轴方向、换行方式、元素的排列方式等，帮助开发者更好地理解和运用Flexbox进行前端布局。

摘要由CSDN通过智能技术生成

认识弹性盒模型

设置弹性盒模型的作用

设置元素的布局：布局设置中块元素的居中常用设置

方法一：

水平居中：子元素margin-left、margin-right的值设置为auto
垂直居中：子元素设置一个margin-top:(H-h)/2 —— H为父元素的高，h为子元素的高

方法二：

水平居中：父元素和子元素设置相同的宽度，父元素设置同等值的padding
垂直居中：给父元素设置高度为：h+t，并设置一个padding-top:t ——h为子元素的高，t为上下外边距(设置上下外边距的值需要一样，padding-top和padding-bottom一样)

方法三：

给父元素设置弹性盒模型，会对一个元素块中的子元素自动计算，进行排列、对齐和分配剩余空间。

什么是flexbox

父元素或容器：flex container

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）；
主轴的开始位置与边框的交叉点叫做main start，结束位置叫做main end；纵轴同理；
项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

子元素或项目：flex items

普通流与弹性盒模型规则

普通流：块元素在父元素内从上到下，从左到右排列,一个块元素占一行

给父元素设置display：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>Document</title>
    <style>
        .s1{
          width: 350px;
          border: slateblue solid 2px;
          display: flex;   /* 设置弹性盒模型 */
          flex-direction: row-reverse;   /* 弹性盒模型的主轴,纵轴方向 */
          flex-wrap: wrap;    /* 弹性盒模型的子元素换行方法 */
        }
        .s1 div{
            width: 100px;
            height: 100px;
            margin: 5px;
        }
        .s1 div:nth-child(1){
            background-color: aqua;
        }
        .s1 div:nth-child(2){
            background-color: rgb(0, 255, 42);
        }
        .s1 div:nth-child(3){
            background-color: rgb(255, 230, 0);
        }
        .s1 div:nth-child(4){
            background-color: rgb(255, 81, 0);
        }
        .s1 div:nth-child(5){
            background-color: rgb(0, 68, 255);
        }
    </style>
</head>
<body>
    <div class="s1">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
        <div class="d5"></div>
    </div>
</body>
</html>

flexbox的常用设置

弹性盒模型子元素宽度设置

弹性盒子：默认情况下，当子元素的总宽度小于父元素时，按照自己设定的宽度显示；当总宽度大于父元素时，按照比例显示: 元素实际宽度=元素设置的width值/所有子元素宽度之和∗父元素宽度，（设置的边距值不会影响）

最低0.47元/天解锁文章

觅远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端—前端三剑客之css(7)：弹性盒模型flexbox

目录认识弹性盒模型设置弹性盒模型的作用什么是flexbox普通流与弹性盒模型规则flexbox的常用设置弹性盒模型子元素宽度设置弹性盒模型子元素高度设置弹性盒模型的主轴,纵轴方向设置弹性盒模型的子元素换行方法弹性盒子内的元素主轴方向排布方式弹性盒子内的元素交叉轴方向排布方式弹性盒子内的子元素的大小属性弹性盒子内的子元素的排布顺序弹性盒子内的单个子元素在纵轴的顺序认识弹性盒模型设置弹性盒模型的作用设置元素的布局：布局设置中块元素的居中常用设置
复制链接

扫一扫