flex布局:
弹性布局
flex的两个重要概念:
开启了flex布局的元素叫flex container display: flex||inline-flex
flex container 里面的直接子元素叫做 flex items
flex布局模型:
flex items默认都是沿着主轴从main start开始往main end方向排布。
3.1flex的相关属性:
应用在flex container上的css属性:
flex-flow
flex-direction
决定main axis的方向有四个取值 row(默认值)从左到右→,row-reverse
从右到左,column(从上到下),column-reverse(从下到上)
flex-wrap
justify-content:决定了flex items 在主轴上的对齐方式。
flex-start(默认值): 与main start对齐 ;flex-end:与main end 对齐 ;
center:居中对齐 ;
space-between:flex items之间的距离相等;flex items与main start,main end两端对齐;
space-evenly: flex items之间的距离相等;flex items与main start,main end之间的距离等与flex items之间的距离;
space-around: flex items之间的距离相等;flex items与main start,main end之间的距离等与flex items之间距离的一半。
align-items
align-content
应用在flex items上的css属性:
flex
flex-grow
flex-basis
flex-shrink
order
align-self