灵活布局简介

1、 什么是柔性容器？只要为页面中的任何元素设置了display:flex属性，当前框就称为flex框。默认情况下，弹性框有两个轴：默认情况下水平显示的主轴和应始终垂直于主轴的侧轴（也称为横轴）。弹性框中的所有子元素都沿主轴显示。

与传统布局的区别

传统的布局基于长方体模型，并取决于显示属性、位置属性和浮动属性。对于那些特殊的布局非常不方便。

传统布局

兼容性好

复杂的布局

限制，无法在移动终端上进行良好布局

柔性布局

易于操作、布局简单、使用广泛的移动终端

PC浏览器支持较差

IE11或更早版本不支持flex或仅部分支持flex

提议

如果页面布局在PC端，则使用传统方法

如果不考虑移动终端或兼容OC，则使用flex

2、 容器和项目1.容器

具有灵活布局的元素变为灵活布局

只要元素的显示值设置为flex或内联flex，该元素将成为flex容器

2.项目

flex容器中的所有子元素自动成为容器成员，称为flex项目

flex容器中的所有flex元素都具有以下行为：

元素排列成行（flex direction属性的初始值为row）

元件从主轴的起始线开始。

图元不会在主尺寸方向上拉伸，但可以收缩

flex base属性是自动的

换行属性为norap（无换行符）

3.主轴和横轴

使用flex布局时，首先想到的是两个轴-主轴和横轴

主轴由弯曲方向定义，另一轴与之垂直。也就是说，主轴和横轴不是固定的，而是可以自己定义的。

默认情况下，水平方向是主轴，垂直方向是横轴，可以通过“弯曲方向”属性进行更改

元素成为容器后，默认情况下，元素的子元素将成为容器的项，但项目中的子元素不会，除非项目也设置为成为容器

项目设置到容器后，它还具有主轴和横轴

**注意：**为父元素设置灵活布局后，子元素的float、clear和vertical align属性将无效。

4.两个容器

容器可以设置为两个值：flex、内联flex

差别

Flex：容器成为块元素

内联flex：容器成为内联块元素，不会占用整个屏幕

3、 容器属性描述

设置主轴方向的弯曲方向

对齐内容项排列在主轴上

弹性包装项目是否换行

横轴上对齐项目的排列（单行）

在横轴上排列对齐内容项（多行）

柔性流复合属性相当于设置柔性方向和柔性包裹

来到统软云免费了解更多信息：、、、等。

统软云是一家专业和服务提供商，提供一站式移动应用解决方案，以满足您的各种需求。欢迎评估您的需求并免费获取报价。

，注册后为新手提供免费开发包