flex布局个人总结

超、凢脫俗 2023-02-25 03:36 1阅读 0赞

<html>
          <div class="box1">
              <span>1</span>
              <span>2</span>
              <span>3</span>
          </div >
          <div class="box2">
              <span>1</span>
              <span>2</span>
              <span>3</span>
          </div>
    </html>
    <style>
    .zong{
        /* display: flex; */   /* 块级元素flex布局 */
        /* display: inline-flex; */  /* 行列元素flex布局 */
        /* display: flex;
       flex-direction:row; */
       /* 父级左浮动 顺序*/
       /* display: flex;
       flex-direction:row-reverse; */
       /* 子级倒序  右浮动 */
       /* display: flex;
       flex-direction:column; */
       /* 子级随标签元素（块级或者行内） 顺序 */
       /* display: flex;
       flex-direction: column-reverse; */
       /* 子级随标签元素（块级或者行内）  倒序 */
        /* display: flex;
        flex-wrap: nowrap; */
        /* 不换行 不管子级的宽度，即使子级宽度超过父级宽度也不会换行。*/
        /* display: flex;
        flex-wrap: wrap; */
        /* 换行，超过父级就换行。 */
        /* display: flex;
        flex-wrap: wrap-reverse; */
        /* 只要换行子级就倒序排列，不换行还是顺序 */
        /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
        /* display:flex; */
        /* flex-flow: column wrap; */
        /* display: flex;
        justify-content:flex-start; */
        /* 左对齐（倒序） */
        /* display: flex;
        justify-content:flex-end; */
        /* 右对齐（顺序） */
         /* display: flex;
        justify-content:center; */
        /* 居中（顺序） */
         /* display: flex;
        justify-content:space-between; */
        /* 两端对齐，项目之间的间隔都相等。 */
         /* display: flex;
        justify-content:space-around; */
        /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
    }
    .box1 span{
        text-align: center;
        border:1px solid #ccc;
    }
    .box2{
        display: flex;
        width:100%;
    }
    .box2 span{
        flex-grow: 1;
        width:0;
        bordeR:1px solid #f00;
    }
    </style>