flex布局

flex布局简介

Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
可以解决元素居中问题，适配不同大小的屏幕，和移动端。

flexd的属性

有六个常用属性分别为：

• flex-direction 设置容器主轴的方向
• flex-wrap 指定 flex 元素单行显示还是多行显示
• flex-flow 是 flex-direction 和 flex-wrap 的简写
• justify-content 设置主轴上的子元素排列方式
• align-items 设置侧轴上的子元素的排列方式（单行）
• align-content 设置侧轴上的子元素的排列方式（多行）

flex-direction 设置容器主轴的方向

在 flex布局中，是分为主轴和侧轴两个方向，同样的叫法有:行和列、x轴和轴

• 默认主轴方向就是x轴方向，水平向右
• 默认侧轴方向就是y 轴方向，水平向下
  

flex-direction属性值

row （初始值）从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从上到下

flex-wrap 指定 flex 元素单行显示还是多行显示

默认情况下，项目都排在一条线(又称”轴线”)上flex-wrap属性定义，flex布局中默认是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面。

flex-wrap 属性值

nowrpa 默认值，不换行（缩小子元素宽度，放到父元素里面）

wrpa 换行

flex-flow 是 flex-direction 和 flex-wrap 的简写

flew-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow 的属性值

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

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

justify-conten 属性值

flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右

flex-end 从尾部开始排列

center 在主轴居中对齐( 如果主轴是x轴则 水平居中）
space-around 平分剩余空间

space-between 先两边贴边 再平分剩余空间( 重要)

align-items 设置侧轴上的子元素的排列方式（单行)

该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单项的时候使用。

align-items 属性值

flex-start 默认值 从上到下

flex-end 从下到上

center 挤在一起居中( 垂直居中 )

stretch 拉伸（盒子不要给高度）

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

设置子项在侧轴上的排列方式并且只能用于子项出现 换行的情况(多行)，在单行下没有效果。

align-content属性值

flex-start 默认值在侧轴的头部开始排列

flex-end 在侧轴的尾部开始排列

center 在侧轴中间显示

space-around 子项在侧轴平分剩余空间

space-between 子项在侧轴先分布在两头，再平分剩余空间

stretch 设置子项元素高度平分父元察高度