小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
最近新入手了一本《css新世界》,打算向css这座大山
发起猛攻~!废话不多说,这篇是是对于flex
布局的学习笔记,加深下印象。
1.设置display:flex发生的事情:
flex子项
块状化:如span
标签可以设置尺寸了flex子项
浮动失效flex子项
支持z-index
属性flex子项
的margin
值不会合并,这个和块级别元素不同flex子项
如果被设置为绝对定位后,会脱离弹性布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex的学习</title>
<style>
.conatiner{
display: flex;
}
</style>
</head>
<body>
<div class="container">
<span style="float: left;">1</span>
<span style="z-index: 9;">2</span>
<span style="float: right;">3</span>
<span>4</span>
</div>
</body>
</html>
2.flex-warp等一些属性的理解
2.1:flex-wrap属性:
flex-wrap
主要是用来控制flex子项
是单行
显示还是换行
显示。
nowarp
:默认值,就是不换行,由此可能出现内容溢出的情况。- 内容溢出解决方案:设置子项的
max-width:100%
- 方案理解:因为
max-width
的优先级大于width
属性的优先级,让子项
尺寸从固定值,变为相对值。
- 内容溢出解决方案:设置子项的
wrap
:这个没啥好说的了,子项尺寸大了,就换行显示warp-reverse
:这个就是把换行显示的内容,再上下颠倒下。
2.2:对齐特性综述:
下面是一些通用的含义:
justify
表示水平方向的样式设置align
表示垂直方向的样式设置items
表示全体元素的样式设置content
表示整体布局样式self
表示元素自身样式的设置
由此,justify-content
就表示整体布局的水平对齐设置
其他的就不在过多阐述,用这种方式更容易理解吧,不再那么生硬的背了。
🌵Tips:
如果flex-direction
的属性值是column
或者是column-reserve
,那么flex子项
的垂直布局方式不用align-items
去控制,而是使用justify-content
。这里可以理解为justify-content
其实是控制的主轴
的布局,flex-direction
会设置主轴方向
👇:
-
flex-direction:row
:主轴方向x水平方向(直角坐标系) -
flex-direction:column
:主轴方向y水平方向(直角坐标系)
3.flex属性的深入理解
3.1:flex掩藏的友好细节
flex属性
是flex-grow
、flex-shrink
、flex-basis
3个css属性
的缩写,这个就类似background
一样,饱含着bg-color啊等等的很多属性。
下面是集中对于flex
的几种设置情况:
1
个值的情况:flex:1
:设置的是flex-grow
属性flex:92px
:设置的是flex-basis
属性
2
个值的情况:flex:1 92px
:设置的是flex-grow
属性和flex-basis
属性flex:1 1
:设置的是flex-grow
属性和flex-shrink
属性
3
个值的情况就对号入座吧😑
3.2:flex:1
、flex:0
、flex:none
以及flex:auto
flex:0
:等同于flex: 0 1 0%
,也就是basis
是0%
,表现为最小内容宽度,如果子项中内容是文字,则会出现一柱擎天
的效果flex:none
:等同于flex:0 0 auto
,表示没有
,即flex
子项没有弹性,flex-basis:auto
即基础尺寸由内容决定
,适合固定尺寸元素(无需设置width
属性)- 这个属性可以给类似
按钮
等固定尺寸的子项设置,而整体依然保持弹性
。
- 这个属性可以给类似
flex:1
:等同于flex:1 1 0%
;flex:auto
:等同于flex:1 1 auto
,这个就和名字一样,表示自动
,即flex
子项自动填满剩余空间或者自动收缩
🌵Tips:
对于flex:1
和flex:auto
,在容器尺寸不足
的情况下的表现不同:
flex:1
:表现比较腼腆
,会充分利用剩余空间,但是不会侵犯
其他子元素应有的空间flex:auto
:表现的比较霸道
,会优先扩展自己的尺寸,会侵犯其他子元素应有的空间给自己