flex布局

flex布局

和传统布局分别的使用场景

1. 传统布局

   • 兼容性好
   • 布局繁琐
   • 在移动端不能很好的布局

2. flex布局

   • 操作方便，布局极为简单，移动端应用广泛
   • PC端浏览器支持情况较差
   • IE11或更低版本不支持或仅部分支持

建议PC端布局选择传统布局，移动端或者不考虑兼容性的PC端界面，使用flex布局。

flex 布局概念

• flex 是 flexible Box的缩写，意味弹性布局。
• 为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
• 当我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align属性将会失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

flex布局原理

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

• 通过给父盒子添加flex （display：flex）属性，来控制盒子的位置和排列方式。

flex 布局常见属性

1. 父项常见属性

属性名	说明
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元素的排列方式（多行）
align-items	设置侧轴上的子元素的排列方式（单行）
flex-flow	复合属性，相当于同时设置零五flex-direction和flex-wrap

flex-direction设置主轴方向

属性值	解释说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

属性值	解释
flex-start	默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列（排列时元素末尾贴到盒子尾部，类似右浮动）
center	在主轴局中对齐
space-around	平分剩余空间
space-between	先两边贴边，在平分剩余空间

flex-wrap 设置子元素是否换行

• 默认情况下，项目都排列在一条线上（又称“轴线”）。
• flex-wrap属性定义，flex布局中默认是不换行的（不换行时，如果子元素超过父元素宽度，就会根据父元素宽度，重新给每一个子元素平均分配宽度，让所有子元素在盒子内）。

属性值	解释
nowrap	默认值，不换行
wrap	换行

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

属性值	解释
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起局中（垂直居中）
stretch	拉伸（子元素高度拉伸到父元素高度）

align-content 侧轴上子元素排排列方式（多行，对单行无效）

属性值	解释
flex-start	在侧轴头部开始排列
flex-end	在侧轴尾部开始排列
center	在侧轴中间显示
space-around	平分剩余空间
space-between	先两边贴边，在平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow

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

flex-flow：row nowrap;

flex 布局子项常见属性

属性值	解释
flex	子项目占的份数
align-self	控制子项自己在侧轴的排列方式
order	定义子项的排列顺序（前后顺序）

flex

• flex 属性定义子项目分配父盒子的剩余空间，用flex来表示占多少份数
• 属性值为数字，数字为1，表示占总份数的1份。默认值为0。

item {
    flex:<number>;
}

slign-self 控制子项自己在侧轴的排列方式

• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性
• 默认值是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于strtech

order 定义子项的排列顺序（前后顺序）

• 数值越小，排列越靠前，默认为0，数值可以为负数

flex 布局下父子元素高度

（弹性布局中的子元素即使是行内元素，也可以直接设置宽高）

1. 父元素为flex布局时：
   • 没有设置高度的子元素与父元素高度一致。
   • 如果父元素设置固定高度，则子元素中没有设置高度的元素将继承父元素的高度；但是如果父元素的align-items设置以后那么子元素的高度则会有自身内容决定
   • 如果父元素没有设置高度，其高度由最高的子元素决定。