css3新增属性(弹性盒子)

弹性盒(伸缩布局)css3新增

浏览器内置布局

弹性和的作用:提供啦一套方案 最适合做一行多列的布局,也能做多行多列布局 提供两个方向
水平和垂直

大部分适用于移动端界面布局 也可以用在pc端 由于ie浏览器兼容性的问题 所以在写的时候一定要加私有前缀

写在弹性父盒子身上的属性

1.生命弹性盒子

display:flex;

2.设置主轴方向

flex-direction:row;是水平方向
flex-direction:column; 是垂直方向
flex-direction:row-reverse; 水平方向起始段和结尾进行颠倒
flex-direction:column-reverse;垂直方向起始段和结尾颠倒一下

3.设置主轴方向向上排列方式

提前:主轴左侧是 start ,右侧end
justify–content:flex-start; 左对齐 /flex-end右对齐/center是居中/space-around 两端间距是中间子项间距的一半 / space-between 两端对齐,中间间距等分/space-evenly间距环绕等分

4,设置交叉轴方向上的排列顺序 align-items
align-items:flex-start;顶项对齐/flex-end 底部对齐 / center居中 /baseline基线对齐/stretch延申,沾满;
stretch:当子项没有设置高度时,高度是有内容撑开的,此时子项取父盒子高度

5.换行属性
弹性和默认是不换行的在你进行多列布局的时候,必须要进行换行设置,才会换行
flex-wrap:wrap 换行/nowrap不换行(默认)/wrap-reverse 上线颠倒

6,align-content属性(不怎么常用,理解就行)
设置弹性盒内容在交叉轴方向上的对齐方式
align-content:flex-start 左对齐/flex-end右对齐/center居中/space-around 两端间距是中间子项间距的一半/ space-between两端对齐,中间间距等分 /space-evenly 间距环绕等分

写在弹性子项身上的属性

flex属性
是一个比例属性 没有单位 flex:n; 这里是flex是取宽度还是取高度 取决于轴的方向
flex:flex-basis flex-shrink flex-grow;
flex:2;
flex:auto 1 0;
99% 场合下遇见的都是剩余空间 前两个值是默认属性可以省略
flex:n; flex-grow:n ;

在一行多列的时候子项的宽度可以设置flex值如果是多行多列还是要设置%不要设置flex 因为不会溢出!

flex-basis
这个值是子项的默认宽度 (1. 你设置的宽度 2. 有内容撑开的高度)
这个值一般就的auto 我们不用去设置我们也不用管 浏览器会自动去计算

flex-shrink
这个值的意思是: 当子项占据父盒子溢出空间比例
溢出空间: 子项宽度 > 父盒子宽度 默认值为1

flex-grow
这个值的意思是:当前子项占据父盒子剩余的空间比例
剩余空间 :子项宽度 < 父盒子宽度
默认值为0

order 属性
设置主轴方向上的排列顺序

order:n; 不用带单位
div.box1+div.box2+div.box3;
box1: order:2;
box2: order:1;
box3: order3;

align-self
设置子项自己在交叉轴方向上的对齐方式
align-self:flex-start/flex-end/center/baseline/stretch;