图文学习前端Flex布局
哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。
把你的前端拿捏得死死的,每天学习得爽爽的,关注这个不一样的程序员,如果你所学的东西 处于喜欢 才会有强大的动力支撑。
感谢不负每一份热爱前端的程序员,不论前端技能有多奇葩,欢迎关注加我入群vx:xiaoda0423
前言
本篇文章进行学习css
中的一个重点应用,布局样式为flex
布局,相信你学习了解过display
属性,position
属性,float
属性,但今天只学习新东西就是flex
布局。
flex布局是什么
flex
是flexible box
的缩写,意思是弹性布局,代码样式如下:
.box {display: flex;
}
Flexbox Layout
模块是提供一个更有效的方式来布置,对齐和item
之间在一个容器中分配的控件,即使它们的大小是未知的,或者是动态的,所以单词命名flex
(弹性工作制的)
flex
布局可以使容器更改其item
的宽度,高度,以便最好地填充可用空间,或者收缩它们来防止溢出。flexbox
布局使用比较合适应用程序地组件和小规模布局上。
在webkit
内核地浏览器中,要加上-webkit
前缀哦,代码格式如下:
.box {display: -webkit-flex;display: flex;
}
当设置flex
布局之后,子元素(item
)的float
,clear
,vertical-align
属性会失效。
学习前要先了解概念
flex container
flex items
设置flex
布局的元素为flex
容器(flex container
),简称为容器。它的所有子元素都是容器的成员,flex
项目(flex item
),简称为项目。那么请查看如下图,解析flex
布局背后的主要思想。
如图可以看出,main axis
是从main-start
到main-end
,交叉轴cross axis
从cross-start
到cross-end
。
容器默认有两根轴的,水平的主轴main axis
和垂直的交叉轴cross axis
,从main-start
到main-end
叫(main start
)主轴;从cross axis
从cross-start
到cross-end
叫(cross axis
)交叉轴
单个项目占据的主轴空间叫main size
,占据的交叉轴空间叫cross size
container
弹性容器:
.container {display: flex;
}
items
弹性项目:
容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction属性决定的是主轴的方向,即是项目的排列方向
.box {flex-direction: row | row-reverse | column | column-reverse;
}.flex-container {-webkit-flex-direction: row; /_ Safari _/flex-direction: row;
}.flex-container {-webkit-flex-direction: row-reverse; /_ Safari _/flex-direction: row-reverse;
}.flex-container {-webkit-flex-direction: column; /_ Safari _/flex-direction: column;
}.flex-container {-webkit-flex-direction: column-reverse; /_ Safari _/flex-direction: column-reverse;
}
其使用flex-direction
的box
格式如下:
// 水平
.box {flex-direction: row;
}// 水平倒置
.box {flex-direction: row-reverse;
}// 垂直
.box {flex-direction: column ;
}// 垂直倒置
.box {flex-direction: column-reverse;
}
.box {width: 400upx;height: 300upx;background-color: #007AFF;margin: 10upx;
}.item {width: 80upx;height: 80upx;background-color: #1CBBB4;border: 1upx solid #FFFFFF;
}
row
:flex
容器的主轴与当前写入模式的内联轴具有相同的方向。主开始方向和主结束方向分别相当于当前写入模式的开始方向和结束方向。
.box-row {display: flex;flex-direction: row;
}
row-reverse
: 与'row'
相同,只是主开始方向和主结束方向交换了。
.box-row-reverse {display: flex;flex-direction: row-reverse;
}
column
: flex
容器的主轴与当前写入模式的块轴方向相同。主开始方向和主结束方向分别相当于当前书写模式的前/头和后/脚方向。
.box-column {display: flex;flex-direction: column;
}
column-reverse
: 与'column'
相同,只是主开始方向和主结束方向交换了。
.box-column-reverse {display: flex;flex-direction: column-reverse;
}
flex-wrap
属性:根据伸缩容器中的可用空间,指定伸缩项是否换行以及它们换行到多行或多列的方向。
.box{flex-wrap: nowrap | wrap | wrap-reverse;
}.flex-container {-webkit-flex-wrap: nowrap; /_ Safari _/flex-wrap: nowrap;
}.flex-container {-webkit-flex-wrap: wrap; /_ Safari _/flex-wrap: wrap;
}.flex-container {-webkit-flex-wrap: wrap-reverse; /_ Safari _/flex-wrap: wrap-reverse;
}
flex-wrap: nowrap
: 不换行。(所有弹性项目都将在一行上)
.box-flex-wrap-nowrap {display: flex;flex-wrap: nowrap;
}
flex-wrap: wrap
: 换行,第一行在上方。(弹性项目将从上到下缠绕在多行上)
.box-flex-wrap-wrap {display: flex;flex-wrap: wrap;
}
wrap-reverse
: 换行,第一行在下方。(弹性项目将从下到上缠绕在多行上)
.box-flex-wrap-wrap-reverse {display: flex;flex-wrap: wrap-reverse;
}
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
.box {flex-flow: <flex-direction> || <flex-wrap>;
}.container {flex-flow: column wrap;
}
.box-flex-flow-1 {display: flex;flex-flow: auto; // flex-flow: row nowrap;
}
.box-flex-flow-2 {display: flex;flex-flow: row wrap;
}
justify-content
属性:指定在解析了任意灵活长度和自动边距后,伸缩项如何沿伸缩容器的主轴对齐。(定义了项目在主轴上的对齐方式)
.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start
初始值。伸缩项目被打包在行首。第一个伸缩项的起始边被放置在伸缩容器的开始处。下一个伸缩项的起始边与第一个伸缩项的结束边按布局轴方向依次放置。所有沿布局轴保留的空间都放置在布局轴的末端。
.box-flex-justify-content-1 {display: flex;justify-content: flex-start;
}
如图效果:
flex-end
弹性物品被打包到行尾。第一个伸缩项的结束边缘被放置在伸缩容器的末端。下一个伸缩项目的结束边缘与第一个伸缩项目的开始边缘按布局轴方向依次放置。沿布局轴剩下的所有空间都放置在布局轴的起点。
.box-flex-justify-content-2 {display: flex;justify-content: flex-end;
}
如图效果:
center
弹性物品被打包在线的中间。flex
项目在直线上放置冲洗彼此对齐线的中心,与等量的main-start
边缘之间的空白行和第一项之间的线,主要目的的边缘线,最后一项。(如果剩余的空闲空间是负的,伸缩项将在两个方向上相等地溢出。)
.box-flex-justify-content-3 {display: flex;justify-content: center;
}
如图效果:
space-between
弹性项目均匀地分布在这条线上。如果剩余的自由空间是负的,或者一行上只有一个flex
项目,这个值与' flex-start '
相同。否则,main-start
保证的第一flex
项目线的边缘放置充裕的main-start
边缘线,最后一个flex
项的主要目的利润边缘线放置充裕的主要目的边缘线,和其余的flex
项目的分布之间的间距与任何两个相邻物品是一样的。
.box-flex-justify-content-4 {display: flex;justify-content: space-between;
}
如图效果:
space-around
弹性项目均匀地分布在线中,在两端有一半大小的空间。如果剩余的自由空间是负的,或者一行上只有一个伸缩项,这个值与' center '
相同。否则,行上的伸缩项的分布使行上任意两个相邻伸缩项之间的间距相同,并且第一个/最后一个伸缩项与伸缩容器边缘之间的间距为伸缩项之间间距的一半。
.box-flex-justify-content-5 {display: flex;justify-content: space-around;
}
如图效果:
space-evenly
:分配项目,以使任意两个项目之间的间距(以及到边缘的间距)相等。
align-items
属性:指定伸缩容器中伸缩项的对齐值(垂直于由伸缩方向属性定义的布局轴)。
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}
修改item
样式如图:
.item1 {width: 100upx;height: 120upx;
}.item2 {width: 100upx;height: 130upx;
}.item3 {width: 100upx;height: 140upx;
}
flex-start
:交叉轴的起点对齐。
.box-flex-align-items-1 {display: flex;align-items: flex-start;
}
flex-end
:交叉轴的终点对齐。
.box-flex-align-items-2 {display: flex;align-items: flex-end;
}
center
:交叉轴的中点对齐。
.box-flex-align-items-3 {display: flex;align-items: center;
}
baseline
: 项目的第一行文字的基线对齐。
修改item
,以第一行文字的基线对齐,想如图效果,itme3-text
顶部没有剩余空间,就被强迫这样了。如果有空间,已第一个为标准对齐,第一个item
文本底线对齐。
.item1-text {padding: 5upx;width: 120upx;height: 120upx;
}.item2-text {width: 120upx;height: 130upx;
}.item3-text {padding: 15upx;width: 120upx;height: 140upx;
}
.box-flex-align-items-4 {display: flex;align-items: baseline;
}
stretch
(默认值):如果项目未设置高度或设为auto
,将占满整个容器的高度。
修改item
,没有定义高度,如果有高度还是按照原来的高度呈现。
.item-noheight {width: 100upx;border: 1upx solid #FFFFFF;
}
.box-flex-align-items-5 {display: flex;align-items: stretch;
}
align-content
属性:指定当与flex-direction
属性定义的轴垂直的轴上有额外空间时,flex
项目的行如何在flex
容器内对齐。
align-content
属性定义了多根轴线(多行)的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start
:交叉轴的起点对齐
flex-end
:与交叉轴的终点对齐
center
:与交叉轴的中点对齐
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布
space-around
:每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍
stretch
:轴线占满整个交叉轴
项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
属性定义项目的排序时,数值越小,排列越靠前,默认为0
.item {order: <integer>;
}
flex-grow
属性定义项目的放大比例,默认为0,如果还有存在剩余空间,也不会放大
如果所有项目的flex-grow
属性都为1,那么它们将等分剩余的空间,如果一个项目的flex-grow
属性为2,其他项目都为1,那么前者占据的剩余空间将比其他项目多一倍。
.item {flex-grow: <number>; /* default 0 */
}
flex-shrink
属性定义了项目的缩小的比例,默认为1,如果空间不足,该项目将缩小
如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小,如果一个项目的flex-shrink
属性都为0,其他项目都为1,则空间不足时,前者不缩小,负值对该属性无效。
.item {flex-shrink: <number>; /* default 1 */
}
flex-basis
属性:定义了在分配多余空间之前,项目占据的主轴空间main size
,浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即是项目的本来的大小。
.item {flex-basis: <length> | auto; /* default auto */
}
flex
属性是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
,后两个属性可选。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto
(1 1 auto
)和none
(0 0 auto
)
align-self
属性:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性,默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
点赞、收藏和评论
我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)
我们下期见!
文章持续更新,可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 http://www.dadaqianduan.cn/#/ 已经收录,欢迎Star。
图文学习前端Flex布局相关推荐
- 前端——flex布局
本来想着每天一更,但开学事情太多了.想着自己好像也不太可能花太多时间去写博客,那就挑一些个人在物联网项目开发中用得多的知识写写哈哈哈.由于只是作为自己学习的记录,所以我的的写作风格比较随性,如有不适, ...
- 好用的前端flex布局,通用的flex布局CSS代码
我的社交恐惧症,主要来自于,收入低??? 今天看到一个图,真是人间真实: 不知道大家上班之后有没有经常写前端,反正身为后端的我是经常写前端的,尤其是调样式调的人痛不欲生,最烦人的是,还要一个像 ...
- 微信小程序学习笔记④——Flex布局[实战样例之画骰子]
✅ 关于 Flex,很多优秀的前辈已经总结过了,比如:阮一峰的<Flex 布局教程:语法篇>.知乎林东洲的<30 分钟学会 Flex 布局>等等.他们主要是基于网页的,小辈斗胆 ...
- 学习记录 flex布局(弹性盒子)flex-direction
基于学习的软件: VSCodeUserSetup-x64-1.52.1.exe Flex翻译为"弹性",通过给元素设置display属性,属性值为flex或者inline-flex ...
- 轻松学习 Flex 布局的小游戏
轻松学习 Flex 布局的小游戏 Flexbox Froggy,帮助你学习前端 Flex 布局的小游戏,难度不高,趣味性极强! Flexbox Froggy(弹性盒小青蛙)是一个帮助你快速学习前端 F ...
- 重学前端学习笔记(三十六)--Flex 布局
笔记说明 重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
- flex布局学习记录
推荐阮一峰写的flex布局博客,这里我只是说下自己的学习记录. flex布局可以实现响应式布局. 兼容性: 实现flex布局,要有父容器和子元素. 将父容器设置为display:flex. 父容器设置 ...
- flutter listview 滚动到底部_Flutter系列之Flex布局详解
PS:长期坚持是一件很难的事. Flutter 是 Google 推出的跨平台 UI 框架,可以快速地在 Android 和 IOS 上构建高质量的应用程序,其主要特点是 Flutter 具有快速开发 ...
- 移动WEB开发 之 flex布局----携程网移动端首页案例
目录 步骤 1. 技术选型 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 4. 常用初始化样式 5.注意细节!!! 6. 常见flex布局思路 7. 背景线性渐变 代码部分 HTML ...
最新文章
- 镜像处理坐标 android,Android应用开发之Android重写ImageView实现图片镜像效果的代码教程...
- python pip 安装错误 EnvironmentError: mysql_config not found
- 生成对象---工厂方法模式
- iframe 自适应高度 [记录]
- 3个人的java 实验_20165104-JAVA第三次实验
- 吸顶灯怎么固定天花板_吸顶灯怎么安装?家庭圆形吸顶灯底座安装步骤(图文解说)...
- 电钢琴插件:Applied Acoustics Systems Lounge Lizard EP-4 for Mac
- 职场中相信“付出总有回报”的人,后来都怎么样了?
- 扩散模型 (Diffusion Model) 简要介绍与源码分析
- 02.CCNA 200-301 题库_51-100
- 计算机插u盘的接口通常是,在计算机上插u盘的接口是什么标准接口
- 网络书店可行性分析报告
- 爱奇艺推出“帧绮映画MAX”标准打造高品质视听 多款电视机型获认证
- 服务器搬迁需要注意的几个地方
- python求解函数偏导数sympy
- CSS 字体新玩法之彩色字体
- 实用工具 - 小众软件
- 作为SLAM中最常用的闭环检测方法,视觉词袋模型技术详解来了
- 老挑毛 win7 linux,老挑毛u盘启动工具下载
- 【六袆 - 点赞】简历字体和字号规范