弹性盒模型

Posted dubutianxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹性盒模型相关的知识,希望对你有一定的参考价值。

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,可负数

以上是关于弹性盒模型的主要内容,如果未能解决你的问题,请参考以下文章

弹性盒模型flex

css弹性布局是啥

彻底搞懂flex弹性盒模型布局

CSS3弹性盒模型的布局理解

03 弹性盒模型

弹性盒模型