一、弹性盒子的基本概念
弹性盒属性的使用
-
概念:在父级元素设置设置弹性盒属性(容器),所有的子级元素会在父级容器的轴向上排列(项目)
-
作用:控制所有的子级元素在父级元素上的排列位置
-
如何形成弹性盒
- 属性:display(显示方式)
- 属性值:flex(弹性布局)
-
形成弹性盒之后的特点(主轴和侧轴)
- 父级容器设置了弹性盒,会有两个轴向X和Y轴,默认是x轴为主轴,所有子级的元紊都会沿着x轴进行排列
- 主轴和侧轴是相对的关系
- 当x轴是主轴的时候,Y轴对应就是侧轴
- 当Y轴是主轴的时候,x轴对应就是侧轴
- 在弹性盒中不考虑元素类型,所有的子级元素都可以直接设置宽高大小
- 设置图片居中:给图片设置margin: auto
-
弹性盒的使用注意点
- 弹性盒兼容只能在高版本浏览器中使用
- 弹性盒不会脱离文档流,不会破坏网页布局,不存在高度塌陷的问题
- 盒模型和定位属性是可以正常使用的,但是浮动不可以用(暂且忘记)
二、设置在父级元素上的属性
可以设置在父级元素上的属性(控制所有的子级元素的位置)
一:改变主轴的排列方向(默认主轴是x轴方向)
-
属性:flex-direction
-
属性值
- row 水平方向x轴,侧轴Y轴
- column 垂直方向Y轴,侧轴x轴
二:设置主轴的对齐方式
-
属性:justify-content
-
属性值
- flex-start 主轴开始位置排列
- flex-end 主轴结束位置排列
- center 主轴的居中位置
- space-between 两端对齐,其余空间自动分配
- space-around 元素的左右空间分配是相等的
- space-evenly 所有的空间都是自动分配的
三:设置侧轴的对齐方式
-
属性:align-items
-
属性值
- flex-start 侧轴的开始位置排列
- flex-end 侧轴的结束位置排列
- center 居中位置显示
- baseline 基线对齐默认和flex-start的效果是一样的(了解)
- stretch 拉伸(了解)
四:控制子级元素换行显示(弹性盒子级超出父级的宽度默认是进行挤压的不会往下掉)
-
属性:flex-wrap
-
属性值
- no-wrap 默认值 不换行 默认进行挤压的
- wrap 换行
五:控制行与行之间的间距
-
属性:align-content
-
属性值
- flex-start 主轴开始位置排列(常用)
- flex-end 主轴结束位置排列
- center 主轴的居中位置
- space-between 两端对齐,其余空间自动分配
- space-around 元素的左右空间分配是相等的
- space-evenly 所有的空间都是自动分配的
三、设置在子级元素上的属性
设置在子级元素上的属性(控制单个子级在弹性盒中的位置)
一:控制元素的显示顺序
- 属性:order
- 属性值:默认为0 数字越大越往后显示
二:控制单个元素在侧轴上的对齐方式
- 属性:align-self
- 属性值
- flex-start/end/center 开始/结束/中间
- baseline/stretch 基线对齐/拉伸
四、flex为1的情况
移动端布局:头部、底部、中间区域(跟随用户的手机屏幕大小进行改变)
一、flex:1的情况
- 属性:flex 表示可以将弹性盒区域分为多少份
- 属性值:number 1、2、3、4、5 将一个区域分为几份进行等分
- 常用的属性值:1 表示占据主轴上剩下的所有空间
五、flex为1的推算过程
一:flex作为属性出现的时候表示占据主轴上剩下的空间,由以下三个属性复合而成
-
相对于其他元素进行扩展的量
- 属性:flex-grow
- 属性值:
- 0 空间是默认的
- 1 表示占据主轴上剩下的空间
-
相对于其他元素进行收缩的量
- 属性:flex-shrink
- 属性值
- 0 改变主轴的宽高不会被挤压
- 1 改变主轴的宽高会被挤压
-
项目的宽度(width作用一样)
- 属性:flex-basis
- 属性值:0~100%/auto
-
三个属性推算出flex:1的效果
- 默认值:0 1 auto
- 常用值:1 1 0% => 简写成flex:1
六、多列布局
<style>
section{
width: 1000px;
height: 500px;
border: 1px solid #000;
margin: 100px auto;
/* 当前的容器分为多少列 */
column-count: 3;
/* 当前列的宽度 */
/* column-width: 200px; */
/* 列和列之间的间距 */
column-gap: 50px;
/* 列的边框 */
column-rule: 5px solid #000
}
h3{
column-span: all;
text-align: center;
}
</style>
<body>
<section>
</section>
</body>
