[TOC] # flex简介  # 2.1布局原理 flex是flexible Box的缩写,意为"弹性布局" ,用来为盒状模型提供最大的灵活性,**任何一个容器都可以指定为flex布局**。 ●当我们**为父盒子\*\*\*\*设为flex布局**以后,**子元素**的**float**、**clear**和**vertical-align**属性**将失效**。 ●伸缩布局 =弹性布局=伸缩盒布局=弹性盒布局=flex布局  ## 总结flex布局原理: **就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式** flex常见属性 以吓由6个属性是对父元素设置的 ●flex- direction :设置**主轴的方向** ●justify-content :设置**主轴**上的**子元素排列方式** ●flex-wrap :设置**子元素**是否**换行** ●align-content :设置**侧轴**上的**子元素**的**排列方式(多行)** ●align-items :设置**侧轴**上的**子元素排列方式(单行)** ●flex-flow :**复合属性**,相当于**同时设置**了**flex- direction和flex-wrap** ## flex-direction主轴方向  flex-direction属性**决定主轴的方向**(即项目的**排列方向**) 注意:主轴和侧轴是会变化的,就看**flex-direction**设置**谁为主轴**,**剩下的就是侧轴**。而我们的**子元素**是**跟着主轴来排列**的 ### flex-direction 属性 | flex-direction 属性值 | 说明 | | --- | --- | | **row** | **默认值从左到右** | | row-reverse | 从右到左 | | **column** | **从上到下** | | column-reverse | 从下到上 |  ## 3 justify-content**设置**主轴.上的子元素**排列（对齐）方式**★ justify-content属性定义了项目在主轴上的对齐方式 注意:使用这个属性之前一定要确定好主轴是哪个 | justify-content 属性值 | 说明 | | --- | --- | | **flex-start** | **默认值从头部开始如果主轴是x轴,则从左到右** | | flex- end | 从尾部开始排列 | | **center** | **在主轴居中对齐(如果主轴是x轴则水平居中)** | | **space-around** | **平分剩余空间** | | （重点）**space- between** | **先两边贴边再平分剩余空间(重要)** |  ## 4 flex-wrap设置子元素是否换行★ 默认情况下,项目都排在-条线( 又称轴线”). 上。flex -wrap属性定义, flex布局中默认是不换行的。 | flex-wrap 属性值 | 说明 | | --- | --- | | nowrap | 默认值,不换行 | | **wrap** | **换行** |  ## 5 align-items设置侧轴上的子元素排列方式(单行)★ 该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项的时候使用 | align-items 属性值 | 说明 | | --- | --- | | **flex-start** | **默认值从上到下** | | flex-end | 从下到上 | | **center** | **挤在一起居中(垂直居中)** | | **stretch** | **拉伸** | 水平居中 垂直居中 |  |  | | --- | --- | ## 6 align-content 设置侧轴上的子元素的排列方式(多行) 设置子项在侧轴.上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的。 | align-content 属性值 | 说明 | | --- | --- | | **flex-start** | **默认值在侧轴的头部开始排列** | | flex-end | 在侧轴的尾部开始排列 | | **center** | **在侧轴中间显示** | | **space-around** | **子项在侧轴平分剩余空间** | | **space-between** | **子项在侧轴先分布在两头，再平分剩余空间** | | **stretch** | **设置子项元素高度平分父元素高度** | ## 6 align-content 和align-items区别 align-items适用于单行情况下，只有上对齐、下对齐、 居中和拉伸 align-content适应于换行(多行)的情况下(单行情况下无效) , 可以设置上对齐、下对齐、 居中、拉伸以及平均分配剩余空间等属性值。 ●总结就是单行找align-items多行找align-content  ## flex-flow属性是flex-direction和flex-wrap属性的复合属性 flex- flow: row wrap ;  # flex布局子项常见属性 ## flex 属性★（子元素添加 就是分几份的意思） flex属性定义子项目**分配剩余空间**,用**flex**来表示**占多少份**数。 . item { flex: 1; /★default 0★/ } ## 4.2 align-self控制子项自己在侧轴.上的排列方式 align-self属性**允许单个项目**有与**其他项目**不一样的**对齐方式**,可覆盖align-items属性。 默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 span:nth-child (2) { align-self: flex-end; /*设置自己在侧轴上的排列方式*/ ## 4.3 order属性定义项目的排列顺序 数值越小,排列越靠前,默认为0。 注意:和z-index不一样。