day4-2022.12.13-flex布局初识(二)

一、作业：继续完善昨天的布局，加入新的知识点。

　　1、了解父级元素与子级元素。div 类名为parent,包含三个类名为child。parent为父元素，child为子元素，flex布局需要给父元素添加dispaly:flex;(父元素中添加flex,子元素实现flex)

　　2、熟练使用justtify-content、align-items、flex-wrap属性，使用F12查看元素位置，修改属性值查看不同属性的显示位置。（参考day4天整理的属性值）

　　3、学会元素定位：在父元素添加pssition:relative;子元素添加position:absolute;（这样的作用是：子元素的left,rigtht,top,bottom值为0的时候会与父元素重合，注意设置left就不能设置right,设置top就不能设置bottom。如果父元素不添加position:relative,那么子元素的定位会基于浏览器的可视宽高定位，而不是父元素，会导致定位不准确）

　　4、父级布局学习less写法<style scoped lang="scss">

　　5、父级布局使用css中calc的计算属性，可计算值。例如一行显示3个，父元素默认为100% 那么就是calc(100%/3) 

二、作业截图

　　

 

 

 

三：具体代码展示

<template>
  <div>
    <div style="text-align: left;font-size: 20px">
      My first flex
    </div>
    <div class="parent">
      <div class="child">
        <h2>Day1</h2>
        <ul class="items">
          <li>安装环境</li>
          <li>熟悉div</li>
        </ul>
      </div>
      <div class="child">
        <h2>Day2</h2>
        <ul class="items">
          <li>初识flex</li>
          <li>学习简单布局</li>
        </ul>
      </div>
      <div class="child">
        <h2>Day3</h2>
        <ul class="items">
          <li>了解布局元素属性</li>
          <li>练习写简单布局</li>
        </ul>
      </div>
      <div class="child relative">
        <h2>Day4</h2>
        <div class="absolute">我是定位</div>
      </div>

    </div>

  </div>

</template>
<script>

</script>
<style scoped lang="scss">
  .parent{
    border: 4px solid black;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-wrap: wrap;
    background: gray;
  }
  .parent{
    .child{
      width: calc(100%/2 - 46px);
      height: 200px;
      background: #42b983;
      border: 3px solid black;
      margin: 20px;
    }
  }
.relative{
  position: relative;
}
.absolute{
  position: absolute;
  left: 50%;
  bottom: 50%;
  top: 50%;
  height: 30px;
  border: 1px solid black;
}
  .items{
    text-align: left;
  }
</style>