Flex布局常用属性用法

以这个布局为例

<div class="father"> 
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
    </div>
    
    <style>
.father{
  width: 500px;
  margin: 0 auto;
}
.father div{
  width: 100px;
  height: 100px;
  background: pink;
  margin: 5px;
}
</style>

父盒子添加display:flex

此时子盒横向排列，且宽度均分

父盒子添加flex-wrap:wrap

此时子盒占满父盒子宽度后可以自动换行，且宽度恢复

父盒子添加justify-content

justify-content : flex-start 默认左对齐

justify-content : flex-end 右对齐

justify-content : center 居中对齐

justify-content : space-between 两端对齐，上下行两端盒子对齐

justify-content : space-around 两端对齐

父盒子添加align-content

//添加了高度
.father{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  background: black;
}

flex-start 默认上对齐

flex-end 向下对齐

flex-center 居中对齐

space-between 两端对齐

space-around 两端对齐，两端有距离

给子盒子设置宽度flex-basic

给第一个子盒子50%的宽度