赞
踩
本文参考:
https://juejin.cn/post/6844903474774147086#heading-1
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
两篇文章整理而成
推荐一个非常不错的布局课程:
一些常见,较为普通的布局模式主要依赖display属性+position属性+float属性,但倘若要实现一些特殊的布局,这种传统的布局方式实现起来就不是很方便。比如开发中常遇到的垂直居中布局。但flex布局具有很强的灵活性,任何一个容器都可以指定flex布局,连行内元素也可以使用flex布局。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做
main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
#父元素 {
display: flex;
justify-content: center; // 定义如何沿着主轴方向(X轴)排列子容器
align-items: center // 用于定义如何沿着交叉轴(Y轴)方向排列子容器
}
常用属性:
子容器沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半。
子容器沿主轴均匀分布,位于首尾两端的子容器与父容器贴合。
align-items是将每一行视为一个整体来处理的,相对于align-items,align-content是将多行视为一个整体来进行对齐的。
flex-direction: row
(默认值)flex-direction: row-reverse
flex-direction: column
(默认值)flex-direction: column-reverse
flex-wrap有3个值,分别是nowrap
,wrap
,wrap-reverse
flex-basis为容器设置不伸缩(压缩)情况下的默认尺寸。当主轴为横向时代表宽度,主轴为纵向时代表高度。
⚠️ 在主轴为横向时,设置了flex-basis
后,width
将会失效
如图,在子容器基准大小为300px的情况下,将剩余空间划分为6份,1份分给第一个盒子,2份分给第二个盒子,3份分给第三个盒子
改变子容器的排列顺序,覆盖 HTML 代码中的顺序,默认值为 0,可以为负值,数值越小排列越靠前。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。