Css 弹性布局-蒲公英云

Css 弹性布局

弹性布局

display:flex 要发生弹性布局的子元素，他们的父元素，成为容器需设置display:flex
flex将块级元素设置为容器
inline-flex将行内元素设置为容器 元素设置为flex容器后，容器的text-align，vertical-align失效

设置主轴的方向

flex-direction 取值
row 默认值，主轴是x轴，主轴起点在左端
row-reverse 主轴是x轴，主轴起点在右端
column     主轴是y轴，主轴起点在顶部
column-reverse 主轴是y轴，主轴起点在底部

设置项目的换行

flex-wrap: 取值
默认值  nowrap  空间不够时，不换行，项目会自动缩小
wrap  空间不够时，项目不缩小，换行
wrap-reverse 项目换行，并反转

定义项目在主轴上的对齐方式

justify-content 取值
flex-start 默认值，主轴起点对齐
flex-end 主轴终点
center   主轴中心
space-around 每个外边距相同，两端有空白
space-between 两端对齐，两端无空白

项目们在交叉轴上的对齐方式

align-items: 取值
flex-start 默认值，交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴中间对齐
baseline 基线，同flex-start类似
stretch 项目不写高，充满容器整个高度

让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

flex:1; // 要发生弹性布局的子元素设置 默认值： 0 1 auto
flex 是flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式,后两个属性可选写
flex-grow
表示当子元素的空间小于父元素的空间时,如何处理剩余空间,
默认值为0表示不占有剩余空间;
当子元素都设置为1时表示平均分配剩余空间;
当一个子元素为2其余子元素为1时为2的子元素占据的剩余空间比其他子元素多一倍;
当一个子元素为1其余子元素为0,为1的子元素占据全局剩余空间
felx-shrink
表示当子元素的空间大于父元素的空间时,如何缩小子元素
默认值为1表示等比缩小
当所有子元素都设置为1时所有子元素都会等比例缩小
当一个子元素为0其余子元素为1是表示为0的子元素不缩小,其余元素缩小
flex-basis
用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值