一、完成以下布局。
二、代码如下：
<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：两端对齐
*/
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的属性值
*/
width:100%；//长度
height:200px；//宽度
border:5px solid black;//边框线
background：grey;//背景色
标签：flex,12,center,text,align,day3,black,对齐 From： https://www.cnblogs.com/startingpoint-fly/p/16977443.html
}