本人一开始是做移动端原生开发的程序员一枚。现在原生开发实在是不咋景气，公司现在的项目基本上都是前端的项目，所以现在被调到前端，从小白一枚的角度出发分享一部分项目开发过程中用的比较多的知识吧，今天先学习一个flex布局，这个在项目中用到的实在太多了。

一、介绍

什么叫做弹性布局呢，他就是根据内容多少分配多大的控件，当内容不足时会自动的换行，去适应父布局，这也是他最大的好处 由此他可以去适配多种尺寸的页面。

二、flex结构

咱们先通过网上的一个图片看一下他的具体结构

1.使用display:flex声明一个Flex布局，这个容器称为Flex容器，其包含的子元素称为Flex项目

在Flex容器中有几个核心术语

1. 容器: 使用display:flex

在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样：

<ul class="g-contaner">
    <li></li>
    <li></li>
</ul>

flex是Flexible Box的缩写，意思为“弹性布局”，在使用过程中简单、易用、代码较少，在制作网页的时候经常使用这种方法来进行布局。

在使用的过程中任何一个容器都可以指定为Flex布局.{display:flex},行内元素也可以使用Flex布局.box{display:inline-flex;}。当我们将容器设置为Flex布局以后，容器当中的子元素的float、clear等属性会失效。采用Flex布局的元素，称为Flex容器，他的所有子元素自动成为容器成员，称为Flex项目。

一、什么是 flex 布局

Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。

二、基本概念

1.什么是 flex 容器（flex container）？采用 flex 布局的元素，称为 flex 容器。

2.什么是 flex 项目（flex item）？

要使 div

昨天学习了部分flex布局的属性，今天在学习几个项目中用的比较多的flex属性：

align-self 子元素位置属性

这个属性时对之前align-items属性的一个补充，align-items属性时设置父元素对子元素的交叉轴上的位置控制，而align-self属性是控制子元素自己相对于父元素的位置。

他的取值有6个：auto（默认） | flex-start | flex-end | center | baseline | stretch;