Flex布局详解及活用

最新推荐文章于 2024-08-10 17:13:35 发布
最新推荐文章于 2024-08-10 17:13:35 发布
阅读量3.2k 收藏 16
点赞数 8
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45796592/article/details/128811030
版权

目录

第一章、Flex布局详解

1.1 入门

1.1.1  flex是什么

1.1.2 为什么使用flex

1.1.3 设置方式

1.1.4 组成部分

1.2 常用属性

1.2.1 弹性容器（父）常用属性

1.2.2 弹性盒子（子）常用属性

 第二章、Flex活用--几种常用的布局

2.1 两列/两栏布局

2.2 水平垂直居中

2.3 三栏布局

2.4 圣杯布局

2.5 流式布局

第一章、Flex布局详解

1.1 入门

1.1.1  flex是什么

  • 弹性盒子布局
  • 是一种由浏览器提倡的布局模型
  • 布局网页更加简单灵活
  • 能避免浮动脱标(脱标：脱离标准文档流)的问题
  • 注意：如果子盒子没有设置高度，子盒子将会拉伸填满父盒子高度

1.1.2 为什么使用flex

  • 解决元素居中问题

  • 自动弹性伸缩，合适适配不同大小的屏幕、移动端和微信小程序、app

1.1.3 设置方式

  • 父元素添加display:flex子元素自动挤压或拉伸。
  • 添加display:flex后的视觉效果：子级一行排列/水平排列
  • 水平排列：默认主轴在水平，弹性盒子默认沿着主轴排列

1.1.4 组成部分

  • 弹性容器(父盒子)
  • 弹性盒子(子盒子)
  • 主轴
  • 侧轴

1.2 常用属性

1.2.1 弹性容器（父）常用属性

1.flex-direction   主轴方向 (常用)
2.flex-wrap        主轴一行满了换行 (常用)
3.justify-content  主轴元素对齐方式 (常用)
4.align-items      侧轴元素对齐方式//单行 (常用)
5.flex-flow        1和2的组合 (了解)
6.align-content    侧轴行对齐方式//多行 (了解)
<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .parents{
            display: flex;
            height: 600px;
            background-color: skyblue;
        }
///-----------------使用flex布局区域-----------------------
        .parents{
            flex-direction: row;
            /* flex-direction: row-reverse; 
            flex-direction: column;
            flex-direction: column-reverse; */
            flex-wrap: nowrap;
            /* flex-wrap: wrap;
            flex-wrap: wrap-reverse; */
            justify-content: center;
            /* justify-content: flex-start;
            justify-content: flex-end;
            justify-content: space-between;
            justify-content: space-around;
            justify-content: space-evenly; */
            align-items: center;
            /* align-items: flex-start;
            align-items: flex-end;
            align-items: baseline;
            align-items: stretch; */
        }
///---------------------------------------------------
        .son{
            padding: 80px;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="parents">
        <div class="son red">1</div>
        <div class="son green">2</div>
        <div class="son yellow">3</div>
    </div>
</body>
</html>
  • flex-direction 主轴方向
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

  •  flex-wrap 主轴一行满了是否换行 
nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

  • justify-content  主轴元素对齐方式

这里的方向与 flex-direction 主轴方向 定义的方向是对应的

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly  平均对齐，不靠着容器壁，剩余空间平分

  •  align-items  侧轴元素对齐方式//单行
flex-start：侧轴的起点对齐。
flex-end：侧轴的终点对齐。
center：侧轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

  •  flex-flow：flex-direction和flex-wrap的组合

 写法：flex-low: [flex-direction] [flex-wrap]

  •  align-content 侧轴行对齐方式 多行

用法与justify-content 的属性一模一样

1.2.2 弹性盒子（子）常用属性

flex-grow/flex：长大 （常用）
align-self: 覆盖弹性容器（父盒子） align-items 属性 （常用）
order 排序 （了解）
flex-basis: 有效宽度 （了解）
flex-shrinik: 缩小  （了解）
<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .parents{
            display: flex;
            height: 400px;
            overflow: hidden;
            background-color: skyblue;
        }
        .parents{
            align-items: flex-start;       
        }
        .son{
            padding: 100px;
        }
        .red{
            background-color: red;
            flex-grow: 1;
            /* flex: 1; */
            align-self: center;
            order: 1;
        }
        .green{
            background-color: green;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
    
    <div class="parents">
        <div class="son red">1</div>
        <div class="son green">2</div>
        <div class="son yellow">3</div>
    </div>
</body>
</html>
  • flex-grow/flex：长大，默认为0

        -- 在容器主轴上存在剩余空间时, flex-grow才有意义

        -- 类似比例分配

.red{
     background-color: red;
     flex-grow: 1;
     /* flex: 1; */
}

  • align-self: 覆盖弹性容器（父盒子） align-items 属性

        -- 属性与align-items一样，使用后该盒子会有自己的"想法"

flex-start：侧轴的起点对齐。
flex-end：侧轴的终点对齐。
center：侧轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

  •  order：将该盒子排序到第几个，默认为0

 第二章、Flex活用--几种常用的布局

2.1 两列/两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            height: 200px;
        }
        .left {
            background-color: rgb(234, 117, 21);
            /* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 */
            flex-basis: 200px;
            /* flex-grow定义该项目不分配剩余空间 */
            flex-grow: 0;
        }
        .main {
            background-color: rgb(18, 164, 254);
            /* flex-grow定义main占满剩余空间 */
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="main">main</div>
    </div>
</body>
</html>

2.2 水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平/垂直居中</title>
    <style>
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
            width: 500px;
            background-color: rgb(18, 164, 254);
        }
        .content {
            height: 200px;
            width: 200px;
            background-color: rgb(234, 117, 21);
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="content">我是子元素，我要垂直居中</div>
</div>
</body>
</html>

2.3 三栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        display: flex;
        height: 200px;
        margin-bottom: 30px;
    }

    .left {
        background-color: yellow;
        flex-basis: 200px;
        /* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 */
        flex-grow: 0;
        /* flex-grow定义该项目不分配剩余空间 */
    }

    .main {
        background-color: green;
        flex-grow: 1;
        /* flex-grow定义main占满剩余空间 */
    }

    .right {
        background-color: blue;
        flex-basis: 100px;
        flex-grow: 0;
    }
</style>
<body>
<div class="box">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
</body>
</html>

2.4 圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 500px;
        background-color: yellow;
        text-align: center;
        font-size: 30px;
    }
    header, footer {
        line-height: 80px;
        background: pink;
    }
    .content {
        display: flex;
        flex: 1;
    }
    nav {
        order: -1;
        background-color: blue;
        width: 80px;
    }
    aside {
        background-color: green;
        width: 80px;
    }
    main {
        flex: 1;
    }

</style>
<body>
    <div class="box">
        <header>header</header>
        <div class="content">
            <main>main</main>
            <nav>nav</nav>
            <aside>aside</aside>
        </div>
        <footer>footer</footer>
    </div>
</body>
</html>

2.5 流式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流式布局</title>
</head>
    <style>
        .box {
            display: flex;
            flex-flow: row wrap;
            height: 300px;
            width: 400px;
            background-color: yellow;
        }
        .content {
            width: 25%;
            background-color: blue;
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>
<body>
    <div class="box">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</body>
</html>

❆VE❆
关注
flex 布局
weixin_53571388的博客
03-11 287
flex是弹性布局，css3新增语法， 我们在开发移动端时会大量用到，pc端考虑到浏览器兼容性不好 flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的
flex详解
Chasidy的博客
02-28 552
flex 弹性布局 1flex 和传统布局的区别 传统布局优点: 兼容性好缺点: 繁琐 flex布局:优点:简单方便缺点:兼容性不好 主要用在移动端 在flex布局中 有两个轴 主轴 侧轴 默认情况下主轴的方向=X 轴 从左往右侧轴的广告= Y轴 从上到下 2 使用布局 2.1 fl...
Flex布局
善假于物
10-12 494
Flex布局 一、什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定为Flex 布局。 1 2 3 .box{ display:flex; } 　　行内元素也可以使用Flex布局。 1 2 ...
Flex布局（弹性布局）
最新发布
ORANGE_3iING的博客
08-10 4777
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式对父容器设置的属性作用属性值设置主轴的方向row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右flex-end：从尾部开始排列center：在主轴居中对齐(如果主轴是x轴则水平居中)space-around：平分剩余空间。
【06】移动端布局：01-流式布局、视口、meta标签、二倍图、像素、background-size、box-sizing、移动端公共样式normalize.css
忘尘丶莫负的博客
06-29 1292
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Web
Flex框架的基本原理
iteye_12633的博客
03-24 232
Flex框架的基本原理 Flex程序从本质上讲，就是使用了（由AS编写的）Flex框架的Flash程序。但在Flex程序中可以忽略timeline这个概念，所有的内容都集于一帧。事实上Flex程序中的根，是继承flash.display.MovieClip的mx.managers.SystemManager。SystemManager有两帧。第一帧是预加载程序，第二帧是主程序。因此，所有程...
微信小程序 Flex布局详解
09-01
弹性因子（flex-grow, flex-shrink, flex-basis）在微信小程序的Flex布局中，每个伸缩项目都可以通过flex属性来指定其弹性因子，它是一个简写属性，可以设置三个值：flex-grow, flex-shrink, 和 flex-basis。...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
Flex 布局 流式布局
weixin_39616739的博客
03-20 2631
网页布局（layout）是 CSS 的一个重点应用。 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可...
flex布局学习笔记
ajn67017的博客
09-18 132
一、Flex布局的定义 Flex：弹性布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 ①、任何一个容器都可以使用Flex布局。 　　display：flex； ②、行内元素也可以使用flex布局。 　　display：inli...
你必须知道的flex伸缩布局
lmy233的博客
10-16 1468
伸缩布局： display:flex;让大盒子成为容器，容器有主轴和侧轴； 子盒子是容器的项目，项目默认会从主轴的起点沿主轴的方向依次排列，如果超过容器，则会自动收缩，不换行 所以一定要注意当前主轴的起点在什么地方 容器的6个属性：写在容器的css里 —1--- flex-direction控制主轴的方向： row→：默认值，主轴呈现水平方向从左往右 column↓：主轴呈现垂直方向从上往下，项目会垂直排列，侧轴会变成水平方向从右往左 row-reverse← 主轴呈现水平方向从右往左，项目的排列也会反过来
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值