弹性盒或伸缩盒（flex）布局中的水平或者垂直布局

不染126

已于 2022-09-07 20:18:55 修改

阅读量6.2k

点赞数 1

文章标签： css html css3

于 2022-09-07 20:17:04 首次发布

本文链接：https://blog.csdn.net/qq_59541478/article/details/126752542

版权

在开发过程中面对大小和样式几乎一样的盒子，使用伸缩盒布局会方便许多，因为它不用像浮动那样使用之后还要清除浮动，本文将通过两个小案例简单讲一下如何使用flex布局使盒子水平排布或者垂直排布

1.首先介绍一下flex布局中的相关属性。其中属性要设置给父元素，开启弹性盒布局使用display:flex,开启之后可以通过设置justify-content来设置主轴对齐方式，align-items设置交叉轴对齐方式，flex布局默认主轴沿着水平方向对齐，交叉轴默认垂直方向对齐

2.下面通过代码案例来介绍

水平排列：

<!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>
        .container {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: #ccc;
            /* 容器属性设置给父元素 */
            /* 开启弹性盒布局 */
            /* 弹性元素沿主轴方向排列 */

最低0.47元/天解锁文章

不染126

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
弹性盒或伸缩盒（flex）布局中的水平或者垂直布局

1.首先介绍一下flex布局中的相关属性。其中属性要设置给父元素，开启弹性盒布局使用display:flex,开启之后可以通过设置justify-content来设置主轴对齐方式，align-items设置交叉轴对齐方式，flex布局默认主轴沿着水平方向对齐，交叉轴默认垂直方向对齐2.下面通过代码案例来介绍。
复制链接

扫一扫