分类 前端 下的文章

justify-content
flext-start(默认值)：与main start 对齐。
flex-end 与main end 对齐
center 居中
space-between flex items之间距离相等 与 main start main end 两端对齐
space-evenly
flex items 之间距离相等
flexitems 与main start main end 之间距离 等于flex items 之间的距离
space-around
flex items 之间距离相等
flex items 与 main start main end 之间距离是 flex items 之间距离一半
请输入图片描述

flex items 默认都是沿着main axis(主轴) 从main start 开始往 main end 方向排布
flex-direction 决定了 main axis 的方向，有4个取值
row (默认值)（从左到右） ，row-reverse（从右到左）， cloumn（从上到下），column-reverse（从下到上）

原有的html结构

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script type="text/javascript">  

        </script>  
        <style type="text/css">  

        </style>  
    </head>  
    <body>  

    </body>  
</html>

uni-app结构

<template>  
    <view>  
    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  

</style>

没认真看，template 里面view 必须在下面写view

错误写法----这个下面是错误的写法:

<template>  
    <view>  
    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
    </view>  
     <view>  
    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面2。  
    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  

</style>

正确的写法下面：

<template>  
    <view>  

    <view>  
    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。 
   </view> 

    <view>  
    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面2。  
    </view>

    </view>    
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  

</style>
  1. 1
  2. 2