css display弹性盒子的使用

父元素常用属性

/*display: flex; 设置父元素是一个弹性盒 子元素会自动水平排列*/
    <style>
        #box1{
            width: 800px;
            height: 60px;
            border: 1px solid blue;
            display: flex;
        }
        #box1>div{
            width: 200px;
            height: 60px;
            border: 1px solid green;
     </style>

设置或者检索水平对齐方式justify-content

/*justify-content: flex-end; 项目位于容器的结尾*/
	<style>
         display: flex;
         justify-content: flex-end;
         /*justify-content: flex-start; 默认项目位于容器的开头 */
         /*justify-content: center;  项目位于容器的中间*/
         /*justify-content: space-between;  项目中间平分空白 两边到头*/
         /*justify-content: around;  项目中间两边都有空白*/
    </style>

设置或者检索水平垂直方式 align-items

/*align-items: center 水平垂直居中*/ 
	<style>
         display: flex;
         justify-content: space-between;
         align-items: center;/*居中*/
         align-items: stretch;/*默认项目被拉伸以适应容器*
		 /*align-items: start; 开头*/
		/* align-items: end; 结尾*/
    </style>

flex-wrap 让弹性盒元素在必要的时候拆行

	<style>
         display: flex;
		 flex-wrap:nowrap; /*默认不换行*/
		 min-width:960px;/*窗口最小缩到960px 不加可以一直缩小*/
		  /*flex-wrap:wrap;必要的时候换行换行*/
		  /*flex-wrap:wrap-reverse;必要的时候反着换行*/
    </style>

子元素常用属性

<style>
/* 一个 数字，规定项目将相对于其他灵活的项目进行扩展的量 默认值为0 */
        #box1>div:first-child{
            flex-grow: 1;
        }
        #box1>div:nth-child(2){
            flex-grow: 3;
        }
        #box1>div:last-child{
            flex-grow: 1;
        }
</style>