flex弹性盒布局

flex弹性盒布局

   div{
        border: 1px solid blue;
        width: 1000px;
        height: 600px;
        margin: 20px auto;
        display: flex;
        /* 设置flex布局之后，子元素float失效，定位仍然可用 */
        /* flex布局默认不换行 */
        /* 设置主轴方向 */
        /* 默认 不换行 主轴从左到右 */
         /*  flex-direction: row; */
        /* 从右到左的顺序 */
       /*  flex-direction: row-reverse; */
        /* 颠倒顺序 */
        /* 复合属性 设置主轴方向和是否换行的 *
         /*  flex-wrap: now rap; */
        
    
        /* 变换了主轴 *//* 主轴从上到下 */
        /* flex-direction: column; */
        /* 颠倒顺序 */
        /* flex-direction: column-reverse; */


        /* 换行 */
        /*  flex-wrap: wrap; */
        /* 上下行颠倒 */
        /* flex-wrap: wrap-reverse; */


        /* 定义项目在主轴上的对其方式 */
        /* 左对齐 （默认）*/
        /* justify-content: flex-start; */
        /* 右对齐*/
        /*  justify-content: flex-end; */
        /* 水平方向居中 */
        /* justify-content: center; */
        /* flex布局不像绝对定位，脱离文档流，flex设置之后还会遵守文档流 */
        /* 子元素靠边对齐 */   /* 子元素左右距离保持一样，子元素之间距离会变2倍*/
        /* justify-content: space-between; */
        /* 子元素相邻的距离保持一致 */
        /* justify-content: space-evenly; */


        /* 定义项目在交叉轴上的对齐方式 */
        /* 垂直方向居中 */
        /* align-items:center ; */
        /* 垂直方向顶部  交叉轴的起点*/
        /*  align-items: flex-start; */
        /* 垂直方向底部  交叉轴终点对齐 */
        /* align-items: flex-end; */
        /* baseline:项目的第一行文字的基线对齐 */
        /* 垂直方向按照子元素的文字所在的底部位置进行对齐*/
        /* align-items: baseline; */
        /* 如果项目未设置高度或者设置为auto，将占满整个容器高度 */
        /* align-items: stretch; */
        
      }