当前位置: 首页 > 科技观察

我对Flexbox布局模式的理解

时间:2023-03-15 21:06:43 科技观察

Flexbox,一种CSS3布局模式,也称为弹性盒模型,用于为盒装模型提供最大的灵活性。首先,我们举个栗子。之前,我们通过这种方式实现了一个div框的水平居中和垂直居中。在已知对象高宽的情况下,以绝对百分比定位居中元素,然后通过边距偏移实现。<样式>.container{width:600px;height:400px;border:1pxsolid#000;position:relative;}.box{width:200px;height:100px;border:1pxsolid#000;position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-50px;}

如果使用后flex,很容易实现,不需要自己计算,也不需要绝对定位。flex容器只需要定义两个属性,justify-content定义flex项沿主轴的对齐方式为center,align-items定义flex项在侧轴(垂直于主轴)的对齐方式为居中,如下所示:/宽度可以任意height:100px;//高度可以任意border:1pxsolid#000;}
其实Flexbox的优秀特性不在于这些。先来一张它的属性图吧~首先我们来分析一下这张图,从第一个节点开始可以看出Flexbox是由一个Flex容器和一个Flex项组成的,容器是父元素,项是子元素。它们之间的一些关系可以表示如下:这个图可以在接下来的属性分析中使用。flex容器显示:flex当我们使用flexbox布局时,我们需要先定位flex(块级)或inline-flex(内联级)用于父容器的显示值。当使用该值时,灵活容器会为内容创建一个新的灵活格式化上下文(FFC),其上下文显示效果与BFC根元素相同(BFC特性:浮动不会闯入灵活容器,并且柔性容器的边界不会与其内容边界重叠)。flex容器不是block容器,所以一些设计用来控制block布局的属性在flex布局中是不适用的,尤其是multi-column(列)、float、clear、vertical-align这些属性。flex-direction[flex-direction]属性用于控制上图中柔性容器中主轴的方向,也决定了柔性项的方向。弹性方向:行;也是默认值,即主轴方向与法线方向相同,从左到右排列。弹性方向:行反转;与行的方向相反,从右到左排列。弹性方向:列;从上到下排列。弹性方向:列反转;从下到上排列。以上只是针对ltr的写法,rtl的写法正好相反。网页显示效果如下:flex-warp[flex-wrap]属性控制柔性容器是单行还是多行,同时也决定了侧轴的方向(新行的堆叠方向).弹性包装:nowrap;flex容器单行显示,默认值;弹性包装:包装;弹性容器多行显示;每行弹性项目的顺序是从上到下。flex-wrap:wrap-reverse;灵活的容器是多行显示的,但是每行的灵活项目的顺序是从下到上排列的。网页效果如图;flex-flow[flex-flow]属性是flex-direction(主轴方向)和flex-wrap(侧轴方向)的缩写,这两个属性决定了柔性容器的主轴和侧轴。弹性流:[弹性方向][弹性包裹];默认值是rownowrap;举两个栗子:flex-flow:row;也是默认值;主轴是行中的方向,单行显示,不换行;弹性流:行反向换行;主轴与行中的方向相反,从右到左,每行项目从上到下排列(侧轴)。网页效果如下:这里可以自己尝试不同的组合。justify-content[justify-content]用于定义灵活项目在主轴上的对齐方式。当一行上的所有灵活项都不可伸缩或可伸缩但已达到其最大长度时,该属性将对额外的空间进行分配。当项目溢出一行时,此属性还对项目的对齐方式施加一些控制。证明内容:flex-start;灵活的项目与主轴的起始位置对齐,后面的每个元素都与前一个元素相邻对齐。证明内容:flex-end;灵活的项目与主轴的结束位置对齐,前面的每个元素都与下一个元素相邻对齐。证明内容:居中;弹性项目相互对齐并以主轴为中心,第一个元素到主轴起点的距离等于最后一个元素到主轴终点的距离。以上3个分别在左对齐,右对齐和居中对齐中“捆绑”。证明内容:空格之间;弹性项均匀分布在主轴上,第一个元素靠近主轴起点,最后一个元素靠近主轴终点,其余弹性项在中间保证在两者间隔相等的情况下均分。证明内容:空间周围;拉伸项均匀分布在主轴上,第一个元素到主轴起点的距离等于最后一个元素到主轴终点的距离,并且等于中间距离的一半中间元素。.***的平均分布,这种布局在阿里体系中很常见。看demo可以更快理解:align-items[align-items]用于定义灵活项在侧轴上的对齐方式,类似于[justify-content]属性,但是方向不同。(flex-directon和flex-wrap是一对,justify-content和align-items是一对,前者分别定义了主轴和侧轴的方向,后者定义了item中的对齐方式分别为主轴和侧轴)。align-items:flex-start;flex项目在横轴起始侧的外边距靠近横轴起始点的线的一侧。对齐项目:弹性结束;横轴末端的弹性项目的外边距与横轴末端的线的末端对齐。对齐项目:居中;弹性项目的边距以横轴为中心。对齐项目:基线;如果flex项目的内联轴与侧轴相同,则此值等效于[flex-start]。在其他情况下,此值将参与基线对齐。对齐项目:拉伸;弹性项目伸展以填充整个弹性容器。此值会导致项目的边距框的大小在“最小/最大宽度/高度”属性的约束下尽可能接近行的大小。下面的demo只展示了center和stretch的栗子,其他的可以参考flex-start和flex-end。align-content[align-content]属性可以用来调整柔性容器中柔性行的对齐方式,类似于调整柔性项目在主轴上对齐方式的[justify-content]属性。只不过这里的元素是以一行为单位的。请注意,此属性对只有一行的弹性容器没有影响。使用flex-wrap:wrap时,多行效果就出来了。对齐内容:flex-start||弹性端||中心||空格||环绕空间||拉紧;对齐内容:拉伸;默认情况下,线条会拉伸以占据剩余空间。其他的可以参考[justify-content]的用法。具体图片来自w3.org官方文档;太麻烦了。我写不下去了,我摔倒了。Flex项目终于写到了flexible项目的相关属性,主要是3、order、flex(flex-grow、flex-shrink、flex-basis组合)、align-self;前两个用的比较多。有一种使用顺序。如果要在一组中设置两个元素,一个排***,一个排***。master需要设置第一个的顺序:-1;另一个是顺序:0;足够的。比如我们要控制一个容器中的4个盒子,我们希望box4是一个display,box1是最后一个display。只需要这个1234显示效果是这样的:flex[flex]属性可以用来指定组件的伸缩长度。是flex-grow(膨胀率)、flow-shrink(收缩率)、flex-basis(弹性基准值)三个属性的简称。我建议您使用缩写而不是单独使用这3个属性。flex:none|[<'flex-grow'>?<'flew-shrink'>||<'flow-basis'>]//flex-grow是必需的flex-shrink和flow-basis是可选的flex-grow:;其中number为扩展比例,无单位,初始值为0,主要用于确定应扩展多少空间与柔性容器剩余空间的比例。弹性增长:;其中number为收缩率,无单位,初始值为1,即当剩余空间为负数时,本flex项目相对于flex容器中其他flex项目的收缩空间比,收缩时收缩比会由[flex-basis]flex基础加权。弹性基础:|自动;默认为auto,即根据弹性比例计算剩余空间分配前弹性项的主轴长度的初始值。如果在“flex”缩写中省略此组件,则“flex-basis”的指定值为长度零。flex-basis用这样的图表示:align-self[align-self]用于覆盖单个flexitem上的默认对齐方式,该属性用于覆盖flex容器属性align-items对每个的对齐方式行方式。也就是说默认情况下这两个值是相等的。align-self:auto|flex-start|flex-end|center|baseline|stretch它们的使用我的观点讲了这么多,我们来看看flexbox布局的兼容性。详情可以看这个网站:caniuse(http://caniuse.com/#search=flexbox)其实PC端很看好。基本上主流的浏览器都已经可以兼容flex的使用了,只是在移动端还不行。嗯,尤其是国产浏览器,考虑到uc浏览器占多数,但是uc从图中只能看出它只兼容最老版本的flex,也就是2009版本,也就是display:box;目前flex的很多优秀特性都不能兼容它,所以我建议大家在使用的时候,如果2009版本可以满足开发需求,还是使用2009版本,这样风险更小。但是如果你想兼容多种浏览器,可以优雅的降级使用。这里推荐一个scsssass-flex-mixin,让你可以使用最好的写法并且兼容大部分浏览器。相信flexbox布局在未来的移动端会被越来越多的使用。