一、弹性盒子:布局方案。
①作用:控制离它最近的一层子元素,布局方式。
②特点:
a:弹性盒子里面的离它最近的一层子元素都可以添加大小。
b: 如果想让弹性盒子里面的一个子元素左右上下居中,只需要给子元素添加margin:auto即可
c: 弹性盒子里面的子元素都是沿着“主轴”排列
③注:a."主轴":有可能是X轴也有可能是Y轴,如果X轴为主轴,Y轴就是侧轴。
b.默认情况下X轴为主轴。
二、父元素弹性盒子添加:
1)触发弹性盒子:
display:flex;
2)改变主轴的方向:
①属性:flex-direction:
②属性值:
row (默认值:X轴为主轴)
column (Y轴为主轴)
column-reverse (以Y轴为主轴反向排列)
row-reverse (以X轴为主轴反向排列)
3)改变主轴的对齐方式:
①属性: justify-content:
②属性值:
flex-start 默认状态:在弹性盒子开始的地方显示
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 两端对齐
space-around 自动分配间距
4)侧轴的对齐方式:
①属性:align-items:
②属性值:
flex-start 侧轴开始的位置
flex-end 侧轴结束的位置
center 侧轴居中的位置
baseline 基线(flex-start等效)
stretch(默认值) 拉伸
5)控制弹性盒子里面的子元素(灵活元素)换行处理:
①属性:flex-wrap
②属性值:
wrap 换行
nowrap 不换行
wrap-reverse 反向换行
6)控制行与行的对齐方式:
①属性:align-content
②属性值:
flex-start 默认状态:行与行之间不存在默认的行间距
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 两端对齐
space-around 自动分配间距
7)补充:flex-direction 和 flex-wrap简写:
属性:flex-flow:;
三、添加在子元素上面的属性:
1)控制弹性盒子里面 某个 灵活元素 在侧轴的对齐方式。
①属性:align-self:
②属性值:
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
2)控制子元素的排列顺序:
①属性:order: 数值越大越往后排列。支持负数。
3)剩余空间的分配:
①flex:1; 分配主轴剩余空间。
②flex:1; 简写形式。
flex-grow:; 扩展的量
flex-shrink:; 收缩的量
flex-basis:; 元素的大小
记住:flex-shrink:0; 不压缩。