浏览器喜欢的结构化布局——Flex布局

最新推荐文章于 2024-03-13 18:09:44 发布

中枢叹号

最新推荐文章于 2024-03-13 18:09:44 发布

阅读量820

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/NewHouser/article/details/127966787

版权

主轴对齐方式——justify-content

侧轴对齐方式（有两个默认值）——align-items

单个子元素盒子（弹性盒子）在侧轴的对齐方式——align-self

四、主轴方向的改变——flex-direction

五、Flex的值——伸缩比例

设置伸缩比——flex：数字

六、子级盒子（弹性盒子）换行 ——flex-warp

行对齐方式——align-content

一、Flex简单介绍

flex是专门为了布局而研发的布局模型，在需要左右、左中右以及上下布局时非常适用。同时也因为加载速度快、渲染性能较高而深得浏览器偏爱。但是flex的兼容性不高，适合新版本的浏览器以及所有移动端，低版本的浏览器不兼容。

二、Flex的使用

1、display：flex

display:flex添加给需要需要布局的子元素的父元素。这个父元素也称为弹性容器，子元素称为弹性盒子，会自动挤压或拉伸。

2、主轴/侧轴

主轴默认为水平方向，当父级（弹性容器）添加display:flex后，子级（弹性盒子）会沿着水平方向进行排列

侧轴默认为垂直方向，当父级（弹性容器）添加display:flex后，子级（弹性盒子）会沿着垂直方向进行排列。

三、对齐方式

主轴对齐方式——justify-content

/*修改主轴对齐方式-从头开始依次排列（默认值）*/
justify-content:flex-start

/*从尾开始依次排列*/
justify-content:flex-start

/* 沿主轴居中排列 */
justify-content: center;

/* 沿主轴依次排列，间距在弹性盒子(子级)之间 */
justify-content: space-between;

/* 沿主轴依次排列，所有地方的间距都相等 */
justify-content: space-evenly;

/* 沿主轴依次排列，间距加在子级的两侧 */
justify-content: space-around;

详细如图：

完整代码详情如下：

<!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>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .box div {
        width: 20px;
        height: 20px;
        background-color: black;
        color: white;
    }
    
    .box {
        display: flex;
        margin: 30px 600px;
        height: 20px;
        border: 1px solid #000;
    }
    
    .box:nth-child(2) {
        justify-content: flex-end;
    }
    
    .box:nth-child(3) {
        justify-content: center;
    }
    
    .box:nth-child(4) {
        justify-content: space-between;
    }
    
    .box:nth-child(5) {
        justify-content: space-around;
    }
    
    .box:nth-child(6) {
        justify-content: space-evenly;
    }
</style>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

    <div class="box">

最低0.47元/天解锁文章

中枢叹号

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浏览器喜欢的结构化布局——Flex布局

flex是专门为了布局而研发的布局模型，在需要左右、左中右以及上下布局时非常适用。同时也因为加载速度快、渲染性能较高而深得浏览器偏爱。但是flex的兼容性不高，适合新版本的浏览器以及所有移动端，低版本的浏览器不兼容。
复制链接

扫一扫