day08

flex布局

display:flex;

flex布局的容器属性（父元素）

• flex-direction属性：row（默认）、row-reserve、column、column-reserve，用于控制排列方式，row是沿主轴，row-reserve为主轴反方向排列（右到左）。
• flex-wrap属性：nowrap（默认）、wrap、wrap-reserve，用于设置排不下的情况，默认为不换行，盒子会挤压，wrap为换行，wrap-reserve为反向换行
• flex-flow属性：flex-direction和flex-wrap的结合，默认为row nowrap
• justify-content属性：flex-start（默认）、flex-end、center、space-between、space-around、space-evenly，用于控制主轴上的对齐方式，默认左对齐，flex-end为右对齐，space-between为左右两侧紧贴容器，中间项目间距相等，space-around项目之间间距为左右两侧项目到容器间距的2倍（不常用），space-evenly项目之间的间距相等
• align-items属性：stretch（默认）、flex-start、flex-end、center、baseline，用于控制项目在交叉轴的排列方式，baseline比较特殊，它让项目以第一行文字的基线为参照进行排列，flex-start为靠顶部排列
• align-content属性：与justify-content类似

flex布局的项目属性（子元素）

• order属性：默认0，决定排列顺序，值越小，排列越靠前
• flex-grow属性：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
• flex-shrink属性：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
• flex-basis属性：默认auto，用于设置项目宽度，会覆盖width
• flex属性：默认0 1 auto，是flex-grow、flex-shrink、flex-basis的简写。
• align-self属性：auto(默认)、flex-start、flex-end、center、baseline、stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。