一.怪异盒模型
css3属性: box-sizing: border-box; //不会改变设置的宽高.
//标准盒模型 box-sizing: content-box;
height: 300px;
background: palegreen;
padding-left: 37px;
padding-right: 12px;
padding-top: 12px;
padding-bottom: 7px;
border: 3px solid #000;
/* 怪异盒模型 */
box-sizing: border-box;
二.弹性盒
弹性盒由弹性容器(Flex container)和弹性子元素(Flex item)组成.
1.弹性容器 :设置display:flex (类似块元素) 或inline-flex(类似行内块)
//弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行.
<style>
.box{
width: 500px;
height: 500px;
background: salmon;
display: flex;
}
section{
width: 100px;
height: 100px;
background: palegreen;
box-sizing: border-box;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<!-- <section></section> -->
</div>
</body>
2.修改排列方式 flex-direction
/* 默认值横向 */
flex-direction: row;
/* 横向逆向 像是右浮 */
flex-direction: row-reverse;
/* 竖向 */
flex-direction: column;
/* 竖向逆向 */
flex-direction: column-reverse;
3.jusity-content
justify-content: flex-start | flex-end | center | space-between | space-around
center
4.align-items
align-items
设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch
5.flex-wrap
flex-wrap 属性用于指定弹性盒子的子元素换行方式
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
nowrap - 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse -反转 wrap 排列。
display:flex;
flex-wrap:wrap;
6.拓展 flex-flow: 主轴方向,是否折行
7.align-content属性
align-content
属性用于修改 flex-wrap
属性的行为。类似于 align-items
, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
/* 7.多行项目测轴对齐方式 */
/* 两端顶格对齐 */
align-content: space-between;
/* 两端环绕对齐 */
align-content: space-around;
/* 两端等距对齐 */
align-content: space-evenly;
}
8.align-self
align-self
属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。
align-self: auto | flex-start | flex-end | center | baseline | stretch
9.flex
flex
属性用于指定弹性子元素如何分配空间。