欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

弹性盒模型

程序员文章站 2022-07-03 13:14:36
flexbox 通过给父级添加display: flex; 使父级变成一个弹性盒模型,以此来影响后代元素(不会影响自身) 设置过弹性盒模型的父级,其子代一般不会超出父元素的内部范围,除非被内容撑开子元素的宽高,导致无法改变子元素的大小时会超出,(注意:一串数字或一串字母写在一起会被浏览器默认为一个字 ......

flexbox 

通过给父级添加display: flex;  使父级变成一个弹性盒模型,以此来影响后代元素(不会影响自身)

设置过弹性盒模型的父级,其子代一般不会超出父元素的内部范围,除非被内容撑开子元素的宽高,导致无法改变子元素的大小时会超出,(注意:一串数字或一串字母写在一起会被浏览器默认为一个字符,不会默认换行)

默认子元素同排显示(按主轴方向排布),当父级宽度有剩余时,子代正常显示,当子代宽度超过父级时,等宽度比去分配子代宽度

默认子代高度100%宽度为零,与倒置的标准文档流极度相似,类似宽高对调

一、因为子元素时按照主轴方向排列的,所以我们需要改变主轴方向来改变排列方式

flex-direction(主轴方向):

1. row(默认值):主轴横向,从左向右

2. row-reverse:主轴横向,从右向左

3. column:主轴纵向,自上向下(变的和标准文档流一样默认width:100%)

4. column-reverse:主轴纵向,自下向上(变的和标准文档流一样默认width:100%)

二、因为子元素在弹性盒模型里默认不换行,需要设置 flex-wrap 来使它换行

flex-wrap:

1.wrap:换行,虽然换行但是会在评分父级高度处换行(flexbox中处处可见均分),且如果子元素的总宽度大于父元素,超出的子元素将到下一行显示,子元素宽度不会重置,如果子元素的总高度大于父元素,则元素会超出父元素边界

三、在主轴的排列方向 justify-content 主轴起点为mian start,终点为mian end

在不动主轴的情况下justify-content:

1. flex-end:右对齐

  1. flex-start(默认值):左对齐

3. center:居中

4. space-between:两端对齐,子元素之间间隔相等 元素之间的间距=(父元素的宽度-子元素宽度之和)/(子元素个数-1)
  1. space-around:子元素的margin-left与margin-right均分空余区

四、交叉轴的排列方向 align-items

align-items:除1外其他的都会破坏默认高度100%

1. stretch(默认值):如果项目未设置高度或者设成auto,将占满整个容器的高度

  1. flex-start:交叉轴的起点对齐

  2. flex-end:交叉轴的终点对齐

  3. center:交叉轴的终点对齐,即垂直居中

  4. baseline:所有子代的第一行文字的基线对齐,满足全部的文字基线准则,注意当子代为空时会被认为和图片一样,底部会照着基线排列进而影响美观

五、交叉轴排列方向2 align-content 可以很好的解决二中的问题

align-content:

  1. stretch(默认值):各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。在其它情况下,剩余空间被所有行平分,以扩大它们的高度尺寸。

  2. center:元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐

  3. flex-start:元素位于容器的开头

  4. space-between:各行在弹性盒容器中平均分布(主要表现在宽),未设置高度的会自动变成该行最高的子代的高度

  5. space-around:各行在弹性盒容器中平均分布(主要表现在高),两端保留子元素与子元素之间间距大小的一半

  6. flex-end:元素位于容器的底部

六、弹性增长因子(必须是父级宽度有剩余时才有效,否则没法增长)

flex-grow (弹性增长因子):number(填数字);/定义项目的放大比例(默认为0) 即如果存在剩余空间,也不放大/

该css属性设置子元素在弹性容器的具有剩余空间是应该如何分配给元素。flex-grow剩余空间是flex容器的大小减去所有lex项目的大小。如果所有兄弟项目具有相同的弹性增长因子,则所有项目将获得相同的剩余空间份额,否则将根据不同弹性增长因子定义的比率进行分配。

七、弹性缩小因子(解决子元素总宽大于父级时,如何缩小的问题)

flex-shrink (弹性缩放因子) :number; /定义项目的缩小比例,即如果空间不足,该项目将缩小(默认为1);/

弹性增长因子:当父级元素的宽大于子元素的宽和时,可以利用弹性增长因子.
(无负值)把父元素剩余的空间合理应用,按弹性增长因子的比例给子元素加宽

弹性缩小因子:当父级元素的宽小于子元素的宽和时,可以利用弹性缩小因子.
(无负值)把子元素溢出的空间合理应用,按弹性缩小因子的比例给子元素减宽

八、flex属性(复合写法)

flex属性是flex-grow, flex-shrink flex-basis的简写,默认值为 0 1 auto。后两个属性可选

flex: flex-grow  flex-shrink flex-basis(初始宽度);

1. auto 计算值为 1 1 auto

2. initial: 计算值为 0 1 auto

3. none:计算值为 0 0 auto

4. inherit:从父元素继承

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值,方便不用计算

九、order属性:整数值;

属性定义子元素的排列顺序,数值越小越靠前。默认为0,可负数