4.14怪异盒和弹性盒

怪异盒和弹性盒：
box- sizing:
属性值:
box- sizing : content - box; 常规盒模型
box- sizing: border- box: 怪异盒模型( IE盒模型)
怿异盒模型特点:padding和border都会在元素的宽高的内部，不会把盒子本身撑大

弹性盒:布局方案。
作用:控制离它最近的一层子元素，布局方式。
特点:

a:弹性盒了里而的离它最近的层了元素都可以添加大小。

b:如果想让弹性盒子里面的一个广元素左右上下居中，只需要给子元素添力margin:auto即可

C:师性盒子里面的了元东都是沿着“主轴”排列

”主轴":有可能是X轴也有可能是Y轴，如果X轴为王轴，Y轴就是侧轴。注:默认情况下X轴为主轴。

触发弹性盒子:

display:flex;

改变主轴的方向:

flex -direction:

属性值:

row(默认值: X轴为主轴)

column ( Y轴为主轴)

column- reverse(以Y轴为王轴反向排列)

row- reverse(以X轴为主轴反向排列)

改变主轴的对齐方式:

justify- content:

属性值:

flex-start ：默认状态:在弹性盒子开始的地方

flex- end：显示在弹性盒子末端对齐

center ：居中对齐

space - between：两端对齐
space - around：白动分配间距

四:侧轴的对齐方式:

align-items :flex-start flex-end center baseline

默认状态:在弹性盒开始的地方显示

基线( flex-start等效)；stretch (默认值)拉伸

五:控制弹性盒了里面的了元素(灵活元素)换行处理:

flex -wrap :

wrap

nowrap

wrap- reverse：反向换行

六:控制行与行的对齐方式:align- content:

flex-start

flex- end

center

space- between space - around

七:补充: flex-direction 和flex- wrap简写:

flex-flow: ;

注:以上7个属性全部添加在父元素弹性盒子上面!!!!!!!!!!!!!

添加在子元索上面的属性:

控制弹性盒了里面某个火活元素在侧轴的对齐方式。
align-self:
Center
flex-start
flex - end
auto默认值。元素继承它的父容器的align-items 属性。如果没有父元素容器则为stretch
stretch：元素被拉伸以适应容器。

控制子元素的排列顺序:

order:数值越大越往后排列。支持负数。二:剩余空间的分配:

flex:1;分配主轴剩余空间。

flex:1;简写形式。

flex-grow: 扩展的量;flex-shrink: 收缩的量;flex-basis: 元素的大小;

记住: flex-shrink:0;不收缩

4.14怪异盒和弹性盒

猜你喜欢