前言
其实弹性盒子这个知识,与其我来讲,倒不如让你们自己在这个网址看↓↓↓
https://www.runoob.com/w3cnote/flex-grammar.html
因为我也是在这里看的。
1、什么是flex
Flex是Flexible Box的缩写,意为“弹性布局”,也被开发者们称为“弹性盒子”,这是一种为盒装布局提供最大灵活性的布局方式,任何容器(比如div、p等)都可以指定为flex布局方式。
2、flex的概念
所谓的flex布局,我理解为就是用盒子装液体。
我们通常的布局方式可以理解为往盒子里装固体,固体所占空间就是固体本身的大小,如果固体的大小超过了盒子的大小,那么他也将完全的显示出固体大小。
而弹性盒子可以将盒子内部的组件全部变为“液体”,当你为盒子里添加新组件的时候,他们会平均分配掉盒子内所有的空间(如果你没有设置他们的配比),而如果你加入的组件太多,导致了超出了盒子,那么他就会像液体一样溢出来。
将以下代码运行一遍你能更好的理解我的意思
这是弹性布局↓↓↓
这是通常布局↓↓↓
3、flex的使用方式
3.1基本使用
前面说过,在任意容器中都可以使用flex布局
/*对于块级元素*/
body{
display: flex;
}
/*对于行内元素*/
span{
display: inline-flex;
}
/*webkit内核的浏览器*/
body{
display: -webkit-flex;
}
flex布局设置在父级元素身上,但它作用于子元素,也就是说如果你的父元素是空的,那么你将看不到任何变化。这和我们平时使用的属性有很大的不同,这也是许多刚刚接触弹性布局的人常犯的错误(别问我怎么知道的,说多都是泪)
3.2、常用属性
在flex布局中,我们常用的属性有六个,分别是
1、flex-direction
2、flex-wrap
3、flex-flow
4、justify-content
5、align-items
6、align-content
下面我来一一介绍这些属性。
3.2.1、flex-direction
flex-direction属性决定主轴的方向,即决定了组件的排列方式,是从左往右排,还是从右往左排,又或是从上往下排,也可以从下往上排。
body {
flex-direction: row | row-reverse | column | column-reverse;
}
上面四个值分别是从左往右,从右往左,从上到下,从下到上
3.2.2、flex-wrap
flex-wrap属性决定了组件的换行方式,不过在一般情况下,默认属性时不换行
body{
flex-wrap: nowrap | wrap | wrap-reverse;
}
上面三个值分别是不换行,向下换行,向上换行
3.2.3、flex-flow
flex-flow属性其实就是上面两个属性的统称,(类似于我们将所有的背景属性统写为background一样),默认属性是row nowrap
3.2.4、justify-content
justify-content属性决定了主轴的对齐方式,比如你的主轴是row(即从左往右排列)那么这个属性就相当于text-align属性,而如果你的主轴是column(即从上到下排列),这个属性就相当于vertical-align。
body{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
上面五个值分别是靠主轴对齐,远离主轴方向对齐,居中,两端对齐(不包含边距),等间距对齐(包含边距)
3.2.5、align-items
align-items属性决定了主轴交叉轴的对齐方式,也就是和justify-content旋转90度的对齐方式。
body{
align-items: flex-start | flex-end | center | baseline | stretch;
}
上面五个值分别是靠交叉轴对齐,远离交叉轴对齐,居中,基线对齐(基线的概念与vertical-align的基线相同),占满交叉轴方向
3.2.6、align-content
align-content属性决定了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
body {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
上面六个值分别是靠交叉轴对齐,远离交叉轴对齐,居中,与交叉轴两端对齐,与交叉轴等间距对齐,占满整个交叉轴
4、flex的子元素属性
除了可以在父元素上设置flex的属性外,其实在flex盒子的子元素上也有可以设置的属性
4.1、order
order属性可以用来改变子元素在主轴方向的排列顺序,数值越小,排列越靠前,但是他们在html的结构中不会变化
将下面代码运行一遍,你会有更直观的感受。(按F12键查看结构)
4.2、flex-grow
flex-grow属性定义了子元素的放大比例,也就是子元素在父元素中的占比,默认值为0,即如果存在剩余空间也不放大。
运行下面代码帮助理解
4.3、flex-shrink
flex-shrink属性和flex-grow属性相反,他定义了子元素的缩小比例,默认值为1,即如果空间不足,所有子元素等比例缩小
运行下面代码有助于理解
4.4、flex-basis
flex-basis属性定义了子元素在主轴上的长度,默认值为auto,你可以理解为他就是定义了width或height,当你设定了flex-basis属性后你原本的width或height属性就会失效。
4.5、flex
flex属性就是grow、shrink、basis的缩写,默认值为0 1 auto,后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
4.6 align-self
align-self属性定义了子元素与其他元素不对齐的方式,默认值是auto,即继承了父元素align-items属性,如果没有父元素,则等同于stretch。
运行下面代码帮助理解
5、结语
flex布局方式正在逐渐成为新流行的布局方式,我也是最近才接触到的,如果我上面说的有什么不对,欢迎指出。