一篇文章掌握flex布局

已于 2023-02-05 10:16:58 修改
阅读量423 收藏
点赞数
文章标签： css 前端
于 2022-12-24 20:55:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44693690/article/details/128429755
版权

目录

认识flexbox

flex布局里两个重要的概念

flex布局里的两个轴（主轴和交叉轴）

flex布局属性分类

flex container上的CSS属性

 flex-direction（主轴方向）

flex-wrap（单行还是多行）

flex-flow（flex-direction和flex-wrap的简写形式）

justify-content（主轴上item的分布方式）

align-items（决定了flex items在交叉轴上的对齐方式）

align-content（交叉轴对齐方式）-很少用

 flex-items上的CSS属性

flex-grow（决定了flex items如何扩展）

flex-shrink（决定flex items如何缩小）

flex-basis（设置flex items在主轴上的base size）

order（决定flex items的排布顺序）

align-self（覆盖flex-container设置的align-items）

flex（flex-grow、flex-shrink和flex-basis的简写属性）

认识flexbox

  1. 弹性盒子是一种按行或按列布局元素的一维布局方法
  2. 元素可以膨胀以填充额外的空间，可以收缩适应更小的空间
  3. 通常我们用flexbox来进行布局的方案成为flex布局

flex布局里两个重要的概念

flex container：开启了flex布局的元素叫做flex container(装弹性盒子的容器)

设置 display属性为flex或者inline-flex可以成为flex container

  1. flex：flex container 以block-level形式存在
  2. inline-flex：flex container 以 inline-level形式存在

flex item：flex container里面的直接子元素叫做flex item

  1. flex item的布局要受flex container属性的设置来进行控制和布局
  2. flex item不再严格区分块级元素和行内级元素
  3. flex item默认情况下是包裹内容的，但是可以设置宽度和高度

简单来说就是flex item的布局受flex container控制，flex container有行内级和块级的区别，flex item 不严格区分块级和行内级元素

flex布局里的两个轴（主轴和交叉轴）

注意：主轴不一定是水平的，只是默认主轴是水平的，主轴和交叉轴互相垂直

flex布局属性分类

flex布局里面有很多属性，很多小伙伴只是把这些属性死记硬背，如图所示，我们可以将这些属性分为两类，一类是应用在flex container上的属性，一类是应用在flex items上的属性，这样是不是就清晰许多啦。

flex container上的CSS属性

 flex-direction（主轴方向）

当flex-container里的宽度或高度小于flex-items时，flex-wrap将会起作用

  • row（默认值）
  • row-reverse
  • column
  • column-reverse

flex-wrap（单行还是多行）

  • nowrap（默认） 单行
  • wrap 多行

flex-flow（flex-direction和flex-wrap的简写形式）

顺序任意并且都可以省略

justify-content（主轴上item的分布方式）

当flex-container宽度大于flex-items的总宽度时

  • flex-start（默认值）：与main start 对齐——类似于左对齐
  • flex-end：与main end 对齐——类似于右对齐
  • center：居中对齐
  • space-between
    • flex items之间的距离相等
    • 与main start、main end两端对齐
  • space-around
    • flex items之间的距离相等
    • flex items与main start、main end之间的距离是flex items之间距离的一半
  • space-evenly
    • flex items之间的距离相等
    • flex items与main start、main end之间的距离等于flex items之间的距离

align-items（flex items在交叉轴上的对齐方式）

  • normal：弹性布局中，效果和stretch一样
  • stretch：当flex items在交叉轴方向的size为auto时，会自动拉伸至填充flex container
  • flex-start：与cross start对齐
  • flex-end：与cross end对齐
  • center：居中对齐
  • baseline：与基准线对齐

align-content-很少用

 flex-items上的CSS属性

flex-grow（flex items如何扩展）

  • 可以设置为任意非负数字（正小数、正整数、0），默认值是0
  • 当flex container在主轴方向上有剩余size时，flex，grow属性才会有效
  • flex items扩展后的最终size不能超过max-width/max-height

flex-shrink（flex items如何缩小）

  • 可以设置为任意非负数字（正小数、正整数、0），默认值是1
  • 当flex items在主轴方向上超过了flex container的size，flex-shrink才会有效
  • flex items收缩后的最终size不能超过min-width/min-height

flex-basis（设置flex items在主轴上的base size）

  • 和width设置没什么区别，当内容为一个长的单词时，内容会把item的宽度撑开

order（flex items的排布顺序）

  • 可以设置任意整数（正整数、负整数、0），值越小就越排在前面(默认值为0)

align-self（覆盖flex-container设置的align-items）

  • auto（默认值）：遵从flex container的align-items 设置
  • stretch、flex-start、flex-end、center、baseline，效果跟align-items一致

flex（flex-grow、flex-shrink和flex-basis的简写属性）

小皓再向前
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
flex布局分享.pptx
11-06
flex布局培训PPT，适用于H5,小程序，ReactNative,Flutter的布局教程。
Flex 布局教程：语法篇.doc
05-31
Flex 布局教程：语法篇 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
Flex布局基础知识
01-08
Flex布局 今天在学习css的时候，学到了一个新的布局方式:Flex布局（弹性盒布局）。本人认为挺重要的，首写博客来巩固一下自己今天所学的有关Flex布局的知识，并与大家分享，内容如有错误，欢迎大家来给我指点一下。 文章目录Flex布局Flex简介弹性容器弹性元素主轴与纵轴弹性容器样式弹性元素样式 > 本章节使用的基础代码(开启flex之前) .wrapper{ width: 800px; border: red solid 5px; } .box1,.box2,.box3{
深入理解Flex布局以及计算
02-25
对于Flex布局，阅读了大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox的W3C规范文档。注：本篇博文不适合未接触过Flex布局的人,如果想了解flex布局基础。请参考理解Flexbox：你需要知道的一切flex盒模型是被期望设计成：在任何流动的方向上(包括上下左右)都能进行良好的布局可以以逆序或者以任意顺序排列布局可以线性的沿着主轴一字排开或者沿着侧轴换行排列可以弹性的在任意的容器中伸缩大小（今天重点研究的主题）可以使子元素们在容器主轴方向上或者在容器侧轴方向上进行对齐可以动态的沿着主轴方向伸
CSS——Flex布局
wwww00o的博客
07-26 295
flex就是弹性盒子，只要给盒子设置displayflex，就可以拥有一个弹性盒子。能够自适应布局，响应式地实现布局。
使用flex构建上中下布局出现覆盖情况
cnkeysky的博客
04-09 1322
使用flex构建上中下布局出现覆盖情况问题的解决
web中文开发，CSS元素分类，通用流行框架大全
m0_56146626的博客
03-18 282
前言 在初学前端的时候，我们总会遇到一些问题，我们可以在网上看到很多关于前端的这些问题： 你们都是怎么学web前端的？ 零基础，怎么自学好前端？ 前端需要学多久，都学哪些知识？ 想成为一名合格的前端工程师，需要掌握哪些技能？ 下面是给初学前端的小伙伴分享的学习路线。 一面 css 如何实现垂直居中？ position 有哪几种？分别说一下对应的效果和用法 css 选择器优先级 js 原型链，问了js 如何创建对象 页面渲染和响应 式 MVVM 和 MVC的区别 Vue 生命周期，在哪个阶段可以获取页
flex:1注意事项
走在秃头的路上的博客
02-19 2145
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用 就是说这个子元素的上面的元素必须是 display: flex ...
flex布局（弹性盒子布局，盒子布局）
wenmin1987的博客
11-21 799
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool) 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 1.解决传统border带来影响   一行显示4个div块，两端贴着边框...
css弹性盒
m0_70877859的博客
07-18 1397
拉伸，在没有设置高度的情况下，会默认拉伸撑开到整个母盒子的高度。space-around距离环绕，第一个盒子与第二个盒子的距离正好是第一个盒子与大盒子的距离，左右外边距一致。3.弹性盒居中，只有一个元素的时候，加marginauto;适用主轴方向，横轴为主轴，则占满宽度，纵轴为主轴，则占满宽度。默认值为1，空间不够会产生挤压，更改值为0，就不允许被挤压，align-selfflex-end;则div1占1/5，daiv2占1/5，div3占3/5。align-selfflex-start;...
Flex布局
03-29
Flex布局 简介 Flex是Flexible Box的缩写，意为弹性布局。是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在...
flex弹性布局
Jy123_的博客
10-09 367
flex弹性布局 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，他已经得到了所 有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局是什么？ Flex是Flexible Box的缩写，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局 .box{ display: inline-flex; } Webkit内核的浏览器
css精髓：这些布局你都学废了吗？
公众号【猴哥说前端】
12-17 329
前言 最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。 单列布局 单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。 单列布局一般有两种形式： (图片来源：https://blog.csdn.net/Ace_Arm/article/details/81036129) 一栏布局 一栏布局头部、内容、底部宽度一致 效果图 代码实现 html <header&g
css：flex：1 手工整理版
m0_71981318的博客
07-15 546
flex属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写。 flex: 1表示 .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的`flex-grow`属性都为1，当父盒子有剩余空间，那么子盒子将等分剩余空间 如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多
CSS关于position布局覆盖及解决方案
热门推荐
qq_40825315的博客
03-14 1万+
先来介绍一下pastion的定位方式 1.两个div都没定位 <div style="width: 300px;height: 300px;background-color: yellow;"> 第一层 </div> <div style="width: 300px;height: 300px; background-color: blue;"> 第二层...
flex属性总结
weixin_43723064的博客
12-14 1612
一.父元素属性 1.display:flex;（定义了一个flex容器） 2. flex-direction（决定主轴的方向） row（默认值，水平从左到右）colunm（垂直从上到下）row-reverse（水平从右到左）column-reverse（垂直从下到上） 3. flex-wrap（定义如何换行） nowrap（默认值，不换行）wrap（换行）wrap-reverse（换行，且颠倒行顺...
css布局之flex布局
qq_42369064的博客
05-29 1801
文章目录一、flex布局原理布局原理二、flex布局父项常见属性【1】flex-direction【2】justify-content【3】flex-wrap【4】align-content【5】align-items【6】flex-flow三、flex布局子项常见属性【1】flex【2】align-self【3】order 一、flex布局原理 flex是flexible Box的缩写，意思是“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都能指定为flex容器。 当我们为父盒子设为fle
Flex嵌入到HTML中切换焦点不能输入中文和遮盖DIV的问题
JavaMan
07-05 1万+
默认情况下如果Flash被嵌入到Web页面中，则SWF文件默认被置于所有HTML元素的顶层渲染级别的。类似在所有html元素的总父容器上一层，无法被任何html元素遮挡。无论怎么设置flash容器和层的深度(z-index)也无济于事。遇到这个问题我们可以在插
弹性（Flex）布局的使用
weixin_42556618的博客
02-04 1127
最近我参与实施的两个项目中，一个页面交互复杂，而另一个相对传统，两个项目相比之下凸显出了页面布局样式的时间占比不可忽视，使用了弹性布局代码量精简了不少。 虽说如此，弹性布局往往会有些潜在的问题，且改动后，要立即查看页面也需要不少时间，因此我把项目中使用弹性布局过程中遇到的问题稍作整理，为大家以后使用时，可以有效规避这些麻烦。 使用场景 前端开发中，网页布局是很重要的一部分。之前传统布局...
flex布局一列五个
最新发布
02-23
Flex布局是一种用于页面布局的CSS模块，它提供了一种灵活的方式来排列和对齐元素。在Flex布局中，一列五个元素可以通过以下步骤实现： 1. 创建一个父容器，并将其设置为Flex布局。可以通过设置父容器的`display`属性为`flex`来实现，例如： ```css .container { display: flex; } ``` 2. 将父容器的`flex-direction`属性设置为`column`，以使元素在垂直方向上排列。默认情况下，Flex布局是水平排列的，通过设置`flex-direction: column`可以改变排列方向，例如： ```css .container { display: flex; flex-direction: column; } ``` 3. 添加五个子元素到父容器中。这些子元素将按照垂直方向排列，每个元素占据一行。 4. 可以通过调整子元素的样式来控制它们的大小和对齐方式。例如，可以使用`flex-grow`属性来控制子元素的伸缩比例，使它们占据相等的空间： ```css .item { flex-grow: 1; } ``` 这样，就可以实现一列五个元素的布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值