弹性布局 flex layout HTML CSS

文章目录

效果图

其实弹性布局的好处是:当网页大小变化(如窗口resize)时,处于弹性容器(flex container)中的弹性元素(flex item) 之间的距离也会变化。

需要特别注意的是:

弹性布局的主要CSS如下。

css 复制代码
/* 弹性布局的主要CSS如下。注意 justify-content 的可选值:
    start / center / end / left / right / flex-start / flex-end 
    space-between / space-around / space-evently
*/
#container {
    display: flex;
    /* flex-direction: row; */
		/* flex-wrap: wrap; */
    justify-content: space-between;
}
#container>div {
    /* flex-grow: 2; */
    width: 100px;
    height: 100px;
}

参考文档

代码

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        * {
            outline: auto;
        }

        body {
            background-color: rgba(199, 237, 206, 0.3);
        }

        #w_flex_container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            /* flex-flow:  flex-direction  flex-wrap */
            /* flex-flow: row wrap; */
            /* 方向: 行(反转)、列(反转) */
            /* flex-direction: row; */
            /* wrap 允许换行, nowrap 不允许换行 */
            /* flex-wrap: wrap; */

            /* 
                justify-content
                justify-items
                justify-self
            */
            justify-content: space-between;
            /* align-content: center; */

            /* 
                align-content
                align-items
                align-self
            */
            /* align-items: stretch; */
            /* align-items: center; */
            /* align-items: center; */

        }

        #w_flex_container>div {
            /* flex: 1; */

            /* justify-items: center; */
            /* align-items: center; */

            /* padding: 5px; */
            height: 30px;
            width: 50px;
            /* background: linear-gradient(-45deg, #788cff, #b4c8ff); */
            background-color: pink;
        }

        /* 弹性布局的主要CSS如下。注意 justify-content 的可选值:
            start / center / end / left / right / flex-start / flex-end 
            space-between / space-around / space-evently
        */
        #container {
            display: flex;
            justify-content: space-between;
        }
        #container>div {
            /* flex-grow: 2; */
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <div id="w_flex_container">
        <div style="justify-self: start;">aaa 1</div>
        <div>aaa 2</div>
        <div>aaa 3</div>
        <div>aaa 4</div>
        <div>aaa 5</div>
    </div>

    <div>
        <p><code>
        这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度,这取决于flex-direction值。
        剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数,那么所有的项目将剩余空间按相同比例分配,否则将根据不同的 flex-grow 定义的比例进行分配。
        </code></p>
    </div>

</body>

</html>
相关推荐
李少兄7 小时前
HTML 表单控件
前端·microsoft·html
繁花与尘埃10 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
over69711 小时前
弹性布局完全指南:从文档流到Flexbox实战
css
白兰地空瓶14 小时前
用 CSS3 造一场星际穿越:前端导演的《星球大战》片场手记
css
lh142457349515 小时前
ECSide标签<ec:table>表格对不齐问题处理
css·1024程序员节
加蓓努力我先飞16 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
有点笨的蛋16 小时前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
UIUV16 小时前
《CSS3 星球大战》页面实现笔记:用代码演绎银河史诗
css·html
inx17716 小时前
HTML 敲击乐 PART--2
javascript·css
Tzarevich16 小时前
CSS3星球大战:前端代码界的视觉导演艺术
前端·css