flex布局全部属性

介绍

flex布局是web开发中使用最多的布局方案
flex布局：弹性布局
目前特别是移动端用的最多，pc端也越来越多

flex container和flex items

flex container是开启弹性布局的元素
flex items是flex container里面的直接元素

.box{
      display: flex;
    }

<div class="box">
  <div class="box">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>
</div>

开启flex布局方式：
display：flex（块级元素）或者display：inline-flex（行内元素）
即.box为flex container，子元素的四个div都是flex items

认识flex布局

main axis表示主轴，main start表示主轴开始位置 main end表示主轴结束位置，main size表示主轴大小
cross axis表示交叉轴，cross start表示交叉轴开始位置 cross end表示交叉轴结束位置，cross size表示交叉轴大小
默认的主轴为从左到右，交叉轴为从上到下

flex container上的属性

决定主轴方向——flex-direction

direction：方向
flex items默认都是沿着主轴从main start到main end方向排布
flex-direction：row默认，主轴从左向右
flex-direction：row-reverse主轴从右向左
flex-direction：column主轴从上到下
flex-direction：column-reverse主轴从下到上

决定flex-item在主轴上的对齐方式——justify-content

justify-content：flex-start默认，与主轴开始地方对齐
justify-content：flex-end与main end对齐
justify-content：center：居中对齐
justify-content：space-between表示flex-item之间距离相等，与main start，main-end对齐
justify-content：space-evenly表示flex-item时间距离相等，flex-item与main-start和main-end之间距离等于flex-item之间的距离
justify-content：space-around表示flex-item时间距离相等，flex-item与main-start和main-end之间距离等于flex-item之间的距离的一半

决定flex-item在交叉轴上的对齐方式——align-items

align-items：normal，在弹性布局中效果与stretch一样
align-items：stretch，当item在交叉轴方向size为auto时，自动拉伸填充整个flex container
align-items：flex-start与交叉轴开始对齐

align-items：flex-end与交叉轴结束位置对齐

align-items：center居中对齐

align-items：baseline与基准线对齐

决定flex-container是单行还是多行——flex-wrap

flex-wrap：nowrap单行，默认
flex-wrap：wrap，多行
flex-wrap：wrap-reverse，多行，交叉轴与wrap相反
单行时，如果width不够，它默认会进行压缩在一行显示
多行时，如果width不够一个div宽度，他不用占用剩余的宽度，而是直接下一行

flex-flow

是flex-direction和flex-wrap的缩写

flex-flow：row wrap

决定多行item在交叉轴上的对齐方式——align-content

与justify-content相似
同样右stretch，flex-start，flex-end，center，space-between，space-around，space-evenly

item属性

排列顺序——order

设置任意整数，值越小越排在前面，默认为0

覆盖container上设置的align-items——align-self

align-self，值与align-items一样

决定items如何扩展——flex-grow

设置任意非负数字，默认为0
当flex-container在主轴上有剩余位置才有效
如果所有item的flex-grow总和超过1，则每个扩展的size为剩余的sizeflex-grow占比，扩展即添加的size
如果和小于1，扩展宽度为flex-grow剩余宽度

决定item如何收缩——flex-shrink

设置任意非负数字，默认为1
items超过主轴长度才有效
当和超过1，则按照占比分配
如果小于1，则超出同扩展一样

设置主轴上大小——base-size

优先级从高到低
max-width、max-height
flex-basis
width
内容本身size

flex

是flex-grow，flex-shrink，flex-basis的简写，可以指定1，2，3个值
默认一个无单位的数表示flex-grow