想学会flex布局,我强烈推荐你来看看这篇文章!!

菜园前端
• 阅读 417

原文链接:https://note.noxussj.top/?source=helloworld


为什么要使用 flex 布局?

flex 布局是目前比较流行的一种布局,因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。使用 flex 属性就可以写出简洁优雅复杂的页面布局。先大概看一下我下面写的内容,然后再去看看阮一峰老师写的 Flex 布局教程

::: tip 容器:采用 flex 布局的元素,称为容器。 项目:指的是容器里面的子元素。 :::

容器的 6 个属性

flex-direction

属性决定主轴的方向(即项目的排列方向)。

flex-direction: row (默认)主轴为水平方向,起点在左端。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-direction: row-reverse 主轴为水平方向,起点在右端。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-direction: column 主轴为垂直方向,起点在上沿。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-direction: column-reverse 主轴为垂直方向,起点在下沿。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-wrap

主轴的换行方式。

flex-wrap: nowrap (默认)当项目总宽度超出容器的宽度时,不进行换行并且对项目的宽度进行统一压缩。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-wrap: wrap 换行,第一行在上方。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-wrap: wrap-reverse 换行,第一行在下方。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-flow

flex-flowflex-directionflex-wrap 的简写形式。

flex-flow: row nowrap (默认)

justify-content

项目在主轴上的对齐方式。

justify-content: flex-start (默认)左对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

justify-content: flex-end 右对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

justify-content: center 居中。

想学会flex布局,我强烈推荐你来看看这篇文章!!

justify-content: space-between 两端对齐,项目之间的间距都相等。

想学会flex布局,我强烈推荐你来看看这篇文章!!

justify-content: space-around 也属于两端对齐,项目之间的间距都相等,但是容器的两侧有一个间距,刚好是项目之间间距的一半。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-items

项目在交叉轴上的对齐方式。

align-items: stretch (默认),项目铺满整个交叉轴高度。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-items: flex-start 顶部对齐,也就是与交叉轴的起点对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-items: flex-end 底部对齐,也就是与交叉轴的终点对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-items: center 垂直居中对齐,也就是交叉轴的中心点对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-items: baseline 项目的第一行文字的基线对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-content

align-items 一般是指单根轴线的对齐方式,也就是只有一行内容。而 align-content 则是多根轴线的对齐方式。

::: warning 如果项目只有一根轴线,该属性不会起任何作用。 :::

align-content: stretch (默认),每一行项目的高度都会平分交叉轴的高度。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-content: flex-start 顶部对齐,也就是与交叉轴的起点对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-content: flex-end 底部对齐,也就是与交叉轴的终点对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-content: center 垂直居中对齐,也就是交叉轴的中心点对齐。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-content: space-between 两端对齐,项目之间的间距都相等。

想学会flex布局,我强烈推荐你来看看这篇文章!!

align-content: space-around 也属于两端对齐,项目之间的间距都相等,但是容器的两侧有一个间距,刚好是项目之间间距的一半。

想学会flex布局,我强烈推荐你来看看这篇文章!!

项目的 6 个属性

order

项目的排列顺序,数值越小越靠前,默认为 0。

分别给三个项目设置 order: 3 order: 2 order: 1

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-grow

项目的放大比例。默认为 0(代表即使存在剩余空间也不放大)。如果所有项目的 flex-grow 属性都为 1,则它们会等比分配剩余空间。

分别给三个项目设置 flex-grow: 1 flex-grow: 1 flex-grow: 1

想学会flex布局,我强烈推荐你来看看这篇文章!!

分别给三个项目设置 flex-grow: 1 flex-grow: 2 flex-grow: 1 ,假设一个项目的 flex-grow 属性为 2,其他都为 1,则前者占据的剩余空间将会比其他项目多一倍。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-shrink

项目的缩小比例,默认为 1(代表如果空间不足,该项目将缩小)。

分别给三个项目设置 flex-shrink: 1 flex-shrink: 0 flex-shrink: 1 。假设一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex-basis#

在分配多余空间之前,提前计算项目占据的主轴空间。默认为 auto(代表项目本身的大小)。

分别给三个项目设置 flex-basis: 350px flex-grow: 1 flex-grow: 1 。假设一个项目的 flex-basis 属性为 350px,其他都为 auto,则前者占据固定空间,不进行分配剩余空间。效果其实和给它设置 width: 350pxheight: 350px 效果一致。

想学会flex布局,我强烈推荐你来看看这篇文章!!

flex

flex 属性是 flex-grow, flex-shrinkflex-basis 的简写

flex-flow: 0 1 auto (默认)

align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖容器的 align-items 属性,默认值为 auto,表示继承父级元素的 align-items 属性,如果没有父级元素,则等同 stretch

给三个项目设置 align-self: flex-start align-self: flex-end align-self: flex-start

想学会flex布局,我强烈推荐你来看看这篇文章!!

点赞
收藏
评论区
推荐文章
Alex799 Alex799
3年前
Vue进阶(幺柒幺):前端用户体验提升(五)Flex实现弹性布局
需求背景在实现组件拖拽设计过程中,发现组件样式中设置了display:flex属性信息,导致组件生成后无法实现拖拽效果,网上查阅资料后发现Flex布局大有天地。Flex来源
浩浩 浩浩
3年前
【Flutter实战】线性布局(Row、Column)
4.2线性布局(Row和Column)所谓线性布局,即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局,类似于Android中的LinearLayout控件。Row和Column都继承自Flex,我们将在弹性布局一节中详细介绍Flex。主轴和纵轴对于线性布局,有主轴和纵轴之分,如果
菜园前端 菜园前端
1年前
CSS布局方式-静态布局
原文链接:什么是静态布局?静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用px单位来实现静态布局。优点它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图1:1
Wesley13 Wesley13
3年前
HTML CSS布局定位
HTMLCSS布局定位我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容。网页布局的好与坏,直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中,我们通常使用浮动(float)、定位(position)、显示模式(display)相关属性结合使用,以达到预期效果
Wesley13 Wesley13
3年前
使用伸缩盒布局创建一个三列布局每一列占用`col
\使用伸缩盒布局创建一个三列布局每一列占用\col{n}\/12份基于父级容器的宽度\Answer设置\.row\类的父级容器为\display:flex;\样式然后使用\flex\缩写形式属性给每一列子元素设置一个\flexgrow\值使得每一列可以按照设置的比例自动协调宽度
Wesley13 Wesley13
3年前
CSS浮动和清除浮动
1.浮动float  div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性,就会变成块级标签。!(https://img2018.cnblogs.com/blog/1468469/201901/1468469201901061724118811574074745.png)<!
Stella981 Stella981
3年前
Grid布局和Flex布局
Flex布局(弹性布局)Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。采用Flex布局的元素,称为Flex容器。flexitem项目是Flex布局的元素,简称项目。容器:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis),单个项目占据的主轴空间叫做m
达里尔 达里尔
11个月前
Flex布局:flex-grow:1失效
工作中遇到一些flexgrow:1的容器失效,一堆文字乱码溢出,最后看了一下flex布局的原理解决了cssdivflexgrow:1;wisth:0;如果遇到另一边的div设了宽但是被flexgrow:1的内容挤压了,可以给设了宽的div加flexshri
京东云开发者 京东云开发者
2个月前
鸿蒙跨端实践-布局方案介绍
作者:京东科技刘宁一、前言动态化使用jue语言(开发风格与Vue一致)开发,对于视图的布局采用了标准的Flex布局方式。对于列表类视图,动态化提供了、、、等标签,将子视图的布局管理封装到标签中实现,业务只需要针对标签简单地设置相关属性,即可实现列表类布局,