vue学习---2x3布局 用flex写

2x3布局 用flex写

 

<style>
 /*
    父盒子开启flex子元素默认一行
    弹性布局的盒子 如果不够实现 默认伸缩

**/
    .box{
        display:flex;
        flex-wrap:wrap;//强制换行
    }
    .item{
        width: 33.3333%;
        height:250px;
        display: flex;
        flex-direction: center;
        align-items: center;
        border-left: 1px solid #eee;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;//问题：添加boder后，盒子排列变成三排两列，边框将盒子挤下去了，所以用盒模型，border为盒子的width，故是我们想要的效果。
    }

</style>


<div class="box">
    <div class="item">
        <img src="/">
    </div>
    <div class="item">
        <img src="/">
    </div>
    <div class="item">
        <img src="/">
    </div>
    <div class="item">
        <img src="/">
    </div>
    <div class="item">
        <img src="/">
    </div>
    <div class="item">
        <img src="/">
    </div>
    <div class="item">
        <img src="/">
    </div>
</div>

移动端部署--网站部署

1 需要购买一台服务器2开发完代码,把build代码放到服务器就行

打包后的文件放到服务器需要注意

1 直接把build下的html css这些放到根路径 直接就行了

2 如果你是放到某个文件夹 不是直接放到根路径

那么一般你需要yarn build打包的 配置路径

如果是linux服务器 可以使用ssh或者ftp去上传html css js到服务器

如果是windows服务器 可以使用远程桌面连接或者ftp上传到服务器

2注意 vue react如果history模式下面，刷新404，就需要服务器配置路由 重写指向index.html才可以