flex布局个人总结

<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>

.box1{

    /* 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; */

    /* 每个项目两侧的间隔相等。 */

}

.box1span{

    text-align: center;

    border:1px solid #ccc;

}

.box2{

    display: flex;

    width:100%;

}

.box2 span{

    flex-grow: 1;

    width:0;

    bordeR:1px solid #f00;

}

</style>
巴特西

flex布局个人总结

最新文章

热门文章
