轻松掌握FLEXBOX布局_属性设为_引入并使用子组件在父组件中引入并使用子组件

一、轻松掌握FLEXBOX布局

1. 设置容器属性：把容器的`display`属性设为`flex`，这样它就变成弹性容器了。
2. 控制排列方向：用`flex-direction`属性来决定子元素是水平排还是垂直排，默认是水平排。
3. 水平对齐：用`justify-content`来让子元素在水平方向上左对齐、居中对齐、右对齐或者两边间距平均。
4. 垂直对齐：用`align-items`来让子元素在垂直方向上顶部对齐、垂直居中或者底部对齐，还能拉伸子元素填满容器的高度。

二、 Grid布局大显身手

1. 设置容器属性：将容器的`display`属性设置为`grid`。
2. 定义行列：用`grid-template-columns`和`grid-template-rows`来定义行和列的数量和大小。
3. 设置间距：用`grid-gap`属性来定义网格单元之间的间隔。
4. 控制子元素：使用`grid-column`和`grid-row`属性来控制子元素的跨度和行数。

三、Element UI，布局更简单

1. 安装Element UI：用npm或yarn安装。
2. 引入Element UI：在你的项目中引入Element UI。
3. 使用布局组件：Element UI提供栅格布局和弹性布局组件，方便你快速搭建页面。

四、响应式设计，适配各种屏幕

1. 使用媒体查询：根据屏幕宽度来调整布局和样式。
2. 使用百分比和相对单位：用百分比和em、rem等单位来设置元素尺寸，适应不同屏幕。
3. 响应式UI框架：使用Bootstrap、Foundation等框架提供的工具，快速实现响应式设计。

五、组件化设计，提高效率

1. 创建组件：创建一个新的Vue组件文件。
2. 引入并使用子组件：在父组件中引入并使用子组件。
3. 组件通信：使用props传递数据，使用events传递事件。