flex布局，如何通过flex进行网页布局
大家好，感谢邀请，今天来为大家分享一下flex布局的问题，以及和如何通过flex进行网页布局的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
flex布局全解析
很长一段时间,我知道有 flex这个布局方式,但是始终没有去学它. 3点原因:
最近由于开发需要,学习了下WeUI的实现,发现里面大量使用了 flex布局,于是决定学习一下.
Flexbox Layout,官方名为 CSS Flexible Box Layout Module,意为"弹性布局",是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的网格布局 CSS Grid Layout Module). flex是 flexible的缩写.
任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局。
采用flex布局的元素被称为 flex容器(flex container),它的子元素即为 flex元素(flex item).
flex容器中包含两个相互垂直的轴,即主轴(main axis)和副轴(cross axis).
flex元素沿主轴从主轴起点(main start)到主轴终点(main end)依次排布.
如果flex容器包含多行flex元素,则 flex行(flex lines)沿副轴从副轴起点(cross start)到副轴终点(cross end)依次排布.
单个flex元素占据的主轴空间叫做主轴长度(main size),占据的副轴空间叫做副轴长度(cross size).
Getting Dicey With Flexbox中提到:
前一段时间同事做过 video相关的开发,踩到各种坑,因此我知道 video的支持不那么好,特别是在Android上.让我惊奇的是 flex竟然比 video的支持更好?
从 CanIUse的数据来看, flex的支持度是: 82.65%(支持)+ 14.17%(部分支持)= 96.81%,而 video的支持度是: 92.48%.浏览器对 flex的支持好像并没有特别好...
但是有微信的WeUI使用了 flex布局,我觉得在移动端 flex应该还是支持度比较高的.
所以,如果你是做移动端开发的,可以优先考虑 flex.
下面就开始介绍与 flex布局相关的属性.以作用对象分为两组,第一组作用于flex容器,第二组作用于flex元素.
注意:以下属性值都可以有 initial(该属性的默认值)和 inherit(继承自父元素),本处省略.
这类属性有6种,分别为:
注意:
注意: row和 row-reverse受到了 direction属性(默认值为 ltr,可改为 rtl)的影响.
注意:此属性只在flex容器中有多行 flex元素时才有作用.
这类属性有6种,分别为:
注意: flex元素的 float, clear和 vertical-align会失效.
当flex元素有父元素时,它的 align-self: auto即为父元素的 align-items属性;否则(无父元素时),相当于 stretch.
当有剩余空间时, flex元素会根据 flex-grow按比例分配剩余空间.
默认值 0代表,即使有剩余空间,该flex元素也不放大.
当flex容器空间不足时, flex元素会根据 flex-shrink按比例缩小.
flex-shrink为 0则表示,即使flex容器空间不足,该flex元素也不缩小.
flex-basis定义了分配剩余空间之前flex元素的初始大小,可为长度值(如 20%, 5rem等)或 auto等关键词.
flex-basis: auto表示,以 flex元素的主轴长度为 flex-basis.若flex元素的主轴长度也是 auto,则以flex元素内容(即所有子元素)的大小为 flex-basis.
除了 auto还有 content, max-content, min-content和 fit-content关键词,但是现在浏览器对它们的支持太少,可以忽略.
(敲黑板)同学们注意,这里是重点!
这里的可选值我参照了 W3C flexbox的写法.其中:
举例来说, a| [ b|| c ]包含的可能情况有 a, b, c, b c, c b.
现在回过头来再看 none| [<‘flex-grow’><‘flex-shrink’>?||<‘flex-basis’> ]就清晰多了.
注意, none是一个特殊值,相当于 0 0 auto.
另外,如果 flex中不指定:
注意: flex的初始值是 0 1 auto,即由每个 flex因子本身的默认值组成(比方说 flex-grow的默认值就是 0).
但是,如果利用 flex设置了至少一个 flex因子,那么没被设置的那些 flex因子的默认值(按grow, shrink, basis的顺序)分别是 1 1 0.
我来举几个栗子.
W3C建议使用简写形式 flex,因为它可以方便地应对下面4种常见情况.
自此,我们已经知道了 flex-grow, flex-shrink和 flex-basis的作用.根据这三个值,计算flex元素的大小只需三步:
第一步:计算元素的 flex-basis,有两种情况: 1.具体的长度值,或, 2. auto(即flex元素的大小).(这里忽略了 content等目前支持还不完善的关键词).
第二步:计算剩余空间,即剩余空间= flex容器的内部空间- flex元素flex-basis值的总和.
第三步:按照 flex因子(放大时为 flex-grow;缩小时为 flex-shrink)分配剩余空间到每个元素. flex元素的最终大小= flex-basis- flex-factor*剩余空间.
举个栗子.
假设flex容器的内部空间为 200px, flex元素的大小的总和是 160px.看起来,还有 200- 160= 40px的剩余空间,应该放大flex元素,是不是?不一定!要看它们的 flex-basis总和.
假设它们的 flex-basis总和是 300px,那么剩余空间应该是 300- 200=-100px.此时剩余空间是负数,应该以 flex-shrink对每个flex元素在 flex-basis的基础上进行缩小.
下例中,所有flex元素本身的大小为 80px,元素中为 flex值.
200px
0 1 auto
0 3 auto
0 1 150px
0 3 150px
125px
75px
你可以看到,第一行的flex元素因为设置了 flex-basis:auto,所以它们的 flex-basis就相当于元素大小,即 80px,即 flex-basis总和为 160px,不足容器的 200px空间,此时应该放大元素.但又由于元素的 flex-grow为 0,所以每个元素分配到 0* 40= 0px的剩余空间,即不放大.
第二行的flex元素设置了 flex-basis:150px,所以它们的 flex-basis总和为 300px,超过了容器的 200px空间,故按照 flex-shrink(比例为 1:3)进行缩小.由于剩余空间为-100px,所以第一个元素应缩小 25px变成 125px,第二个元素应缩小 75px变成 75px.
绝对flex:从0开始分配空间.
第一行中 flex-basis为 0,表示每个flex元素的初始大小都视为 0.此时,剩余空间就是"flex容器的大小".
相对flex:从flex元素大小开始分配空间.
第二行中 flex-basis为 auto,表示每个flex元素的初始大小都是它本身的大小.此时,剩余空间就是"flex容器的大小- flex元素大小的总和".
呃... flex的东西还是挺多的,特别是 flex因子相关的部分,得花点儿时间理解.
但是,我相信学flex是值得的,谁用谁知道!
如何通过flex进行网页布局
flex称为弹性布局，当父元素设置为flex值后子元素会自动成为其成员，再通过设置属性值来实现各种布局效果。例通过给父元素设置justify-content属性实现水平垂直居中效果
通过Flex可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展，目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。接下来将和大家分享如何通过flex进行网页布局
【推荐课程：CSS教程】
flex布局
称为"弹性盒模型"，当父容器设置了display：flex时，子元素自动成为其成员，容器默认存在两根轴：水平方向的主轴和垂直的交叉轴，项目默认沿主轴排列。
flex容器(父容器)的一些属性：
flex-direction：决定主轴的方向（即项目的排列方向）
flex-wrap：如果一条轴线排不下，如何换行
flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content：定义了项目在主轴上的对齐方式
align-items：定义项目在交叉轴上如何对齐
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
实例
flex实现水平垂直居中
*{
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
display: flex;
width: 100%;
height: 100%;
background:#eee;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 200px;
background:pink;
}效果图：
两列等高布局：
左边固定宽度，右边占据剩余宽度：
<style>
*{
margin: 0;
padding:0;
}
.grid{
display: flex;
border: 1px solid#ccc;
}
.left{
background-color:pink;
flex-basis: 200px;
}
.right{
background-color:skyblue;
flex-basis:calc(100%- 200px);
}
</style>效果图：
flex布局,看完这篇都懂了
flex布局
开启flex布局
display:flex(独占一行)
inline-flex(允许换行)
应用在flex container上的css属性
应用在flex items上的css属性
flex container的属性:
justify-content:决定了 flex items在主轴(main axis)上的对齐方式
flex-start(默认值):与main start对齐
flex-end:与main end对齐
center:居中对齐
space-between: flex items之间的距离相等.与main start,mian end两端对齐
space-evenly:flex items之间的距离相等. item与mian start,mian end之间的距离等于flex item之间的距离
space-around: flex items之间的具体相等
align-items决定了flex item在cross axis上的对齐方式
flex-wrap决定了单行还是多行
flex-flow是 flex-direction|| flex-warp的缩写
flex-flow: row-reverse等价于
flex-direction:row-reverse
flex-wrap:nowrap
align-content决定了多行flex items在cross axis上的对齐方式,用法和justify-content类似
stretch(默认值):与align-items的stretch类似在cross axis上拉伸
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐
align-self flex items可以通过设置align-self覆盖flex container设置align-items
auto(默认值):遵从flex container的align-items
stretch,flex-start,flex-end,center,baseline效果跟align-items一致
flex-shrink决定了flex items如何收缩
可以设置任意非负数字(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
每个flex item收缩的size为
flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
收缩比例= flex- shrink* flex item的base size
base size就是flex item放入flex container之前的size
flex items收缩后的最终size不能小于 min-width\min-height
flex-grow决定了flex items如何扩展
可以设置任意非负数字(正小数,正整数,0),默认值是0
放flex container在main axis方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的flex-grow综合sum超过1,每个flex item扩展的size为 flex container的剩余size* flex-grow/sum
如果所有flex items的flex-grow综合不超过1,每个flex item扩展的size为
flex container的剩余size* flex-grow
flex items扩展后的最终size不能超过max-width\max-height
举例:flex-direction为row的情况下父容器宽度 400px有三个子容器宽度均为100,
flex-grow分别为1,2,3
这样可以得出
A的宽度= 100*(1/6)+ 100= 116.66
B的宽度= 100*(2/6)+ 100= 133.33
C的宽度= 100*(3/6)+ 100= 150
若 flex-grow分别为 0.1,0.2,0.3,则结果为:
A的宽度= 100* 0.1+ 100= 110
B的宽度= 100* 0.2+ 100= 120
C的宽度= 100* 0.3+ 100= 130
flex-shrink决定了 flex items如何收缩
可以设置任意非负数组(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
每个flex item收缩的size为
flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
收缩比例= flex-shrink* flex item的base size
base size就是flex item放入 flex container之前的size
flex item收缩后的最终size不能小于min-width\min-height
举例:总容器宽度 500px一共六个子视图,
宽度分别为110,120,130,140,150,160,
shrink为1,2,3,4,5,6,
总长度:110+120+130+140+150+160= 810
总共得收缩的长度:810- 500= 310
收缩比例是 flex-shrink* item的主轴方向的size
sum= 110* 1+ 120* 2+ 130* 3+ 140* 4+ 150* 5+ 160* 6
item1的收缩比例是 110* 1需要收缩的具体为 310*(110* 1)/sum
item2的收缩比例是 120* 1需要收缩的具体为 310*(120* 2)/sum
item3的收缩比例是 130* 1需要收缩的具体为 310*(130* 3)/sum
item4的收缩比例是 140* 1需要收缩的具体为 310*(140* 4)/sum
item5的收缩比例是 150* 1需要收缩的具体为 310*(150* 5)/sum
item6的收缩比例是 160* 1需要收缩的具体为 310*(160* 6)/sum
flex-basis
设置flex items在 main axis方向的base size
auto(默认值) content取决于内容本身的size
决定flex-item最终base size的因素优先级从高到低
max-width max-height min-width min-height
flex-basis
width height
内容本身的size
flex-basis 0
flex-group 1
联合使用的效果:
flex是flex-grow flex- shrink?|| flex-basis
默认值是0 1 auto
none: 0 0 auto
感谢您的阅读！希望本文对解决您关于flex布局的问题有所帮助。如果您还有其他疑问，欢迎随时向我们提问。