flex布局

flex 容器： 父元素设置了display: flex

flex 项目: flex容器内的子项目

 

flex 容器属性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

 

flex-direction : 属性控制flex项目沿着主（横轴）轴的排列方向

有四个值： flex-direction: row(从左往右排列) || column （从上往下）|| row-reverse || column-reverse

 

flex-wrap: wrap(换行排列) || nowrap(不换行排列) || wrap-reverse(换行 顺序反过来)

 

flex-flow: 是flex-direction flex-wrap 两个属性的速记属性

 

justify-content: 定义了在主轴的对齐方式

有5个值 : flex-start(左对齐) || flex-end(右对齐) || center(居中对齐) || space-betwee(两端对齐，除了第一个和最后一个flex项目的两端对齐) ||

space-around(每个flex项目具有相同的空间)

 

 

align-items 类似justify-content属性 它是控制纵轴的

有 flex-start(从顶部对齐) || flex-end(底部对齐) || center(居中对齐

) || stretch(让所有的flex项目高度和flex容器高度一样) || baseline(沿着他们自己的基线对齐)

 

align-content 适用于多行flex容器排列效果和align-items值一样，但除了baseline属性值

 

flex项目属性

order || flex-grow || flex-shirnk || flex-basis

 

order: flex 项目会根据order的值重新从低到高排序， 默认为0

 

flex-grow 和 flex-shirnk 控制flex项目在容器有多余空间如何放大和缩小，在没有额外的空间又如何缩小。他们可能接受0 或比0更大的任何正数

flex-grow 默认情况为0 表示不会增长 flex-shirnk默认值为1 是打开的

 

flex-basis 可以指定flex项目的初始大小 默认值是auto 可以取任何用于width 属性的任何值， flex-basis: 0px 不能写成 flex-basis： 0

 

flex 速记

flex 是flex-grow flex-shirnk flex-basis 三个属性的速记

flex: auto 与 flex: 1 1 auto 相同

flex: 1 与 flex: 1 1 0 相同

 

align-self 控制自己的对齐方式

有 auto || flex-start || flex-end || center || baseline || stretch

flex-end 将目标项目对齐到纵轴的末端

center 将目标项目对齐到纵轴的中间

stretch 将目标项拉伸

baseline 将目标项沿着基线对齐

auto 将目标项设置为父元素的align-items 的值 没有父元素的话 就设置为stretch

 

相对flex项目 和绝对flex项目

相对flex项目内的间距是根据它的内容大小来计算的

绝对flex 只根据flex属性来计算

 

当在flex项目上使用margin： auto 值为auto的方向会占据所有剩余的空间 但是使用margin： auto 是 justify-content