flex布局
一、Flex布局/弹性布局:
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题
二、 flex相关的属性
设置flex布局 用display:flex必须将属性加给亲父级弹性容器(通俗点讲,弹性容器也就是亲父级元素-----必须是亲爹,爷爷都不行)
三、flex布局有两个轴一个叫主轴,一个叫侧轴
主轴也就是水平方向的轴
侧轴也就是垂直方向的轴
在弄清楚轴向的前提下,就可以给主轴或者侧轴进行子集元素的安排了
1、主轴方向子集元素安放有以下属性=取值===这里也就是解释的主轴的对齐方式
属性:justfy-content:
附上几个取值相对运行的样式图
html中的盒子嵌套关系
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
取值:
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
2、侧轴同样也有对齐方式。
属性:align-items
取值:flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
/* 结论: Flex布局中,弹性盒子会在弹性容器中被拉伸或者被挤压
弹性盒子会随着弹性容器的变化而变化 /===没有设置高度
/ 在stretch效果中,弹性盒子会沿着侧轴被拉伸直到充满整个盒子
如果弹性盒子不被拉伸则是因为盒子设置了固定高度 /
/ 在stretch效果中,要出现拉伸的话要弹性盒子不给高度才能出现 /
/ 弹性盒子有固定的大小,盒子该多大,就是多大 /
/ 弹性盒子没有固定大小,弹性盒子就是内容大小,添加stretch取值会被拉伸 */
3、flex伸缩比===此属性要加给需要设置的弹性盒子的其中一个,加给设置属性的元素本身。
属性:flex
取值:数字=整数
注意:这里只是占据父级盒子剩余的部分