最详细Flex布局(一)，外加每个属性的案例

作用在flex container(父级盒子)上的css属性
先设置一个父盒子和三个子盒子
css:

.container{width:400px;height:400px;background:red;display: flex;}
.item1{width:100px;height:100px;background:orange}
.item2{width:100px;height:100px;background:yellow}
.item3{width:100px;height:100px;background:blue}

html

<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>

一.flex-direction决定了主轴的方向，共有4个值

• row(默认值):主轴从左到右

• row-reverse:主轴从右到左

• column:主轴从上到下

• column-reverse:主轴从下到上

   .container{
  //原来的基础上加属性
  flex-direction: row-reverse;
  }
  

.container{
 //原来的基础上加属性
 flex-direction: column;
  }

 .container{
 //原来的基础上加属性
 flex-direction: column;
  }

二.justify-content决定了子元素在父元素的对齐方式

• flex-start(默认值):以主轴的开始位置对齐

• flex-end:以主轴的结束位置对齐

• center:居中对齐

• space-between:1.子元素之间的距离相等 2.与主轴的开始，主轴结束两端对齐

• space-evenly:1.子元素之间的距离相等 2.子元素与主轴的开始，主轴的结束之间的距离等于子元素之间的距离

• space-around:1.子元素之间的距离相等 2.子元素与主轴的开始，主轴的结束之间的距离是子元素之间的距离的一半

  .container{
  //原来的基础上加属性
  justify-content: flex-end;
   }
  

 .container{
   //原来的基础上加属性
   justify-content: center;
    }

  .container{
   //原来的基础上加属性
   justify-content: space-between;
    }

   .container{
   //原来的基础上加属性
   justify-content: space-evenly;
    }

  .container{
   //原来的基础上加属性
   justify-content: space-around;
    }