flex布局
Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
一: flex布局和传统布局的对比
1.1 传统布局
- 兼容性好
- 布局繁琐
- 局限性,不能在移动端很好的布局
1.2 flex布局
-
操作简单,感受众多个flex布局属性的迷人魅力,移动端使用广泛
容器属性:
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
元素属性:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
flex,属性好多,每个属性还有好多属性值,好多不会的英文单词,好难啊!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hc79hg6E-1590666008733)(C:\Users\Abel\Desktop\P1\讲义图片\flex_1.jpeg)]
-
不考虑IE以及低端安卓机兼容的情况下,可以放心大胆的使用
二: flex弹性盒模型
对于某个元素只要声明了display:flex,那么这个元素就成为了弹性容器,具有flex弹性布局的特性。
- 每个弹性容器都有两根轴,主轴和交叉轴,两轴之间成90度关系。
- 每根轴都有起点和终点,这对于元素的对齐非常重要
- 弹性容器中的所有子元素都成为<弹性元素>,弹性元素永远沿主轴排序
- 弹性元素也可以通过display:flex设置成另一个弹性容器,形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素
三: 主轴
flex布局是一种一维布局模型,一次只能处理一个维度(一行或者一列),大部分属性作用于主轴,交叉轴很多时候被动的跟着主轴的变化而变化。
3.1 主轴的方向
我们再弹性容器上通过flex-direction修改主轴的方向。如果主轴方向改变了,那么:
①、交叉轴就会相应的旋转90度。
②、弹性元素的排列方式也会发生改变,因为弹性元素永远沿主轴排列
flex-direction属性,属性值: | 效果 |
---|---|
row(默认值) | → |
column | ↓ |
row-reverse | ← |
column-reverse | ↑ |
@问题:弹性元素永远沿主轴排列,那么如果主轴排不下去呐?
3.2沿主轴的排列处理
主轴排列方式:
flex-wrap属性,属性值: | 效果 |
---|---|
nowrap(默认) | 不换行 |
wrap | 换行 |
wrap-reverse | 反向换行 |
3.3 复合属性
flex-flow = flex-drection + flex-wrap
flex-flow相当于规定了flex布局的工作流(flow)
例:
flex-flow:row nowrap;
@情景再现:
当flex-wrap: nowrap
不折行的时候,容器宽度有剩余或者不够分,弹性元素该如何进行应对,体现出它们弹性元素的特征
四: 元素如何弹性伸缩应对
应对武器**,特定情境下生效**的武器:
4.1 flex-shrink:缩小比例
默认值是1
武器实战→
容器缺少宽度:100px
分成每份:10
元素缩小为:100-16.66
4.2 flex-grow:放大比例
默认值:0
武器实战→
容器剩余宽度:100
分成每份:25
元素放大为:125
@情景再现:如果,我们需要再弹性盒子中加入一个一定要显示出来的元素,在宽度富裕的时候有固定值,在宽度不够的时候,借其他元素的也一定要优先给它,让它显示出来,比如 logo。
五: 弹性处理与刚性尺寸
如何简单暴力的规定元素尺寸:
我们已经知己知彼的属性:width,height
flex为我们提供的属性:flex-basis
5.1 公正的执行者,width/height
资源(宽度)不够或者富裕的时候,是多少就是多少
5.2 再苦也先紧着孩子的父母,flex-basis
资源(宽度)不够时,借也要给足基本需求,富裕时,也不放纵,该是多少就是多少
5.3 条件模拟:
1.当width以及flex-basis都为0的时候
- width: 0 ——就是零
- flex-basis: 0 ——依旧显示文字
2.当width以及flex-basis都不为0的时候
- width: !0 ——50
- flex-basis: !0 ——50
总结 :
3.flex-basis 为auto
当flex-basis为auto时,如果设置了width,则元素尺寸由width决定,如果没有设置则由内容决定
重难点
5.4 第二个复合属性flex
flex = flex-grow + flexshrink + flex-basis
常用简写:
flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto
@情景再现:我们学习浮动的时候,有左浮动右浮动,可以控制元素的浮动方式,那么flex可以控制弹性元素的对齐方式嘛?
@问题:浮动属性是给谁加的,浮动元素本身还是它的父级元素?
六:容器内,弹性元素的对齐方式
如何对齐,是弹性元素处理的一个重要部分,对齐方式,分别作用在主轴和交叉轴来设置的
6.1 主轴上的对齐方式
justify-content属性,属性值 | 效果 |
---|---|
flex-start默认 | 从左往右 |
flex-end | 从右往左 |
center | 居中 |
space-between | 先置于两边,然后再平分剩余空间 |
space-around | 直接平分剩余空间 |
6.2 交叉轴上的对齐方式
主轴只是一个方向,还较为好理解,在交叉轴上,则涉及了单行或多行的两种情况。
交叉轴上的单行对齐
align-items属性,属性值 | 效果 |
---|---|
stretch | 拉伸 |
flex-start(默认) | 开始 |
flex-end | 结尾 |
center | 居中 |
baseline | 文字对齐 |
@问题:如何让弹性元素多行排列,形成多行的情况?
交叉轴上的多行对齐
align-content属性,属性值 | 效果 |
---|---|
stretch | |
flex-start | |
flex-end | |
center | |
space-between | |
space-around |
@思考:在多行的情况下,同时设置多行对齐和单行对齐,弹性元素听谁的?
@情景:如何让某个元素与众不同脱颖而出,脱离原本的对齐方式?
6.3 单个元素的对齐方式
align-self属性,属性值 | 效果 |
---|---|
stretch | |
flex-start | |
flex-end | |
center | |
baseline |
观察可得:
七: 排序
order,设置元素间的排列顺序
- 数值越小,越靠前,默认为0
- 值相同时,以dom中元素排列为准