【思维导图】front-end_XMind-flex布局

flex布局详解flex布局详解说明flex 布局是CSS3中新增加的⼀套布局⽅案，属于⼀维布局模型。

flex提供了强⼤的空间分布和对齐能⼒。

想要理解和使⽤flex进⾏⽹页布局，需要先来学习和理解下⾯的⼏个概念：flex的两根轴线: 主轴和交叉轴flex容器和flex⼦元素基本概念的解释flex的两根轴线当使⽤flex进⾏布局的时候，⾸先需要了解的，就是flex的两根轴线：主轴和交叉轴。

为什么⼀定要理解这两个轴线呢，因为所有的flex属性都和这两根轴线有关系。

⼀般来说，元素在容器内部排列的顺序都是按照从左向右的顺序来进⾏排列的，⽽在flex中，决定元素排列的是主轴。

默认情况下flex中主轴上的元素排列⽅式和⾮flex情况下是⼀样的。

flex的特性，就是元素沿着主轴或者交叉轴进⾏排列。

flex容器和flex⼦元素想要使⽤flex布局⽅案，需要在容器属性上使⽤display:flex或者display:inline-flex。

⽽⼀旦设置了任意⼀个属性，那么这个标签就变成了flex容器，也可以称之为是弹性容器。

⽽相对应的，容器当中的⼦元素就变成了flex⼦元素也就是弹性⼦元素。

flex 的相应属性分类想要更⾼的学习和使⽤flex布局，需要了解flex中包含的属性。

⼀般来说，flex的属性可以分成两类:flex容器属性(flex-container)flex⼦元素属性(flex-item)所谓的flex容器属性就是将属性设置在flex容器上，⽽flex⼦元素则是将属性设置在⼦元素的⾝上。

flex容器属性flex-direction通过flex-direction属性，可以设置主轴的⽅向，它包括下⾯的⼏个值:row(默认值): 主轴为⽔平⽅向，项⽬排列起点在左端。

row-reverse: 主轴为⽔平⽅向，起点在右端。

column: 主轴为垂直⽅向，起点在上沿。

column-reverse: 主轴为垂直⽅向，起点在下沿。

Xmind思维导图学习手册XMIND是一款全球领先的“可视化思考”工具，为企业打造全新的可视化办公平台,协助用户快速捕捉创意与灵感。

通过直观、友好的图形化操作界面,将思想、策略及商务信息转化为行动蓝图,全面提升企业办公效能.灵活的可视化信息平台XMIND带来简洁灵活的可视化信息表达方式，关键业务信息将更加直接，更顺畅地在企业内部流动。

快速创建图形化的中心主题文档，通过简单的操作添加分支主题及其它相关的任务、计划和信息绘制不同思想直接的关系，向重要信息添加编号和颜色以达到突出强调的目的，使用分界线将同类思想分组，插入图标和图片以方便自己和他人浏览大图，利用空间视觉信息解释不同关键点之间的层次和关联，更加易于理解和表达。

轻松组织信息:通过拖放操作调整思路的逻辑关系和层次结构，帮助用户轻松地整理脑海中凌乱的思绪和爆炸式的信息，令您更快的开发思想,构建更完美的计划.让协作更加轻松顺畅:基于EclipseRCP的XMIND可以与MSOffice、OpenOffice无缝链接,为团队提供多样化的信息展示方式。

通过形象的头脑风暴和计划来节约时间，然后将内容导出成图像，PDF文档等，最终整合到引导项目的管理工具上.XMIND文件可以自由的分解、整合和关联。

战略目标在各个实施阶段断的分解、系化和调整,当目标完成后又可以轻松的将每个阶段的实施过程和成果整合到一起，XMIND文件图与图之间可以进行关联，添加了关联的文件局部的改动可以自动映射到其它与之建立关联的文件是提高目标管理、过程控制和改进、项目管理、时间和任务管理的有效工具。

提交功能强大的报告：使用XMIND模式将您的图形显示给他人，或者将图形内容导出到MicrosoftPowerPoint、Word中，令复杂的思想和信息得到更快的交流.最大限度地提升办公效能:XMIND能最大限度的帮助商务人士和小组在最少的时间内完成任务。

使用这些被证明有效的内容组织方法,能够提高会议效率和加快决策进程。

Flex布局总结之flex的主要属性及参数⽤法这篇笔记是系统学习flex时所记，适合复习使⽤，新⼿学习还是要配合图⽰和代码来学习更容易理解。

flex布局模型：弹性盒⼦（ Flexible Box 或 flexbox），是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。

引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的⼦元素进⾏排列、对齐和分配空⽩空间。

⾸先要弄清楚⼏个重要概念：flex-container：弹性盒⼦容器flex-items：flex-container⾥⾯的直接⼦元素叫做flex-items主轴：main axis：main start & main end & main size交叉轴：cross axis：cross start & cross end & cross size⽤在flex container上的CSS属性：flex-flow、flex-direction、flex--wrap、justify-content、align-items、align-content应⽤在flex items上的CSS属性：flex、flex-grow、flex-basis、flex-sshrink、order、align-self开启flex布局：.box { display:flex or inline-flex; } // 块级元素或⾏内元素1. flex-direction ：决定了main axis主轴⽅向，默认沿着main axis主轴从main start开始从main start开始往main end⽅向排布。

row---默认从左⾄右, row-reverse----从右⾄左, column----从上⾄下, column-reverse----从下⾄上2. justify-content：决定了flex items在主轴上的对齐⽅式flex-start-----默认与main start对齐， flex-end------与main end对齐， center-------居中对齐space-between-----两边对齐中间等分间距对齐， space-evenly-----等分间距对齐， space-around-----边距时中间距离⼀半3. align-items：决定了flex items在cross axis上的对齐⽅式normal------效果相当于stretch-----当flex items在cross axis⽅向的size为auto时，会⾃动拉伸⾄填充flex containerflex-start----默认与cross start对齐， flex-end------与cross-end对齐， center------居中对齐， baseline------基线对齐，第⼀⾏⽂本底部为基线4. flex-wrap：默认nowrap，不换⾏；wrap，换⾏。

六步绘制思维导图对于新手来说，安装完成后的首要问题是如何使用XMind，就给大家提供新手入门指导，我们以一图尽知XMind思维导图为例，帮助大家快速学会制作导图，同时了解全部XMind功能。

XMind思维导图主要由中心主题、分支主题、子主题、自由主题、外框、联系、图片等元素构成。

第一步新建XMind文件双击XMind桌面快捷方式打开XMind软件，点击菜单文件->新建空白图，会自动创建一个中心主题。

（也可以使用空白模板进行创建，这个更加方便一点）双击主题或者选中主题直接输入中心主题名称一图尽知XMind。

中心主题有点长，我们在需要换行的地方使用Shift+Enter回车键换行。

第二步添加分支主题及子主题首先，我们添加分支主题。

使用Enter键添加分支主题，输入主题，继续Enter把6个分支主题输入完成。

我们可以使用Shift+Enter换行，也可以直接拖动文本框进行换行。

分支主题添加完成后，下面添加子主题。

选中分支主题“如何制作思维导图？”使用Insert或者Tab键添加子主题按键，然后使用Enter键添加同级主题，输入其他几个子主题；之后继续把全部子主题添加完成。

继续把其余分支添加完。

除了分支主题和子主题，这个导图中还有自由主题及自由主题子主题，我们双击背景创建自由主题，继续使用使用Insert 或者Tab键添加子主题。

这样一个基本的思维导图就构架好了。

第三步插入主题附加内容我们看下参考图，里面涉及链接、图片、图标、标签、备注，这些内容我们可以通过工具栏上的命令或者使用窗口调用视图操作。

从中心主题开始操作，选中主题，添加图片：使用Ctrl+I或者点击工具栏的图片->来自文件；或者使用软件自带的剪贴画。

第一个分支主题，操作的时候我们可以使用主题后面的减号收缩其它几个分支的子主题。

添加标签：使用F3或者点击工具栏的标签命令，然后输入主题标签； 添加图标：选中主题，直接使用工具栏的图标添加；或者点击窗口->图标，调出图标视图进行添加或者修改。