vue.js学习笔记5--页面布局

关键词：css的页面布局

1.Flex布局的简介

Flex 是 Flexible Box 的缩写，意为”弹性布局”，flex布局可以简便、完整、响应式地实现各种页面布局。

2.Flex布局的实例

父容器都用display:flex;
子容器根据页面具体情况而定。

非等分布局

父容器都用 display:flex;
子容器用 flex:x x x;
第一个属性：等分
第二个属性：内容缩放情况
第三个属性：占位空间

.food-item
        display flex//父元素
        margin 18px
        padding-bottom 18px
        border-1px(rgba(7,17,27,0.1))
        &:last-child
          border-bottom 0px
          border-none()
        .icon
          flex 0 0 57px//子元素
          margin-right 10px

等分布局

父容器都用 display:flex;
子容器用 flex:1;。
```js
.food-item
display flex//父元素
margin 18px
padding-bottom 18px
border-1px(rgba(7,17,27,0.1))
&:last-child
border-bottom 0px
border-none()
.content
flex 1//子元素
margin-top 2px
position relative