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>

 

posted @ 2020-07-10 11:24  wuk0o  阅读(74)  评论(0)    收藏  举报