#160 #160#160采用 Flex 布局的元素，称为 Flex 容器flex container，简称quot容器quot它的所有子元素自动成为容器成员，称为 Flex 项目flex item，简称quot项目quotFlex布局比较适合用于小规模的布局，比如应用。

Flex 是 Flexible Box 的缩写 ，意为“弹性布局” 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为 Flex 布局 #160 行内元素也可以二基本概念 采用 Flex 布局的元素，称为Flex 容器 它的所有子元素。

采用flex布局的元素，称为flex容器flex container它的所有子元素自动成为容器成员，称为flex项目flex item如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴main axis，纵向的称为侧轴cross axis。

1 在flex布局中，一个Flex子项的宽度是由元素自身尺寸即flexbasic设置的基础属性，以及外部填充flexgrow，收缩flexshrink，还有最大，最小尺寸限制这5个共同决定的 2 基础尺寸flexbasic，boxsizing盒模型共同决定 3。

flex布局使用范围 1如果是PC端页面布局，建议使用传统布局 2如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局 flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来。

Flex布局意为”弹性部分”，为盒模型提供最大的灵活性任何一个容器都可以指定为Flex布局displayflex行内元素也可以使用Flex布局displayinlineFlex设为Flex布局以后，子元素的floatclear和verticalalign属性。

采用Flex布局的元素，称为Flex容器flex container，简称”容器”它的所有子元素自动成为容器成员，称为Flex项目flex item，简称”项目”容器默认存在两根轴水平的主轴main axis和垂直的交叉轴cross axis。

设置img行内元素为flex布局若设置为nowarpflexwarp的默认值，由于默认值flaxbasis为auto，因此会对元素进行缩放操作，即缩放至适应盒子的尺寸 而若某个元素无法缩放例如设置了宽度则会将溢出 如果项目。

flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位 每个容器都有两根轴，分别为水平的 主轴 main axis和垂直的 交叉轴 cross axis主轴开始位置为main start，结束位置为main。

flex布局又称为弹性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用在掌握flex布局前先认识两个概念1flex container 2flex items 如。

任何一个容器都可以指定为 Flex 布局使用 flex 布局首先要设置父容器display flex，然后再设置justifycontentcenter实现水平居中，最后设置alignitems center实现垂直居中ex运行结果justifycontent和alignitems是啥。

flex布局中把一个元素作为容器，容器中的子元素称为项目 可以通过容器的flex属性，设置所有项目的排列样式也可以通过项目的flex属性，设置指定项目的排列样式2flex布局的方向 flex布局项目的排列方向可以有两个维度，一水平。

弹性布局可以响应式的实现各种页面布局，所有浏览器都支持让所有的li在ul当中垂直居中，实现如下效果如下接下来再细聊每个属性的特性任何一个容器都能使用flex布局，这里有一个flexcontainer的概念ul即为flex。

最近由于开发需要， 学习了下WeUI的实现 ， 发现里面大量使用了 flex 布局， 于是决定学习一下Flexbox Layout ， 官方名为 CSS Flexible Box Layout Module ， 意为quot弹性布局quot， 是CSS3中引入的一种更加灵活高效的布局。

flexdirection设置主轴的方向即项目的排列方向内有四个值row默认值主轴为水平方向，起点在左端rowreverse主轴为水平方向，起点在右端column主轴为垂直方向，起点在上沿 columnreverse主轴为垂直。

一般使用ReactNative开发App，一般都采用Flex布局，使用这套布局就非常快 Flex简介 Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通过Flex，就能迅速的布局容器中的成员 使用。

传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为quot弹性布局quot，它可以让你界面有很大的灵活性但是你得了解Flex。