CSS：Flex实现并列式布局

最新推荐文章于 2022-10-24 20:23:56 发布

ydsungan

最新推荐文章于 2022-10-24 20:23:56 发布

阅读量782

点赞数 2

分类专栏：大前端文章标签： html css flex

本文链接：https://blog.csdn.net/weixin_45482422/article/details/107905755

版权

大前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ydsungan</title>
    <style>
        .container {
            /*容器设置为flex布局*/
            display: flex;
            flex-wrap: wrap;/*可换行*/
            justify-content: center;/*内容居中*/
            border: 1px solid #333333;
        }
        .item{
            flex: 1 1 150px;
            /*flex属性是flex-grow,flex-shrink,flex-basis三个属性的简写
            flex-basis:item的初始宽度;
            flex-grow:如果有多余宽度，项目是否可以扩大
            flex-shrink：如果宽度不足，项目是否可以缩小;
            flex:1 1 150px,项目始终沾满所有宽度
            */
            margin: 5px;
            background-color:  #0058a3;
            height: 50px;
            color: white;
            
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

</body>

在这里插入图片描述

ydsungan

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS：Flex实现并列式布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ydsungan</title> <style> .container { /*容器设置为flex布局*/ display: flex; flex-wrap: wrap;/*可
复制链接

扫一扫