伸缩布局

1. 如何摆放盒子?

让盒子一行显示 用 浮动

让盒子压着另外一个盒子 用 定位

如果要移动盒子的位置可以通过  margin 和 padding

2.可以通过伸缩布局的方式快速的解决以上问题？

给父元素设置      display: flex;

给父元素设置:    justify-content: space-between;

---

1.什么时候用伸缩布局?

在任何情况下都可以使用伸缩布局.一般情况下如果希望元素快速的一行显示,并且父元素的大小修改不会影响网页布局这种情况下,我们可以使用伸缩布局 去替代 普通布局 

2.怎么用伸缩布局?

如果要用伸缩布局,必须给其直接父元素设置 display: flex属性, 才能保证元素一行显示

3.为什么在伸缩盒子中 子元素会一行显示呢?

首先是因为在伸缩盒子中,所有的元素都是按照主轴方向显示的

只要是伸缩盒子就默认有两条轴,一条是水平显示的主轴 另外一条是 永远都要垂直于主轴的侧轴

伸缩盒子中的元素没有脱标,是因为在伸缩盒子中元素按照主轴方向显示的

4.如果希望伸缩盒子中的元素独占一行显示

修改主轴的方向就可以了

5.flex-direction 设置主轴方向的属性;  [必须记住]

row        默认主轴的方向是水平显示

column  主轴的方向变成垂直显示

注意该属性是给伸缩盒子加的

6.设置子元素在主轴方向的对齐方式 [必须记住]

justify-content: 设置子元素在主轴方向的对齐方式的

flex-start  在主轴的开始位置对齐

flex-end  在主轴的结束位置

space-between  元素两端对齐,中间自适应

space-around  元素的周围出现空白间距

center  元素居中

7. 设置元素在侧轴方向的对齐方式[必须记住]

align-items: 设置子元素在侧轴方向的对齐方式

flex-start  在侧轴的开始位置对齐

flex-end 在侧轴的结束位置对齐

center 在侧轴的中间位置对齐

stretch  沿着侧轴拉伸 (默认值)

注意: 在伸缩盒子中必须给子元素设置宽度,高度默认是拉伸的

8. 在伸缩盒子中,不管子元素有多少个,默认都一行显示

flex-wrap: 设置子元素是否换行

nowrap : 默认不换行

wrap : 代表元素要换行显示

9.设置换行后的对齐方式(多行对齐方式)[了解]

align-content: 设置元素换行后的对齐方式(必须保证元素换行后,才可以使用这个属性)

flex-start 换行后的开始位置对齐

flex-end 换行后的结束位置对齐

center 换行后居中对齐

space-between

stretch 默认值

10. flex-flow(补充了解属性)

间歇是flex-flow 是 flex-direction 属性和 flex-wrap属性的简写形式，默认值为row nowrap

例如:

flex-flow: row wrap;

---

---

---

扩展：

1.扩展-max-width-属性

max-width: 最大宽度 (如果视口比我设置的值还要大,那么元素的宽度就按照设置的值显示)

如果视口的宽度比我设置的值还要小,那么元素的宽度就按照视口的宽度显示

总结: max-width设置的宽度,永远不能比设置的值大

数学表示的方式    当前元素的宽度 <= 500px

---

2.扩展-min-width-属性

min-width: 设置元素的最小宽度(如果视口的值大于当前设置的值,那么元素的宽度就按照视口的大小显示)

如果视口的宽度小于当前设置的值,那么元素的宽度就按照设置的值显示

总结: min-width设置元素的宽度,永远不能比设置的值小

数学表示的方式    当前元素的宽度 >= 500px

---