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

菜园前端
• 阅读 216

原文链接: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布局,我强烈推荐你来看看这篇文章!!

点赞
收藏
评论区
推荐文章
浪人 浪人
3年前
Android 代码动态修改RelativeLayout布局
Android代码动态修改RelativeLayout布局前言有时我们会遇到在xml布局文件中设置好界面后,但是又需要从代码中进行动态布局修改。之前从网上寻找了好多资料,看到的都是新建一个布局文件但是我的需求又是从当前布局文件的基础上进行修改。下面用一个示例大家介绍一个比较简单的办
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。主轴和纵轴对于线性布局,有主轴和纵轴之分,如果
图灵JAVA互联网架构师五期
download:棍子已经完成,下一步我们来添加两个按钮,绑定click事件,控制风车的转动速度按钮采用flex布局,分布在分车棍子的两边先看html加速减速复制代码css中.btndisplay:flex;
菜园前端 菜园前端
1年前
CSS布局方式-静态布局
原文链接:什么是静态布局?静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用px单位来实现静态布局。优点它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图1:1
Wesley13 Wesley13
2年前
HTML CSS布局定位
HTMLCSS布局定位我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容。网页布局的好与坏,直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中,我们通常使用浮动(float)、定位(position)、显示模式(display)相关属性结合使用,以达到预期效果
Wesley13 Wesley13
2年前
使用伸缩盒布局创建一个三列布局每一列占用`col
\使用伸缩盒布局创建一个三列布局每一列占用\col{n}\/12份基于父级容器的宽度\Answer设置\.row\类的父级容器为\display:flex;\样式然后使用\flex\缩写形式属性给每一列子元素设置一个\flexgrow\值使得每一列可以按照设置的比例自动协调宽度
Wesley13 Wesley13
2年前
CSS浮动和清除浮动
1.浮动float  div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性,就会变成块级标签。!(https://img2018.cnblogs.com/blog/1468469/201901/1468469201901061724118811574074745.png)<!
Stella981 Stella981
2年前
Grid布局和Flex布局
Flex布局(弹性布局)Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。采用Flex布局的元素,称为Flex容器。flexitem项目是Flex布局的元素,简称项目。容器:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis),单个项目占据的主轴空间叫做m
达里尔 达里尔
4个月前
Flex布局:flex-grow:1失效
工作中遇到一些flexgrow:1的容器失效,一堆文字乱码溢出,最后看了一下flex布局的原理解决了cssdivflexgrow:1;wisth:0;如果遇到另一边的div设了宽但是被flexgrow:1的内容挤压了,可以给设了宽的div加flexshri