flex布局原理-看完就会

flex布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。（在flex下众生平等）

• 在使用flex布局之后，子元素的float（浮动），clear（清除浮动）和vertical-align属性将失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item）简称“项目”。

总结：flex布局就是通过给父盒子添加flex属性，来控制子盒子的位子和排列方式。

重点=重点=重点：给父盒子添加flex属性。

flex布局常见的属性

flex父级添加的属性：

1. flex-direction:设置主轴的方向。

flex-direction：决定主轴的方向
注意：主轴和侧轴是会发生变化的，就看flex-direction设置谁为主轴，剩下的为侧轴，而且我们的子元素是根据主轴来排列的。
属性：
row：从左到右（默认）
row-reverse：从右到左
column：从上到下
column-reverse:从下到上

2. justify-content设置主轴上的子元素排列方式。

justify-content设置主轴上的子元素排列方式
属性：
flex-start：从头部开始，如果主轴是X,则从左到右（默认）
flex-end：从尾部开始排列
center:在主轴居中对齐（如果主轴是X轴则水平居中）
space-around：平分剩余空间
space-between：先两边贴边，在平分剩余空间（重点）

3. flex-wrap:设置子元素是否换行。

flex布局中是默认不换行的。如果装不开，会缩小子元素的宽度，放到父元素里面。
属性：
nowrap:(默认)不换行
wrap：换行

4. align-content：设置侧轴上的子元素的排列方式（多行）。

设置子项在侧轴上的排列方式，并且只能使用于子项出现换行的情况（多行），在单行中是不能使用的。
属性：
flex-start：在侧轴的头部开始排列（默认）
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，在平分剩余空间
stretch：设置子项元素高度平分父元素高度

5. align-items：设置侧轴上的子元素排列方式（单行）。

该属性是控制子项在侧轴上的排列方式，在子项为单项的时候使用。
属性：
flex-start：从上到下（默认）
flex-end：从下到上
center：挤在一起居中（垂直居中）
stretch：拉伸

6. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap。

flex-flow属性就是flex-direction和flex-wrap属性的复合属性
flex-flow：row warp;(沿着Y轴换行)

flex布局中子项常见属性

• flex属性定义子项目分配剩余空间，用flex来表示占多少份数。（重点）

  .item{
  flex:<数字>/default 0/
  }

• align-self:控制子项自己在侧轴上的排列方式

• order：属性定义项目的排列顺序（数值越小，排列越靠前，默认为0）注意：和z-index不一样。