javaweb-flex布局

代码的奴隶（艾伦·耶格尔）

于 2024-08-18 12:03:17 发布

阅读量152

点赞数 1

文章标签：前端 css

本文链接：https://blog.csdn.net/2302_80364740/article/details/141297785

版权

1. flex布局原理

flex是flexible Box的缩写，意味着"弹性布局"，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性都将失效。

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item）。

总结flex布局原理：

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

2.主轴与侧轴

在flfex布局中，是分为主轴和侧轴两个方向，其他的叫法有：行和列、x和y轴。

默认主轴方向就是x轴方向，水平向右

默认侧轴方向就是y轴方向，水平向下

3. justify-content设置主轴上的子元素排列方式

4.align-items设置侧轴上的子元素排列方式（单行）

5.align-content设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况，在单行下是没有效果的。

6.样例

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子示例</title>
    <link rel="stylesheet" href="test1.css">
</head>
<body>
    <div id="outer">
        <div id="outer_inner">
            <img id="head" src="tx1.jpeg" alt="图片无法显示">
            <span id="username">看什么看</span>
        </div>
        2024/8/17
    </div>
</body>
</html>

css:

#outer {
    display: flex;
    border: 2px solid rgba(61, 61, 149, 0.6); /* 小盒子的边框 */
    width: 300px;
    height: 300px;
    background-color: #70627e;
    justify-content: flex-start; /* 将子类放在父类的左边 */
    align-items: center; /*（纵向）上居中对齐 */
    position: relative;
    gap: 20px; /*两元素之间的间隔*/
    padding-left: 20px; /* 留出空间，不让子类紧挨着父类的左边框 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(219, 14, 41, 0.925)/* 更高档的阴影 */
}

#outer_inner {
    border: 2px solid rgb(177, 30, 150); /* 小盒子的边框 */
    width: 160px;
    height: 80px;
    background-color: #13baba; /*背景色*/   /**/
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(255,105,180,0.6);/* 更高档的阴影 */
}


#head {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

#username {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #ffffff; /* 文字颜色 */
}

代码的奴隶（艾伦·耶格尔）

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaweb-flex布局

采用flex布局的元素，称为Flex容器（flex container），简称"容器"。flex是flexible Box的缩写，意味着"弹性布局"，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性都将失效。在flfex布局中，是分为主轴和侧轴两个方向，其他的叫法有：行和列、x和y轴。5.align-content设置侧轴上的子元素的排列方式（多行）的情况，在单行下是没有效果的。
复制链接

扫一扫