弹性盒子模型(二)

align-content:设置元素在换行后每行元素在辅轴上的对齐方式

 一旦设置 align-content,那么align-items 的优先级低于align-content

   align-content: center; 换行居中 

 

 align-content: stretch; 拉伸对齐,子元素没有设置高度, 将占满整个容器的高度,如果子元素设置高度,将失效

 

   align-content: flex-end; 底部对齐

 align-content: flex-start; 顶部对齐

 align-content: space-around; 每个项目上下间隔相等

 

   align-content: space-between;上下顶边对齐,两端对齐

 

 align-content: space-evenly; 项目间的上下距离相等

align-self:控制某一个子元素(弹性子元素的自身)在辅轴方向上的对齐方式,优先级大于 align-content.

flex-grow: ;定义项目的放大比例 1,表示把剩余的空间都充满

flex-shrink 表示是否被压缩,默认值是1表示被压缩, 0表示不被压缩

flex-basis: 200px; 表示宽度200px, 优先级高于width,默认值是auto.同时设置,只会展示 flex-basis

  简写flex:1,表示平均分布压缩,宽度auto

 order: ;定义项目的排列顺序,值越小越靠前 .默认值是0