最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢??
48张图带你从0到1掌握flex布局方式。
flex布局
在某种程度上,简便我们布局的一个难题,接下来的篇幅将介绍它的使用?
flex-布局详解
要想熟练掌握flex布局的话,你需要理解两个概念:轴
和容器
?
flex布局基本概念
从上面图来看,我们将flex布局分为两部分讲,轴
和容器
。
「轴」
「容器」
打个预防针,flex布局
涉及到12个CSS属性,父容器,子容器各6个。
接下来先梳理常见的属性,不常见的放在进阶部分来梳理。
我们知道,轴
包括主轴
和交叉轴
,那么它们的方向是如何决定呢?我们直接从一张图看懂它?
flex轴的概念
默认情况下,「主轴」的方向是从左向右的,「交叉轴」垂直于主轴,逆时针方向90度,那么接下来我们看「flex-direction」是如何决定主轴的。讲这个之前,我们需要明白?
flex-direction: row | row-reverse | column | column-reverse
flex-direction取值
首先布局如下?
<div class="wrapper">
<div class="flex1">子盒子#flex1: 1 </div>
<div class="flex2">子盒子#flex2: 1 </div>
</div>
接下来,我们看看他们的效果吧?
当你给父盒子(wrapper)设置属性
flex-direction: row
效果?
flex-direction-row
「结论」
当你给父盒子(wrapper)设置属性
flex-direction: row-reverse
效果?
flex-direction-row-reverse
我们可以看到这两个盒子的位置发生了变化,这个就是主轴起点和主轴终点位置「置换」的原因。
「结论」
当你给父盒子(wrapper)设置属性
flex-direction: column
效果?
flex-direction-column
可以看到,子盒子的布局发生了变化,形成了在Y轴上的布局方式,并且书写方式跟布局一样。
「结论」
当你给父盒子(wrapper)设置属性
flex-direction: column-reverse
效果?
flex-direction-column-reverse
可以看到,子盒子的布局跟column差不多,唯一不同的是,方向上发生了变化。
「结论」
column
相同,但是置换了主轴起点和主轴终点这里就分为「父容器」和「子容器」,我们先来看看父容器?
父容器常见属性
这个属性设置在父容器上,「决定子元素在主轴方向上的对齐方式」,我们看看它们具体表现吧?
当你给父盒子(wrapper)设置属性
justify-content: flex-start
效果?
justify-content-flex-start
「结论」,子元素沿着主轴方向开始对齐。
当你给父盒子(wrapper)设置属性
justify-content: flex-end
效果?
justify-content-flex-end
「结论」,子元素沿着主轴方向终点对齐。
当你给父盒子(wrapper)设置属性
justify-content: center
效果?
justify-content-center
「结论」,子元素在主轴方向上水平居中。
当你给父盒子(wrapper)设置属性
justify-content: space-between
效果?
justify-content-space-between
「结论」,子元素在主轴方向上「两端对齐,项目之间间隔相等」。
当你给父盒子(wrapper)设置属性
justify-content: space-around
效果?
justify-content-space-around
「结论」,子元素在主轴方向上「均匀排列每个元素,每个元素周围分配相同的空间」。
这个属性设置在父容器上,「决定子元素在交叉轴方向上的对齐方式」,我们看看它们具体表现吧?
当你给父盒子(wrapper)设置属性
align-items: flex-start
align-items-flex-start
「结论」,子元素在交叉轴方向上起点对齐。
当你给父盒子(wrapper)设置属性
align-items: flex-end
align-items-flexend
「结论」,子元素在交叉轴方向上终点对齐。
当你给父盒子(wrapper)设置属性
align-items: center
align-items-center
「结论」,子元素在交叉轴方向上居中对齐。
当你给父盒子(wrapper)设置属性
align-items: baseline
align-items--baseline
「结论」,子元素在交叉轴方向上以文字基线对齐,具体不清楚的,可以自行百度。
当你给父盒子(wrapper)设置属性
align-items: stretch
align-items-stretch
「结论」,这个属性是默认的,如果项目未设置高度或者设为 auto,将占满整个容器的高度。
先看张图片
子容器常见的属性
子容器的话,这里就介绍两个属性?
flex
属性 定义在主轴是如何伸缩的flex
属性决定。align-self
属性 「单独设置子容器如何沿交叉轴排列」align-self
属性为主。注意?flex-grow flex-shrink flex-basis 这三个属性会在后续介绍
具体的flex取值问题,可以参照下面的图?
flex取值问题
// 起始端对齐
align-self : flex-start;
align-self-flexStart
// 末尾段对齐
align-self : flex-end;
align-self-flex-end
基线对齐// 末尾段对齐
align-self : baseline;
align-self-baseline
可以看到的话,它们对齐的方式是第一行文字的基线。
拉伸对齐
align-self : stretch;
align-items-stretch
上面介绍的常见几个属性掌握的话,基本上可以满足日常的开发布局需求,剩下的一些属性,接下来将梳理一遍,这样子的话,早日成为flex布局进阶者
。
flex-direction
和 flex-wrap
即可。设置子容器的换行方式,通常有三个取值?
flex-wrap: wrap | nowrap | wrap-reverse
三种情况?
// 允许换行
flex-wrap : wrap
效果?
flex-wrap-wrap
// 不允许换行
flex-wrap : nowrap
效果?
flex-wrap-nowrap
// 允许逆向换行
flex-wrap : wrap-reverse
效果?
flex-wrap-wrapReverse
先来一张图?
flex-flow取值
更多取值信息请查看
flex-direction
和 flex-wrap
可以查看MDN上,或者把之前的flex-direction
和 flex-wrap
两者取值看过一遍,那么使用这个属性就没有问题啦,这里也就不过多的举例子了,取值有三种情况?
flex-flow: row | column
flex-flow: wrap | nowrap | wrap-reverse
flex-flow: row
wrap
flex-flow: column
nowrap
这个属性是定义子容器在交叉轴的排列方式,也就是对齐方式。
首先上一张图?
align-content取值
根据这些取值,我们来看看布局效果吧?
// 起始端对齐
align-content: flex-start
效果?
align-content-flex-start
// 末尾段对齐
align-content: flex-end
效果?
align-content-flex-end
// 居中对齐
align-content: center
效果?
align-content-center
// 等间距均匀分布
align-content: space-between
效果?
align-content-space-around
// 等边距均匀分布
align-content: space-around
效果?
align-content-space-around
// 拉伸对齐
align-content: stretch
效果?
align-content-stretch
// 基线对齐
align-content: baseline
效果?
align-content-baseline
子容器弹性伸展的比例,简单理解,就是把剩余的空间按比例分配给子容器。
我们看个例子
flex-grow取值
子容器弹性收缩的比例。简单理解,就是当你子容器超出的部分,会按照对应的比例给子容器减去对应的值。
我们来看下效果?
flex-shrink-取值为0
当取值为0时,就会溢出,那么我们给它们设置一个值?
flex-shrink-取值为1
这样子的超出的部分就会按照比列减去。
有几个点需要注意的是?
flex-basis
给子容器设置大小才有作用。flex-direction:row | row-reverse
flex-basis
设置的大小为宽度,并且会覆盖witdh值flex-direction:column | column-reverse
flex-basis
设置的大小为高度,并且会覆盖height值我们来看看两种情况?
当主轴为横向时
flex-direction:row | row-reverse
效果?
flex-basis-主轴横向时
当主轴为纵向时
flex-direction:column | column-reverse
效果?
flex-basis-主轴纵向时
order
属性默认为0order
属性值,改变子容器的排列顺序。直接看效果图?
flex-order
这个时候,是不是需要总结一下呢?
先看看子容器属性?
flex-子容器属性
再看看父容器属性?
flex-父容器属性
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有