弹性盒模型

Posted 2021-03-02 dubutianxia

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：右对齐

2. flex-start（默认值）：左对齐

3. center：居中

4. space-between：两端对齐，子元素之间间隔相等 元素之间的间距=(父元素的宽度-子元素宽度之和)/(子元素个数-1)

5. space-around：子元素的margin-left与margin-right均分空余区

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

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

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

2. flex-start：交叉轴的起点对齐

3. flex-end：交叉轴的终点对齐

4. center：交叉轴的终点对齐，即垂直居中

5. 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，可负数