响应式flex布局
flex布局⽅式，设置display: flex | inline-flex 的元素为flex container容器，⼦元素为flex item项⽬。注意，设为 flex 布局以后，⼦元素的float、clear和vertical-align属性将失效。
下⾯简述容器和⼦项⽬的属性：
1. flex container容器的属性
flex-direction(项⽬排列⽅向):
row 默认 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
flex-wrap(项⽬是否换⾏):
nowrap （默认） 不换⾏
wrap 换⾏，第⼀⾏在上
wrap-reverse 换⾏，第⼀⾏在下
flex-flow(上⾯俩的合并写法):
row nowrap （默认）
justify-content(⽔平⽅向对齐⽅式)：
flex-start （默认）与⽔平轴的起点对齐，⽔平轴⽅向为从左到右时指左对齐
flex-end 与⽔平轴的终点对齐，⽔平轴⽅向为从左到右时指右对齐
center 居中对齐
space-between 两端对齐
space-around 左右边距⼀致
align-items(⼀⾏时垂直⽅向对齐⽅式):
flex-start 与垂直轴的起点对齐，垂直轴⽅向为从上到下时指向上对齐
flex-end 与垂直轴的终点对齐，垂直轴⽅向为从上到下时指向下对齐
center 居中对齐
baseline 第⼀⾏⽂字基线对齐
stretch （默认）填充
align-content(多⾏时垂直⽅向对齐⽅式):
flex-start 与垂直轴的起点对齐，垂直轴⽅向为从上到下时指向上对齐
flex-end 与垂直轴的终点对齐，垂直轴⽅向为从上到下时指向下对齐
center 居中对齐
space-between 两端对齐
space-around 上下边距⼀致
stretch （默认）填充
2. flex item⼦项⽬的属性
order(决定排列顺序，数值越⼩越靠前):
0 （默认）
数值，可为负数
flex-grow(项⽬填充剩余空间时的放⼤⽐例):
0 （默认）不放⼤
number，数字，如果所有flex item的flex-grow数值相等，将等分剩余空间，否则按各项⽬flex-grow设定的⽐例来分配剩余空间flex-shrink(flex 元素仅在默认宽度之和⼤于容器的时候才会发⽣收缩，其收缩的⼤⼩是依据 flex-shrink 的值)：
1 （默认）如果所有flex item的flex-shrink都为1，将等⽐缩⼩
0 不缩⼩
数值，不可为负数flex布局详细讲解
flex-basis(设置⾃⼰占据的空间):
auto （默认）项⽬⾃⼰内容的⼤⼩
number，⼀个长度单位或者⼀个百分⽐，例如100px该项初始就会占据100px的⼤⼩
flex(是flex-grow, flex-shrink, flex-basis的合并写法):
initial （（默认）等价于 0 1 auto ）
auto （等价于 1 1 auto）
none （等价于 0 0 auto）
flex-grow flex-shrink flex-basis 后⾯两个属性可选
align-self(设置⾃⼰的对齐⽅式):
auto （默认）按容器的align-items来
flex-start 与垂直轴的起点对齐，垂直轴⽅向为从上到下时指向上对齐
flex-end 与垂直轴的终点对齐，垂直轴⽅向为从上到下时指向下对齐
center 居中对齐
baseline 基线对齐
stretch 填充

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。