Flex布局详解-程序员宅基地

技术标签： css  flex  前端  html  css3  工具util  

Flex 布局详解

一、入门

1. flex 是什么？

  • flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

2. 为什么我们需要 flex?

  • 解决元素居中问题

  • 自动弹性伸缩，合适适配不同大小的屏幕，和移动端

3.flex 常见术语 三个2

序号 简记 术语
1 二成员 容器和项目(container / item)
2 二根轴 主轴与交叉轴(main-axis / cross-axis)
3 二根线 起始线(main/cross-start)与结束线（main/cross-end)

img

二、容器 container 的属性

外面的大容器的属性的设置

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

1.flex-direction 主轴方向

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

image-20210331195635185

image-20210331195724739

image-20210331195803337

image-20210331195911522

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
     
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
}
.container{
     
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}
.item{
     
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

2. flex-wrap 主轴一行满了换行

nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

image-20210331200420335

image-20210331200527014 image-20210331200656686

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
     
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
}
.container{
     
    /* flex-wrap: nowrap; */
    flex-wrap: wrap;
    /* flex-wrap: wrap-reverse; */
}
.item{
     
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
        <div class="item" style="background-color: #aaff00;">4</div>
        <div class="item" style="background-color: #ffff00;">5</div>
    </div>
</body>
</html>

3. flex-flow 1和2的组合

flex-low: [flex-direction] [flex-wrap]

就是 1 和 2 的组合，简写，同上，这里不赘述.

4.justify-content 主轴元素对齐方式

这里是元素的对齐，区别于刚刚的「方向」

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

image-20210331201947030

image-20210331202028245

image-20210331202106687

image-20210331202149205

image-20210331202241366

image-20210331202332871

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
     
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
}
.container{
     
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    justify-content: space-evenly;
}
.item{
     
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

5.align-items item「项目」在交叉轴上对齐方式「单轴」

这个是 container 容器的属性，设置的是 items 项目元素在交叉轴上对齐样式

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

image-20210331202806289

image-20210331202841120

image-20210331202915627

image-20210331203018581

（一般用不着，本来就在一条直线上）

image-20210331203130876

伸展，就是会填充宽度

6. align-content 交叉轴行对齐方式 多行

这个和 justify-content 属性一模一样，

justify-conent，align-items，align-content 都极度相似.

flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end   （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center     (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around  (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch      (每一行)伸缩，占满整个高度

image-20210331204122090

image-20210331204205734

image-20210331204303849

image-20210331204403783

image-20210331205003164

image-20210331205106522

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
     
    display: flex;
    height: 800px;
    background-color: rgb(219, 219, 219);
    /* 因为需要多行，所以要换行 */
    flex-wrap: wrap;
}
.container{
     
    align-content: flex-start;
    /* align-content: flex-end; */
    /* align-content: center; */
    /* align-content: space-between; */
    /* align-content: space-around; */
    /* align-content: stretch; */

}
.item{
     
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
        <div class="item" style="background-color: #aaff00;">4</div>
        <div class="item" style="background-color: #ffff00;">5</div>
    </div>
</body>
</html>

三、项目元素 item 的属性

容器里面的子元素item「项目」的属性

flex-grow：长大
flex-shrinik: 缩小
align-self: 覆盖container align-items 属性
order 排序
flex-basis: 有效宽度

1.flex-grow 长大

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

  • 该属性的值,称为放大因子, 常见的属性值如下:

序号 属性值 描述
1 0默认值 不放大,保持初始值
2 initial 设置默认值,与0等效
3 n 放大因子: 正数

放大后的效果

image-20210331210642331

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
     
    display: flex;
    height: 800px;
    background-color: rgb(219, 219, 219);
}
.item{
     
    padding: 100px;
}
.item1{
     
    /* 其他的都是0，这一个是1，所以能所有剩下的空间都是item1的 */
    flex-grow: 1;
}

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

2. flex-shrinik: 缩小

  • 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
  • 该属性的值,称为收缩因子, 常见的属性值如下:
序号 属性值 描述
1 1默认值 允许项目收缩
2 initial 设置初始默认值,与 1 等效
3 0 禁止收缩,保持原始尺寸
4 n 收缩因子: 正数

示例:

image-20210331212509330

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
     
    display: flex;
    height: 800px;
    width: 400px;
    background-color: rgb(219, 219, 219);
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
}
.item{
     
    width: 200px;
    height: 200px;
    font-size: 1.5rem;
    /* 禁止收缩 */
    flex-shrink: 0;
}
.item1{
     
    flex-shrink: 1;
}
.item2{
     
    flex-shrink: 0;
}
.item3{
     
    flex-shrink: 3;
}
/*  container 容器的宽度是 400,3个字元素总宽度是 600 超过了 200
    然后按照比例缩小到这些元素上 200/4 = 50
    item1 缩小 50 * 1 = 50,还剩 150
    item2 不缩小
    item3 缩小 50 * 3 = 150 还剩 50
 */

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

3. align-self: 覆盖container align-items 属性

  • 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式
序号 属性值 描述
1 auto默认值 继承 align-items 属性值
2 flex-start 与交叉轴起始线对齐
3 flex-end 与交叉轴终止线对齐
4 center 与交叉轴中间线对齐: 居中对齐
5 stretch 在交叉轴方向上拉伸
6 baseline 与基线对齐(与内容相关用得极少)

例子:

image-20210331213131744

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
     
    display: flex;
    height: 800px;
    background-color: rgb(219, 219, 219);
    flex-direction: row;
    flex-wrap: nowrap;
}
.container{
     
    /* container指定容器的对齐 flex-start */
    align-items: flex-start;
}
.item{
     
    width: 200px;
    height: 200px;
}
.item3{
     
    /* 元素3 item3 覆盖container的设置，flex-end */
    align-self: flex-end;
}

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

4. order 排序

image-20210331213812047

就是将元素重新排序

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
     
    display: flex;
    height: 800px;
    background-color: rgb(219, 219, 219);
}

.item{
     
    width: 200px;
    height: 200px;
    order: 0;
}
.item1{
     
    order: 3;
}

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

5. flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
     
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

参考:

Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

flex布局（主轴方向 、主轴项目对齐方式 、交叉轴项目对齐 、项目顺序 、项目独立对齐方向 ） - 前端 - php中文网博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jarvan5/article/details/115361945

智能推荐

eNSP综合实验合集（eNSP综合大作业合集）_可先收藏_ensp的无线网络技术大作业3000字-程序员宅基地

文章浏览阅读10w+次，点赞123次，收藏1.1k次。该文章对eNSP的综合实验做了一个归纳和总结，文章中包含了多个综合实验，可以自由的切换到相应的文章中进行查看_ensp的无线网络技术大作业3000字

【爬虫实战】python文本分析库——Gensim-程序员宅基地

文章浏览阅读2.1k次，点赞25次，收藏37次。Gensim 允许你使用 TF-IDF 权重和其他算法来提取文档中的关键词。当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。_gensim

Android分享一张图片_android 分享一张图片到basequickadapter中-程序员宅基地

文章浏览阅读1k次。public class Act_Share extends Activity { private ShareCustomAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(_android 分享一张图片到basequickadapter中

Linux所有服务开放对应端口大全_linux服务器端口全部开放-程序员宅基地

文章浏览阅读4.7k次。Linux所有服务开放对应端口大全_linux服务器端口全部开放

php连接mysql实现简单注册登陆页面_php连接数据库登录和注册-程序员宅基地

文章浏览阅读1.6w次，点赞33次，收藏226次。PHP7连接数据库的方式：使用mysqli及PDOhttps://blog.csdn.net/zwliang98/article/details/82997349php输出执行sql语句的错误信息：mysqli_query($conn,$sql) or die(mysqli_error( $conn ));问题一：Incorrect integer value: ‘’ for colu..._php连接数据库登录和注册

深度学习之——防止过拟合的方法_加噪声防止过拟合-程序员宅基地

文章浏览阅读3.2k次，点赞8次，收藏13次。1、过拟合定义：在training data上的error渐渐减小，但是在验证集上的error却反而渐渐增大——因为训练出来的网络过拟合了训练集，对训练集外的数据却不work。模型越复杂，越容易过拟合。因此，原先以最小化损失（经验风险最小化）为目标：现在以最小化损失和模型复杂度（结构风险最小化）为目标：通过降低复杂模型的复杂度来防止过拟合的规则称为正则化。2、..._加噪声防止过拟合

随便推点

数据库的分类_relative database relation database-程序员宅基地

文章浏览阅读88次。关系型数据库（RDBMS：relative database manager system）特点：（1） 表与表之间有关系（2） 有行有列（和excel类似）（3） 是通过SQL语句去操作数据库。比较有名代表：Mysql：免费，开源。Oracle：甲骨文，收费，大型公司，一年费用9位数SQL Server:微软公司，可以安装WindowsDB2非关系型数据库（no-sql）特点：（1） 表与表之间没有关系（2） 通过API（Java、PHP、Python代码）去操作（3） 充分使_relative database relation database

RxJAVA-Single_rxjava single-程序员宅基地

文章浏览阅读960次。interface SingleObserver<T> { void onSubscribe(Disposable d); void onSuccess(T value); void onError(Throwable error);}订阅者一共三个方法可以处理。给出示例package com.netty.demo.vertx;import io.reactivex.*;import io.reactivex.disposables.Disposab._rxjava single

CSR8675的DSP学习笔记——离线调试与仿真_csr adk4.2-程序员宅基地

文章浏览阅读1.2w次，点赞2次，收藏22次。写在最前面：很多读者反馈希望可以有硬件平台配合学习。现与思度科技联合推出CSR867x学习板【淘宝链接：思度科技CSR867x学习板】，进QQ群获取激活码购买学习板享受如下优惠： 1. 价格优惠 2. 免费提供开发教程和项目源码 3. 免费提供入门级技术支持QQ群号：743434463—————————–正文分割线———————————1. 引言CSR8675的DSP..._csr adk4.2

由于高精度事件计时器（HPET）驱动过时导致AMD机器装Win10的卡死蓝屏问题记录_win10关闭高精度事件计时器-程序员宅基地

文章浏览阅读1.5w次。AMD记性频繁卡死，蓝屏，特征在于：打游戏等高负载条件，电脑没有问题；闲置一定时间之后蓝屏或者死机，鼠标键盘无反应，界面全部卡死，只能按开机键重启。未保存的数据全部丢失。近日蓝屏代码 有两类，一，IRQL NOT LESS OR EQUAL 。驱动程序使用了不正确的内存地址造成。第二种是 KMODE_EXCEPTION_NOT_HANDLED。这种主要是由于过时或损坏的设备驱动程序文件。以下..._win10关闭高精度事件计时器

java通过ksoap调用_[Java教程]ksoap2-程序员宅基地

文章浏览阅读242次。[Java教程]ksoap20 2020-06-19 18:04:38 Android连接远程数据库，目前看来最好的解决办法就是webservice，利用webservice进行通讯就要soap协议，目前android没有内建相关的函数，需要借助第三方ksoap2-android进行操作。soap2-android官网地址https://simpligility.githu..._java ksoap2

MySQL中SELECT ... INTO的用法_select id into-程序员宅基地

文章浏览阅读2.7k次。MySQL中SELECT ... INTO的用法官方文档表述：1.SELECT ... INTO var_list selects column values and stores them into variables.2.SELECT ... INTO OUTFILE writes the selected rows to a file. Column and line termi_select id into

推荐文章

热门文章

相关标签