CSS Flex布局

原创 已于 2025-04-10 19:35:10 修改 · 1.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flex #布局 #css #css3

于 2020-12-29 17:19:33 首次发布

水平垂直居中

.flex-center {
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
}

在这里插入图片描述

换行垂直居中

.flex-center-vertical {
    display: flex;
    flex-flow: column; //或flex-direction: column;
    align-items: center;
    justify-content: center;
}

在这里插入图片描述

左右两端对齐

.box {
	display: flex;
    flex-flow:  row nowrap;
    justify-content: space-between;
}

在这里插入图片描述

左右固定宽度，中间宽度自适应

.box {
	display: flex;
   
	.left,
	.right {
	    width: 80px;
	}
	.center {
	    flex:1
	}
}

在这里插入图片描述

左右两端对齐，左侧占用剩余空间

.box {
	display: flex;
    flex-flow:  row nowrap;
    justify-content: space-between;
	
	.left{
	    flex: 1;
	}
}

在这里插入图片描述

按比例分配宽度

left的宽度：0.5/(0.5+1)*300=100
right的宽度：1/(0.5+1)*300=200

.box {
	display: flex;
    width: 300px;
	.left{
	    flex: 0.5;
	}
	.right{
	    flex: 1;
	}
}

在这里插入图片描述

第一个子元素靠左，其他子元素靠右

.box {
	display: flex;
	justify-content: flex-end;
}
.box {
	.item:first-child{
	    margin-right: auto;
	}
}

在这里插入图片描述

最后一个子元素靠右，其他子元素靠左

.box {
	display: flex;
}
.box {
	.item:last-child{
	    margin-left: auto;
	}
}

在这里插入图片描述

子元素横排，自动换行

.box {
	display: flex;
    flex-flow: wrap;
}

在这里插入图片描述

左右两个元素高度同步

<div class="flex-container">
    <div class="flex-aside">flex-aside</div>
    <div class="flex-main">flex-main</div>
</div>

<style>

.flex-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;

    .flex-aside,
    .flex-main {
        overflow: auto;
    }

    .flex-aside {
        flex-shrink: 0;
        width: 200px;
        height: 500px;
        background-color: #d6d7d8;
    }
    .flex-main {
        display: block;
        flex: 1;
        flex-basis: auto;
        background-color: #e9eef3;
    }
}
</style>

在这里插入图片描述

左边子元素文字自适应溢出隐藏，右边子元素固定宽度

.box {
	display: flex;
	flex-direction: row;
}
.box {
	.left {
		flex: 1; 
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.right {
		width: 80px;
        text-align: right;
	}
}

在这里插入图片描述

左边子元素文字自适应溢出隐藏，右边子元素固定宽度，但空余宽度会被左边子元素挤占

.box {
	display: flex;
	flex-direction: row;
}
.box {
	.left {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.right {
		width: 80px;
        text-align: right;
	}
}

在这里插入图片描述

给子元素设置宽度

flex-shrink：表示在父元素宽度不够的情况下是否自动收缩，取值：0表示不自动收缩，1表示自动收缩

<ul>
	<li>aaaaaa</li>
	<li>bbbbbb</li>
<ul>
<style>
ul {
	display: flex;
}
li {
	flex-shrink: 0;
}
</style>

多行溢出隐藏

.box {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

11.常见媒体布局

<div class="media">
    <div class="media-face"><img src="xxx" /></div>
    <div class="media-body">
        <h3 class="media-title">标题</h3>
        <div class="media-content">内容</div>
    </div>
</div>

<style>
.media {
    display: flex;
    overflow: hidden;
    .media-face {
        width: 64px;
        height: 64px;
        margin-right: 8px;
    }
    .media-body {
        flex: 1;
        position: relative;
        overflow: hidden;

        .media-title {
            font-size: 14px;
            line-height: 24px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .media-content {
            margin-top: 8px;
            color: #666;
            font-size: 12px;
            line-height: 16px;
        }
    }
}
</style>

在这里插入图片描述

常见媒体布局：多行溢出隐藏

<div class="media">
    <div class="media-face"><img src="xxx" /></div>
    <div class="media-body">
        <h3 class="media-title">标题</h3>
        <div class="media-content">内容</div>
    </div>
</div>

<style>
.media {
    display: flex;
    .media-face {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }
    .media-body {
        flex: 1;
        margin: 0 0 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;

        .media-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
        }
        .media-content {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-left: 0;
            color: #999;
            line-height: 1.5;
        }
    }
}
</style>

在这里插入图片描述

常见媒体布局3

<div class="recommend-card">
    <div class="recommend-media">
        <div class="media-face">
            <i class="el-icon-s-opportunity" />
        </div>
        <div class="media-body">
            <h3 class="media-title">
                标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
            </h3>
            <div class="media-content">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </div>
        </div>
    </div>
    <div class="recommend-tools">
        <span class="recommend-tool"><i class="el-icon-edit-outline"/></span>
        <span class="recommend-tool"><i class="el-icon-delete"/></span>
    </div>
</div>
<style lang="scss" scoped>
.recommend-card {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 10px 25px;
    border: 1px solid #ddd;

    .recommend-media {
        display: flex;
        flex: 1;
        overflow: hidden;
        
        .media-face {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            margin-right: 8px;

            & > i {
                font-size: 40px;
            }
        }
        .media-body {
            flex: 1;
            position: relative;
            overflow: hidden;

            .media-title {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 16px;
                line-height: 24px;
                color: #333;
                font-weight: normal;
            }
            .media-content {
                margin-top: 5px;
                color: #666;
                font-size: 12px;
                line-height: 16px;
            }
        }
    }

    .recommend-tools {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 25px;

        .recommend-tool {
            padding: 15px;
            & > i {
                font-size: 18px;
            }
        }
    }
}
</style>

在这里插入图片描述

设置flex-direction: column;后，子孙元素设百分比无效的解决方法

百分比用不了就用 height: 100vh

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
        
        .app {
            height: 100%;
        }
        
        .main {
            display: flex;
            -webkit-box-flex: 1;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            flex: auto;
            min-height: 0;
            height: auto;
            background: red;
            overflow-x: hidden;
            box-sizing: border-box;
        }
        
        .layout {
            display: flex;
            -webkit-box-flex: 1;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            flex: auto;
            min-height: 0;
            height: auto;
            background: red;
            overflow-x: hidden;
            box-sizing: border-box;
            min-height: 100vh;
        }
        
        .layout-content {
            -webkit-box-flex: 1;
            flex: auto;
            min-height: 0;
            background: green;
            height: 100%;
        }
        
        .content {
            position: relative;
            height: 100%;
            height: 100vh;
            background: cyan;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="main">
            <div class="layout">
                <div class="layout-content">
                    <div class="content">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
css flex 布局换行
℡メ㏑╭ァ小凯
03-07 3932
加上这个就行了：flex: 1 0 calc(20% - 40px);/* 控制一行显示5个，设置间距为20px */，最后效果。默认使用display: flex;是不换行的，只需要加上flex-wrap: wrap;通过上面我们发现虽然时间换行了，但是每行的边距不一样。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 1058
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
CSS实现左侧固定，右侧自适应(5种方法)
weixin_52512511的博客
08-13 6313
【代码】CSS实现左侧固定，右侧自适应(5种方法)
CSS 布局技巧实现元素左右排列
weixin_52648900的博客
09-12 5957
使用 CSS 实现一个子元素靠右，其余子元素靠左的四种常见方法，推荐使用 flex。
CSS浮动简介
duke_ding2的博客
06-12 2475
CSS常见有三种布局方式：本文主要介绍浮动。先来简单看一下标准流。标准流是基本的布局方式，说白了就是标签按照其默认方式排列。要想打破默认的布局方式，一种办法是 ，但是用浮动更加灵活方便。浮动关键字： 效果如下： 是块级元素，默认会独占一行，现在加了浮动，三个 就处于同一行了（并排靠左）。注意，这三个盒子之间没有空隙，如果不用浮动而用 ，则也能使得这三个盒子处于同一行，但是盒子之间会有空隙。注意，如果把浏览器宽度缩小，以至于三个盒子在一行排不开，则会自动转行。 效果如下： 效果如下：可见，box1因为
css flex布局
upup
11-15 454
一、默认情况下，元素的布局 盒模型； 外边距叠加：相邻两个元素都设置了margin并且两个margin有重叠，更大的设置会被保留，小的消失 二、弹性盒子 首先，我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。 section { display:flex } 当元素表现为 flex 框时，它们沿着两个轴来布局： 主轴...
CSS Flex布局详解及其重要属性应用
10-09
内容概要：本文深入讲解了CSS Flex布局的基本理念以及其对于现代Web开发尤其是移动互联网的重要性。详述了flex布局下父级flex container及子元素flex item的相关属性，具体介绍了flex-direction、flex-wrap等关键...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
让CSS flex布局最后一行列表左对齐的N种方法(小结)
12-28
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。 问题描述 ... <div class=list></div> <div class=list></div> <div class=list></div> ...
Css flex 布局
qq_54855933的博客
08-01 2266
css的flex布局
CSS flex布局
Glichi的博客
07-12 733
任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览器必须加上前缀-webkit .box{ display: -webkit-flex; /* Safari */ display: flex; } ++设置flex...
CSS flex布局
meteorshower2013的博客
07-10 340
学习参考 微信小程序开发指南： https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a 阮一峰博客： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuic...
CSS的flex布局
weixin_45514905的博客
05-29 227
container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布局模型了，上图中还有主轴和纵轴分别是布局的一个方向 1.flex-container 1.1 flex-direction(主轴方向) flex-direction:row; （布局为一行，从start开始排） flex-direction:row-reverse; (布局为一行，从end开始排) flex-direction:column; (布局为一列，从start开始排
Css-flex布局
qq_75069372的博客
08-24 496
flex布局
css flex 布局
最新发布
01-03
CSS Flex布局是一种现代的网页布局模型，它基于弹性盒（Flexbox）模型，能够方便地创建响应式、动态和灵活的用户界面设计。Flex布局主要用于单行或单列的容器，它可以极大地简化布局管理，使得元素可以自动调整大小和位置，适应不同屏幕尺寸。 关键属性包括： 1. `display: flex;` 或 `display: inline-flex;`：将元素设置为flex容器或行内flex容器。 2. `flex-direction`: 决定主轴的方向，如`row`（默认，从左到右）、`column`（从上到下）等。 3. `justify-content`: 对齐项目在主轴上的方式，比如`flex-start`（开始）、`center`（居中）、`space-between`（均匀分布）等。 4. `align-items`: 对齐项目在交叉轴（垂直方向）的方式，例如`flex-start`（顶部对齐）、`center`（中间对齐）等。 5. `flex-wrap`: 是否允许项目换行，`nowrap`（默认）、`wrap` 和 `wrap-reverse`。 通过组合这些属性，开发者可以轻松控制元素如何在容器中分配空间和对齐。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值