# layout - 前端布局

**Repository Path**: oucwy/layout

## Basic Information

- **Project Name**: layout - 前端布局
- **Description**: 常见的布局实例，使用基本HTML，CSS。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-06
- **Last Updated**: 2021-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layout - 前端布局

#### 介绍
2021.8.6

常见的布局实例，使用基本HTML、CSS实现。

1. 基本上中下、左中右布局，可通过使用block、flex等CSS属性值实现。
2. 上下布局：基于block元素。如header、div、nav等元素，默认从上到下依次排列，自然形成上下布局。
3. 左右布局：依靠容器flex属性。实现左右分栏的关键，是在容器上使用CSS属性display: flex 。容器内部的元素称为flex-items。为了进一步控制flex-items, 可通过设置容器属性：

    justify-content: 实现左右更多对齐方式，如靠左（默认），靠右，居中等。

    align-items: 实现上下更多对齐方式，如上对齐，垂直居中，上下撑满（flex-items不设Height时默认）等。



#### 作者
markwy@126.com

OUC/SET Lab




#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)