前端样式布局flex
文章目录
- 1 布局原理
- 2 flex布局父项常见属性
- 2.1 常见父项属性
- 2.2 flex-direction设置主轴的方向
- 2.2.1 主轴与侧轴
- 2.3 justify-content 设置主轴上的子元素排列方式
- 2.4 flex-warp 设置子元素是否换行
- 2.5 align-items 设置侧轴上的子元素排列方式(单行)
- 2.6 align-content 设置侧轴上的子元素的排列方式(多行)
- 2.6 align-content和align-items区别
- 2.7 flex-flow
- 3 flex布局子项常见属性
- 3.1 flex 属性
- 4.2 align-self 控制子项在侧轴上的排列方式
- 4.3 order 属性定义项目的排列顺序
1 布局原理
flex是flexible Box的缩写,意为“弹性布局”,用来为盒装模型提供的最大的灵活性,任何一个容器都可以指定为flex布局。
- 当我们为父盒子设为flex布局以后,子元素的
float
、vertical-align
数据将失效。 - 名字:伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
采用Flex布局的元素,称为Flex容器(flex 容器),简称容器。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称“项目”
总结: 就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
2 flex布局父项常见属性
2.1 常见父项属性
flex-direction
:设置主轴的方向justify-content
:设置主轴上的子元素排列方式flex-warp
:设置子元素是否换行align-content
:设置侧轴上子元素的排列方式(多行)allign-items
:设置侧轴上的子元素排列方式(单行)flex-flow
:复合属性,相当于同时设置了flex-direction
和flexwarp
2.2 flex-direction设置主轴的方向
2.2.1 主轴与侧轴
- 默认主轴方向:X轴 = 水平
- 默认侧轴方向:Y轴 = 竖向向下
属性值 | 说明 |
---|---|
row
|
默认值从左到右 |
row-reverse
|
从右到左 |
column
|
从上到下 |
column-reverse
|
从下到上 |
div {width: 800px;height: 200px;background-color: pink;/* 给父级添加flex属性 */display: flex;/* 默认主轴为 row横(默认),column竖 */flex-direction: column-reverse;
}div span {width: 150px;height: 100px;background-color: yellow;
}
<div><span>1</span><span>2</span><span>3</span>
</div>
2.3 justify-content 设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
属性值 | 说明 |
---|---|
flex-start
|
默认值 从头部开始 如果主轴是x轴,则从左到右 |
flex-end
|
从尾部开始排列 |
center
|
在主轴居中对其(如果是x轴,则水平居中) |
space-around
|
平分剩余空间 |
space-between
|
先两边贴边,再平分剩余空间(重要) |
div {width: 800px;height: 200px;background-color: pink;/* 给父级添加flex属性 */display: flex;/* 默认主轴为 row横(默认),column竖 */flex-direction: column-reverse;/* justify-content 设置主轴上子元素的排列方式 */justify-content: center;
}
2.4 flex-warp 设置子元素是否换行
默认情况下,项目都排在一条线(又称:“轴线”)上。
定义:flex布局中默认是不换行的。
如果元素太多,会缩小子元素的宽度,放到父元素里面。
属性值 | 说明 |
---|---|
nowrap
|
默认值,不换行 |
wrap
|
换行 |
2.5 align-items 设置侧轴上的子元素排列方式(单行)
该属性是控制子项在侧轴(默认y轴)上的排列方式,在子项为单项的时候使用。
属性值 | 说明 |
---|---|
flex-start
|
默认值 从上到下 |
flex-end
|
从下到上 |
center
|
挤在一起居中(垂直居中) |
stretch
|
拉伸(子盒子不要给高度) |
2.6 align-content 设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式,并且只能用于子项出现 换行 的情况(多行)
属性值 | 说明 |
---|---|
flex-start
|
默认值在侧轴的头部开始排列 |
flex-end
|
在侧轴的尾部开始排列 |
center
|
在侧轴的中间显示 |
space-around
|
子项在侧轴平分剩余空间 |
space-between
|
子项在侧轴先分布再两头,在平分剩余空间 |
strech
|
设置子项元素高度平分元素高度 |
div {width: 800px;height: 300px;background-color: pink;display: flex;/* 换行 */flex-wrap: wrap;align-content: center;justify-content: center;
}div span {width: 150px;height: 100px;background-color: yellow;margin: 10px;
}
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
2.6 align-content和align-items区别
- align-items适用于单行情况下,只有上对齐、下对齐、居中和拉伸
- align-content适应于换行(多行)情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉升以及平均分配剩余空间等属性值。
2.7 flex-flow
flex-flow
属性是flex-direction
和flex-wrap
属性的复合属性。
例如:设置主轴和换行(换列)
flex-direction: column;
flex-wrap: wrap;
或
flex-flow: column wrap;
3 flex布局子项常见属性
3.1 flex 属性
定义子项目分配剩余空间,用flex来表示占多少份数。
.item {flex: <number>; /* default 0 */
}
例如:左右固定,中间占据剩余所有空间
section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;
}section div:nth-child(1) {width: 100px;height: 150px;background-color: red;
}section div:nth-child(2) {flex: 1;background-color: yellow;
}section div:nth-child(3) {width: 100px;height: 150px;background-color: blue;
}
<section><div></div><div></div><div></div>
</section>
三个盒子平均三等分
section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;
}section div{flex: 1;text-align: center;
}
<section><div>1</div><div>2</div><div>3</div>
</section>
4.2 align-self 控制子项在侧轴上的排列方式
align-self 属性允许单个项目有其他项目不一样的对齐方式,可覆盖align-items属性。
默认值为auto,表示集成父元素的align-items
属性,如果没有父元素,则等同于stretch
section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;
}section div {flex: 1;text-align: center;
}section div:nth-child(3) {/* 自己对齐一个位置 */align-self: flex-end;background-color: yellow;
}
<section><div>1</div><div>2</div><div>3</div>
</section>
4.3 order 属性定义项目的排列顺序
数值越小,排列越靠前,默认为0
注意:和z-index不一样
section div:nth-child(3) {flex: 1;order:-1;
}
参考地址:https://www.bilibili.com/video/BV1N54y1i7dG
前端样式布局flex相关推荐
- 前端弹性布局flex讲解
1 基本概念 css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单.方便.快速. Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大 ...
- Easyui前端样式布局
树型菜单 html代码: <ul id="menuTree"></ul> jsp实现代码: <script type="text/javas ...
- flex 左右布局_web前端学习:移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
- flex 左右布局_移动端开发常用布局:前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
- 前端布局flex从入门到入土
前端布局flex从入门到入土 作为一个后端,谈不上多会前端,但是一些常见的布局都可以做到,例如flex布局.推荐菜鸟教程的布局:https://www.runoob.com/w3cnote/flex- ...
- 前端布局 Flex(弹性)布局
1. flex布局优点 操作方便,布局极为简单,移动端应用很广泛 pc端浏览器支持情况较差 IE11或者更低版本,不支持或仅部分支持 2. flex布局原理 flex意为"弹性布局" ...
- 给你一份详细的web前端CSS布局指南,请查收
我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点,这篇文章就尽可 ...
- CSS3 flexbox 布局 ---- flex项目属性介绍
CSS3 flexbox 布局 ---- flex项目属性介绍 现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设d ...
- 小程序跳转样式布局错乱_小程序页面布局样式元素总结
1:Flex布局 Flex布局如图1所示 图1 1.1 Flex容器属性 1.1 1.2 Flex容器内元素属性 1.2 align如果定义会覆写掉容器属性中的justify-content,alig ...
最新文章
- 跨站访问如何保证session的正常使用
- 【BZOJ】2982 combination
- 【转】解决多文件编译中连接错误 multiple definition of*****
- 使用微软Outlook的收件Rule规则自动删除垃圾邮件
- windows7 系统优化大技巧
- split方法在低版本IE浏览器上无法解析的问题
- 解决MAPGIS导出数据乱码
- 计算机初级cad,CAD 初级入门
- java 实现图片转化为PDF
- android 字体加粗
- XILINX DDR3 VIVADO(二)写模块
- vue中forEach跳出循环的问题,以及for循环
- Arduino IDE+_Attiny13/85实践(四) Mind+ 与Attiny85
- selenium+python:元素定位的八种方式
- 强化学习Q-Learning解决FrozenLake例子(Python)
- Sia(Siacoin/SC/云储币)去中心化存储平台介绍
- linux-进程间通信
- 计算机保存到桌面没有显示,电脑系统进不去桌面,没有图标怎么办?
- EVO 轨迹误差分析
- 向量空间中的基底和基变换以及坐标变换
热门文章
- 蓝桥杯 十六进制转为八进制 C语言版
- golang 向上取整小技巧
- ssh远程执行服务器命令,ssh远程连接服务器执行命令
- 电商平台拼多多按关键词搜索商品接口调用展示
- 分时线的9代表什么_股票早上快速拉高然后慢慢下跌,意味着什么?不懂就别炒股...
- 键盘监听keypress、keydown、keyup
- Web性能测试的常用指标
- JAVA租房管理系统计算机毕业设计Mybatis+系统+数据库+调试部署
- 服务器碰盘故障转储 可用空间为空,【服务器】基本磁盘与动态磁盘的相互转换(精选).doc...
- Pyf20230324(Python类和对象)