day3-2022.12.12-flex布局初识(一)

一、完成以下布局。

　　二、代码如下：

<template>
  <div>
    <div class="title">
      MY First Flex Learn
    </div>
    <div class="box">
      <div class="item">
        <h1>Day 1</h1>
        <ul>
          <li class="li">安装环境</li>
          <li class="li">做好笔记</li>
        </ul>
      </div>
      <div class="item">
        <h1>Day 2</h1>
      </div>
      <div class="item">
        <h1>Day 3</h1>
      </div>
    </div>
  </div>
</template>
<script>

</script>
<style scoped>//scoped代表该样式只在本页面有效！
  .box{
    border: 5px solid black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 300px;
    background: gray;
  }
  .item{
    width: 30%;
    height: 200px;
    background: #7CFC00;
    border: 1px solid black;
  }
  .title{
    text-align:left;
    font-size: 30px;
  }
  .li{
    text-align: left;
  }
</style>

三、知识点总结


　　1、布局：
　　.box{
　　　　display:flex;//弹性布局
　　　　justify-content:center//定义了项目在主轴的对齐方式居中对齐
/*
1、space-around:每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
2、flex-start:左对齐
3、flex-end：右对齐
4、space-between：两端对齐，项目之间间隔相等
5、space-evenly：每个项目间隔相等，项目之间间隔与项目与边框间间隔相等

*/
　　　　align-items：center//定义了项目在交叉轴上的对齐方式居中对齐

/*
1、stretch（默认）:如果项目未设置高度或设为auto，将占满整个容器的高度
2、flex-start:交叉轴的起点对齐
3、flex-end：交叉轴的终点对齐

4、baseline: 项目的第一行文字的基线对齐

*/

　　　　text-align:left//定义文本中的对齐方式，左对齐

/*
1、right:右对齐
2、center:居中
3、justify:两端对齐
4、inherit:从父元素中继承tsxt-algin的属性值
*/
/*
flex-wrap:wrap(换行)

*/

　　　　width:100%；//长度
　　　　height:200px；//高度
　　　　border:5px solid black;//边框线
　　　　background：grey;//背景色
　　　　

　　　　

}