flex布局（基础篇）

flex父元素布局

添加flex布局

给父元素添加flex布局

	display:flex

主轴

默认主轴x轴，其余的轴就是侧轴，可以通过 flex-direction:设置主轴

  			/* 设置y轴为主轴，x就是侧轴 */
            flex-direction:column; 

            /* 设置x为主轴,y就是侧轴 */
            flex-direction: row;

justify-content

设置主轴上子元素的排列方式，在父元素上设定对齐方式

 			/* 两边贴边，然后分配剩下空间 (常用)*/
             justify-content: space-between;

示例：

 			/* 平分剩余空间 */
            justify-content: space-around;

示例：

flex-wrap

默认情况下，项目都排列在一条线(又称为 轴线’ )上,flex-wrap属性定义，flex布局默认是不换行的

注：父元素装不下子元素的情况，flex会将子元素通过缩小硬塞进父元素中去

			/* 默认不换行 */
            flex-wrap: nowrap

            /* 子元素换行 */
            flex-wrap: wrap;
<