伸缩布局
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
